:root {
    --tailH: 90px;
    --tailW: 370px;

    --current-playing-percent: 0;

    --wave-color: #FF0000;
    --wave-color-hue: 0deg;
    --wave-fade-edge: 25%;

    --error-msg-fade-time: 1s;
    --error-msg-show-time: 3s;

    --bg: #f6f6f6;
    --stroke: rgba(0, 0, 0, 0.10);
    --text-color-001: #434343;
    --text-color-002: #B2B2B2;
    --text-color-003: #5D6168;
    --text-color-004: #E0E0E0;
    --text-color-005: #575757;
    --text-color-006: #CBCBCB;
    --text-color-007: #CCCCCC;
    --text-color-008: #8A8A8A;
    --text-color-009: #878787;
    --panels-color: #f7f7f7;
    --text-color-green: #93D405;

    --accent-dark:  rgba(183, 74, 19, 1);
    --accent-color: rgba(241, 92, 16, 1);
    --accent-color-00: rgba(241, 92, 16, 0.0);
    --accent-color-10: rgba(241, 92, 16, 0.1);
    --accent-color-20: rgba(241, 92, 16, 0.2);
    --accent-color-30: rgba(241, 92, 16, 0.3);
    --accent-color-40: rgba(241, 92, 16, 0.4);
    --accent-color-50: rgba(241, 92, 16, 0.5);
    --accent-color-60: rgba(241, 92, 16, 0.6);
    --accent-color-70: rgba(241, 92, 16, 0.7);
    --accent-color-80: rgba(241, 92, 16, 0.8);
    --accent-color-90: rgba(241, 92, 16, 0.9);

    --green-color: rgba(147, 212, 5, 1);
    --green-color-10: rgba(147, 212, 5, 0.0);
    --green-color-10: rgba(147, 212, 5, 0.1);
    --green-color-20: rgba(147, 212, 5, 0.2);
    --green-color-30: rgba(147, 212, 5, 0.3);
    --green-color-40: rgba(147, 212, 5, 0.4);
    --green-color-50: rgba(147, 212, 5, 0.5);
    --green-color-60: rgba(147, 212, 5, 0.6);
    --green-color-70: rgba(147, 212, 5, 0.7);
    --green-color-80: rgba(147, 212, 5, 0.8);
    --green-color-90: rgba(147, 212, 5, 0.9);

    --padding-size: 20px;
    --carouseil-button-size: 30px;
    --button-size: 56px;
    --input-size: 46px;
    --base-font-size: 12px;
    --base-gap-size: 10px;

    --panels-gap: 0.5vh;
    --cp-closed-height: calc(var(--padding-size) * 2 + var(--button-size));
    --cp-height: 40vh;
    --pp-height: calc(60vh - var(--panels-gap));

    --pl-padding-size: 4vh;

    --panels-swap-time: 0.5s;

    --bottom-bg-opacity: 0.25;

    --player-elements-translate-distance: 10vh;

    --pl-fs-k: 1.2;


    --button-border-color-001: #CCC;
    --button-border-color-002: #474747;
    --button-border-color-003: rgba(204, 204, 204, 0.25);
    --button-border-color-green: #15ab00;
    --button-outline-color: rgba(255, 255, 255, 0.3); /*rgba(204, 204, 204, 0.1);*/
    --button-content-color: #555555;

    --input-bg-color: #e9e9e9;
    --input-border-color: 2px solid rgba(255,255,255,1);
    --input-box-shadow: 0px 0px calc(var(--input-size) * 0.2) inset rgba(0, 0, 0, 0.45);

    --pl-icon-color-001: #747474;
    --pl-icon-text-color-001: #CCCCCC;
    --pl-icon-text-color-002: #e0e0e0;

    --pl-play-btn-bg: #E0E0E3;
    --pl-play-btn-bdr: #CCC;
    --pl-play-btn-bg-unactive: #E0E0E0;
    --pl-play-btn-bdr-unactive: #CBCBCB;
    --pl-play-btn-load-percents-bdr: #434343;
    --pl-play-btn-play-percents-bdr: #B2B2B2;
    --pl-play-btn-play-active-bdr: var(--accent-color);
    --pl-play-btn-icon-unactive-bg: #dcdcdc;
    --pl-play-btn-icon-active-bg: #c5c5c5;
    --pl-play-btn-icon-unactive-bdr: #CCC;
    --pl-play-btn-icon-active-bdr: #555555;

    --top-panel-mask: none;
    --bottom-panel-mask: none;

    --icon-burger: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="10" y="13" width="44" height="5" rx="2.5" ry="2.5"/><rect x="10" y="30" width="44" height="5" rx="2.5" ry="2.5"/><rect x="10" y="47" width="44" height="5" rx="2.5" ry="2.5"/></svg>');
    --icon-info: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M28.93,48.75V30.92c-1,0-1.88,0-2.8,0A3,3,0,0,1,23,28a3,3,0,0,1,2.94-3.19c2,0,4,0,5.93,0A3,3,0,0,1,35,28.05q0,8.21,0,16.41c0,1.39,0,2.78,0,4.28H37.7a3.05,3.05,0,1,1,0,6.08H26.3a3.05,3.05,0,1,1,0-6.08Z"/><path d="M32,9.94a3.78,3.78,0,0,1,3.77,3.83,3.8,3.8,0,0,1-7.6-.07A3.78,3.78,0,0,1,32,9.94Z"/></svg>');
    --icon-info-002: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32,0A32,32,0,1,0,64,32,32,32,0,0,0,32,0Zm0,59A27,27,0,1,1,59,32,27,27,0,0,1,32,59Z"/><path d="M29.48,44.25V29.59c-.78,0-1.54,0-2.3,0a2.49,2.49,0,0,1-2.57-2.37A2.42,2.42,0,0,1,27,24.61c1.62,0,3.25,0,4.87,0a2.47,2.47,0,0,1,2.61,2.64q0,6.75,0,13.49c0,1.14,0,2.29,0,3.52h2.19a2.51,2.51,0,1,1,0,5H27.31a2.51,2.51,0,1,1,0-5Z"/><path d="M32,12.35a3.1,3.1,0,0,1,3.1,3.15,3.12,3.12,0,0,1-6.25-.05A3.11,3.11,0,0,1,32,12.35Z"/></svg>');

    --icon-left: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M24.77,32.5,46.46,10.82A3.41,3.41,0,1,0,41.64,6L17.54,30.09a3.41,3.41,0,0,0,0,4.82L41.64,59a3.41,3.41,0,1,0,4.82-4.82Z"/></svg>');
    --icon-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M39.23,32.5,17.54,54.18A3.41,3.41,0,0,0,22.36,59L46.46,34.91a3.41,3.41,0,0,0,0-4.82L22.36,6a3.41,3.41,0,0,0-4.82,4.82Z"/></svg>');

    --icon-play-001: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M51.52,23.65,25.85,3.22A11,11,0,0,0,8,11.82V28H8v8H8V52.18a11,11,0,0,0,17.85,8.61L51.52,40.35A10.67,10.67,0,0,0,51.52,23.65Z"/></svg>');
    --icon-play-002: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><title>icon-play-002</title><path d="M19,4.83a6.92,6.92,0,0,1,4.35,1.52L49,26.78a6.67,6.67,0,0,1,0,10.44L23.36,57.66A7,7,0,0,1,19,59.18a7,7,0,0,1-7-7V11.82a7,7,0,0,1,7-7m0-4a11,11,0,0,0-11,11V52.18a11,11,0,0,0,11,11h0a11,11,0,0,0,6.85-2.39L51.52,40.35a10.67,10.67,0,0,0,0-16.7L25.85,3.22A11,11,0,0,0,19,.83Z"/></svg>');
    --icon-play-003: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M19,8.83a3,3,0,0,1,1.86.65L46.54,29.91a2.67,2.67,0,0,1,0,4.18L20.87,54.53A3,3,0,0,1,16,52.18V11.82a3,3,0,0,1,3-3m0-8a11,11,0,0,0-11,11V52.18a11,11,0,0,0,11,11h0a11,11,0,0,0,6.85-2.39L51.52,40.35a10.67,10.67,0,0,0,0-16.7L25.85,3.22A11,11,0,0,0,19,.83Z"/></svg>');
    --icon-pause-001: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="18.5" y="7" width="10" height="51" rx="5" ry="5"/><rect x="35.5" y="7" width="10" height="51" rx="5" ry="5"/></svg>');
    --icon-pause-002: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect x="23.17" y="1" width="4" height="62" rx="2" ry="2"/><rect x="36.83" y="1" width="4" height="62" rx="2" ry="2"/></svg>');
    --icon-stop-001: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><title>icon-stop-001</title><rect x="1" y="1" width="62" height="62" rx="11" ry="11"/></svg>');
    --icon-stop-002: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><title>icon-stop-002</title><path d="M52,8a4,4,0,0,1,4,4V52a4,4,0,0,1-4,4H12a4,4,0,0,1-4-4V12a4,4,0,0,1,4-4H52m0-7H12A11,11,0,0,0,1,12V52A11,11,0,0,0,12,63H52A11,11,0,0,0,63,52V12A11,11,0,0,0,52,1Z"/></svg>');
    --icon-bwd-001: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M18.63,16.86l6.58-5.24a2.82,2.82,0,0,1,4.58,2.21V17h18a8,8,0,0,1,8,8V38a2,2,0,0,1-4,0V25a4,4,0,0,0-4-4h-18v3.17a2.82,2.82,0,0,1-4.58,2.21l-6.58-5.24A2.74,2.74,0,0,1,18.63,16.86Z"/><path d="M12.83,50.39V38.19a.74.74,0,0,0-.29-.41,1.12,1.12,0,0,0-.47-.21H9.5V35h2.67a2.79,2.79,0,0,1,1.2.27,3.76,3.76,0,0,1,1,.71,3.85,3.85,0,0,1,.73,1A2.59,2.59,0,0,1,15.43,38V50.39Z"/><path d="M26.71,50.39a6.2,6.2,0,0,1-2.49-.5,6.48,6.48,0,0,1-3.42-3.42,6.21,6.21,0,0,1-.5-2.49V41.36a6.2,6.2,0,0,1,.5-2.49,6.48,6.48,0,0,1,3.42-3.42,6.2,6.2,0,0,1,2.49-.5H36a6.28,6.28,0,0,1,2.5.5,6.45,6.45,0,0,1,3.43,3.42,6.21,6.21,0,0,1,.5,2.49V44a6.21,6.21,0,0,1-.5,2.49,6.45,6.45,0,0,1-3.43,3.42,6.28,6.28,0,0,1-2.5.5ZM22.91,44a3.59,3.59,0,0,0,.31,1.47A3.94,3.94,0,0,0,24,46.66a3.8,3.8,0,0,0,1.21.81,3.72,3.72,0,0,0,1.47.3H36a3.72,3.72,0,0,0,1.47-.3,4,4,0,0,0,1.22-.81A3.75,3.75,0,0,0,39.78,44V41.36a3.75,3.75,0,0,0-1.12-2.68,4.11,4.11,0,0,0-1.22-.82A3.6,3.6,0,0,0,36,37.56H26.71a3.6,3.6,0,0,0-1.47.31,3.89,3.89,0,0,0-2,2,3.6,3.6,0,0,0-.31,1.47Z"/></svg>');
    --icon-fwd-001: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M47.16,16.86l-6.58-5.24A2.82,2.82,0,0,0,36,13.83V17H18a8,8,0,0,0-8,8V38a2,2,0,0,0,4,0V25a4,4,0,0,1,4-4H36v3.17a2.82,2.82,0,0,0,4.58,2.21l6.58-5.24A2.74,2.74,0,0,0,47.16,16.86Z"/><path d="M24.67,50.39V38.19a.74.74,0,0,0-.29-.41,1.12,1.12,0,0,0-.47-.21H21.34V35H24a2.79,2.79,0,0,1,1.2.27,3.76,3.76,0,0,1,1,.71,3.85,3.85,0,0,1,.73,1A2.59,2.59,0,0,1,27.27,38V50.39Z"/><path d="M38.56,50.39a6.2,6.2,0,0,1-2.49-.5,6.48,6.48,0,0,1-3.42-3.42,6.21,6.21,0,0,1-.5-2.49V41.36a6.2,6.2,0,0,1,.5-2.49,6.48,6.48,0,0,1,3.42-3.42,6.2,6.2,0,0,1,2.49-.5h9.26a6.28,6.28,0,0,1,2.5.5,6.45,6.45,0,0,1,3.43,3.42,6.21,6.21,0,0,1,.5,2.49V44a6.21,6.21,0,0,1-.5,2.49,6.45,6.45,0,0,1-3.43,3.42,6.28,6.28,0,0,1-2.5.5ZM34.75,44a3.59,3.59,0,0,0,.31,1.47,3.94,3.94,0,0,0,.82,1.21,3.8,3.8,0,0,0,1.21.81,3.72,3.72,0,0,0,1.47.3h9.26a3.72,3.72,0,0,0,1.47-.3,4,4,0,0,0,1.22-.81A3.75,3.75,0,0,0,51.62,44V41.36a3.75,3.75,0,0,0-1.12-2.68,4.11,4.11,0,0,0-1.22-.82,3.6,3.6,0,0,0-1.47-.31H38.56a3.6,3.6,0,0,0-1.47.31,3.89,3.89,0,0,0-2,2,3.6,3.6,0,0,0-.31,1.47Z"/></svg>');

    --icon-heart-001: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32,16.23c1.21-1.14,2.32-2.35,3.59-3.34a14.48,14.48,0,0,1,23.21,9,14.12,14.12,0,0,1-4,12.65c-1.32,1.37-2.68,2.69-4,4L34.3,55c-1.59,1.59-3,1.59-4.64,0L9.43,34.78A14.52,14.52,0,0,1,16.7,10.08a14.27,14.27,0,0,1,13.11,4c.71.69,1.4,1.4,2.1,2.1Z"/></svg>');
    --icon-heart-002: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M44.45,9.79A14.45,14.45,0,0,1,58.78,21.86a14.12,14.12,0,0,1-4,12.65c-1.32,1.37-2.68,2.69-4,4L34.3,55A3.36,3.36,0,0,1,32,56.21,3.39,3.39,0,0,1,29.66,55L9.43,34.78A14.52,14.52,0,0,1,16.7,10.08a16.54,16.54,0,0,1,3-.28,14.23,14.23,0,0,1,10.15,4.3c.71.69,1.4,1.4,2.1,2.1l.06,0c1.21-1.14,2.32-2.35,3.59-3.34a14.3,14.3,0,0,1,8.88-3.09m0-3a17.26,17.26,0,0,0-10.73,3.73c-.62.48-1.19,1-1.73,1.51l-.09-.09A17.17,17.17,0,0,0,19.66,6.81a19.62,19.62,0,0,0-3.5.32A17.52,17.52,0,0,0,7.31,36.9L17.42,47,27.54,57.12A6.28,6.28,0,0,0,32,59.21a6.24,6.24,0,0,0,4.43-2.07L52.89,40.67l1.21-1.2C55,38.54,56,37.58,57,36.6a17.18,17.18,0,0,0,4.78-15.22A17.43,17.43,0,0,0,44.45,6.79Z"/></svg>');
    --icon-heart-003: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M44.45,12.79a11.47,11.47,0,0,1,11.37,9.56,11.1,11.1,0,0,1-3.19,10.08c-.89.93-1.84,1.86-2.75,2.77l-1.23,1.22L32.18,52.9l-.19.18-.21-.19L21.67,42.77,11.55,32.65A11.45,11.45,0,0,1,8,23.92,11.32,11.32,0,0,1,17.24,13a13.61,13.61,0,0,1,2.42-.23,11.22,11.22,0,0,1,8.07,3.45c.46.44.91.9,1.36,1.35.24.24,2.83,3.39,2.83,3.39s2.91-3.35,3.3-3.73a27.07,27.07,0,0,1,2.2-2,11.31,11.31,0,0,1,7-2.46m0-3a14.3,14.3,0,0,0-8.88,3.09c-1.27,1-2.38,2.21-3.59,3.34l-.06,0c-.7-.7-1.39-1.41-2.1-2.1a14.23,14.23,0,0,0-10.15-4.3,16.54,16.54,0,0,0-3,.28A14.52,14.52,0,0,0,9.43,34.78L29.66,55A3.39,3.39,0,0,0,32,56.21,3.36,3.36,0,0,0,34.3,55L50.77,38.55c1.34-1.34,2.7-2.67,4-4a14.12,14.12,0,0,0,4-12.65A14.45,14.45,0,0,0,44.45,9.79Z"/></svg>');

    --icon-visible:   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><title>icon-visible-001</title><path d="M5,31.57a30.89,30.89,0,0,1,7.86-9.21,31,31,0,0,1,30.8-4.42,30,30,0,0,1,12,8.75C56.83,28,57.77,29.53,58.78,31a1.73,1.73,0,0,1,0,2A30.36,30.36,0,0,1,39,47.49a30.19,30.19,0,0,1-25-5A30.51,30.51,0,0,1,5.33,33L5,32.41ZM43.1,32A11,11,0,1,0,32,43,11.05,11.05,0,0,0,43.1,32Z"/><path d="M32.1,26.48a5.51,5.51,0,1,1-5.55,5.47A5.53,5.53,0,0,1,32.1,26.48Z"/></svg>');
    --icon-invisible: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><title>icon-invisible-001</title><path d="M14,42.47c.52.37,1,.71,1.57,1l6.61-6.61A10.81,10.81,0,0,1,21,32,11.06,11.06,0,0,1,32.11,21,11.25,11.25,0,0,1,37,22.13l4.87-4.87A31,31,0,0,0,5,31.57v.85l.33.58A30.51,30.51,0,0,0,14,42.47Z"/><path d="M58.78,31c-1-1.44-1.95-2.94-3.07-4.29a29.79,29.79,0,0,0-7.2-6.29L41.91,27a10.81,10.81,0,0,1,1.19,5A11.06,11.06,0,0,1,32,43a11.25,11.25,0,0,1-4.91-1.21l-4.9,4.9A30.12,30.12,0,0,0,39,47.49,30.36,30.36,0,0,0,58.78,33,1.73,1.73,0,0,0,58.78,31Z"/><path d="M32.58,26.51l-.48,0a5.51,5.51,0,0,0-5.52,6Z"/><path d="M31.45,37.47a5.48,5.48,0,0,0,6.08-6.08Z"/><rect x="29.53" y="3.36" width="4.95" height="57.28" transform="translate(32 -13.25) rotate(45)"/></svg>');
    
    --icon-user:      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><title>icons-user-001</title><path d="M45.39,18.4A14.25,14.25,0,1,1,31.21,4.13,14.25,14.25,0,0,1,45.39,18.4Zm-24.55-.06A10.32,10.32,0,1,0,31.14,8,10.33,10.33,0,0,0,20.84,18.34Z"/><path d="M51.78,41.76a11.85,11.85,0,0,0-6-10.13A2,2,0,1,0,43.71,35a8.49,8.49,0,0,1,4.21,7.84c0,3.35,0,6.71,0,10.06a2,2,0,0,1-2.27,2.26h-29a2,2,0,0,1-2.27-2.26c0-3.35,0-6.71,0-10.06A8.49,8.49,0,0,1,18.58,35a2,2,0,1,0-2.07-3.32,11.85,11.85,0,0,0-6,10.13c-.11,3.81,0,7.62,0,11.43a5.52,5.52,0,0,0,.11,1.12A5.84,5.84,0,0,0,16.51,59c2.44,0,26.83,0,29.27,0a5.84,5.84,0,0,0,5.93-4.72,5.52,5.52,0,0,0,.11-1.12C51.82,49.39,51.9,45.57,51.78,41.76Z"/></svg>');
    --icon-lock:      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 58.05"><title>icons-lock-001</title><g><path d="M31,49a2,2,0,0,1-2-2V37a2,2,0,1,1,4,0V47A2,2,0,0,1,31,49Z" transform="translate(-12 -3)"/><path d="M21,21.92c0-1.05,0-2.8,0-4.53A10.26,10.26,0,0,1,30.36,7,10,10,0,0,1,41,17v4.92a1.88,1.88,0,0,0,.83,1.54l0,0A2,2,0,0,0,45,21.81V17.44A14.29,14.29,0,0,0,31.63,3,14,14,0,0,0,17,17v4.81a2,2,0,0,0,3.13,1.68l0,0A1.88,1.88,0,0,0,21,21.92Z" transform="translate(-12 -3)"/><path d="M31,27A15,15,0,1,1,16,42,15,15,0,0,1,31,27m0-4h0A19,19,0,0,0,12,42h0A19,19,0,0,0,31,61h0A19,19,0,0,0,50,42h0A19,19,0,0,0,31,23Z" transform="translate(-12 -3)"/></g></svg>');
    --icon-mobile:    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><title>icons-phone-001</title><path d="M15.05,32q0-9.88,0-19.77A6.89,6.89,0,0,1,22.23,5C27.82,5,33.41,5,39,5a29.44,29.44,0,0,1,4.34.19,6.8,6.8,0,0,1,5.6,6.44c0,.14,0,.27,0,.41q0,20,0,40a6.86,6.86,0,0,1-5.2,6.79,8.08,8.08,0,0,1-1.92.21Q32,59,22.18,59a6.88,6.88,0,0,1-7.12-7.12Q15,41.93,15.05,32Zm7.5-23.12a3.11,3.11,0,0,0-3.73,3.25q0,19.86,0,39.71a3.13,3.13,0,0,0,3.41,3.4H41.76a4.41,4.41,0,0,0,1-.09,3.13,3.13,0,0,0,2.37-3.29q0-19.83,0-39.65c0-.16,0-.31,0-.47a3.08,3.08,0,0,0-3.76-2.81c0,.15,0,.3,0,.46A4.34,4.34,0,0,1,37,13.79q-5.06,0-10.12,0a4.29,4.29,0,0,1-4.26-3.66C22.58,9.72,22.58,9.28,22.55,8.87Z"/><circle cx="32" cy="49" r="3"/></svg>');
    --icon-email:     url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><title>icons-email-001</title><path d="M56.55,17.4a24.68,24.68,0,0,0-10-9.46A30.72,30.72,0,0,0,32.12,4.59,30.48,30.48,0,0,0,17.48,8.07a25.16,25.16,0,0,0-10,9.69A28,28,0,0,0,3.88,31.94,28.43,28.43,0,0,0,7.42,46.12a25.21,25.21,0,0,0,9.91,9.78,29.74,29.74,0,0,0,14.56,3.51,32,32,0,0,0,6.61-.72,26.14,26.14,0,0,0,4.7-1.44,2,2,0,0,0,1.11-2.58,2,2,0,0,0-1.06-1.16,1.94,1.94,0,0,0-1.57,0,22.28,22.28,0,0,1-4,1.26,27.69,27.69,0,0,1-5.75.64,25.36,25.36,0,0,1-12.39-3,21.16,21.16,0,0,1-8.37-8.31,24.61,24.61,0,0,1-3-12.18,24.25,24.25,0,0,1,3-12.15,21.09,21.09,0,0,1,8.45-8.25A26,26,0,0,1,32.12,8.6a26.58,26.58,0,0,1,12.46,2.86,20.86,20.86,0,0,1,8.45,8,23.16,23.16,0,0,1,3,11.9c0,3.87-.53,6.91-1.58,9.05s-2.31,3.05-4,3.05a3,3,0,0,1-2.32-.92,4.48,4.48,0,0,1-.88-3.11V18.84a2.42,2.42,0,1,0-4.85,0v2.51a13.24,13.24,0,0,0-4.18-3.48,14.89,14.89,0,0,0-7.09-1.69,15.18,15.18,0,0,0-7.76,2,14.64,14.64,0,0,0-5.47,5.62,16.49,16.49,0,0,0-2,8.11,16.66,16.66,0,0,0,2,8.14,14.79,14.79,0,0,0,5.47,5.68,15,15,0,0,0,7.77,2.06,14.89,14.89,0,0,0,7.25-1.75,12.9,12.9,0,0,0,4.32-3.82,6.85,6.85,0,0,0,2,3.71,7.07,7.07,0,0,0,5.06,1.86,8.62,8.62,0,0,0,7.67-4.48c1.78-2.9,2.69-7,2.69-12.05A27,27,0,0,0,56.55,17.4ZM42.09,32.22a12.26,12.26,0,0,1-1.41,6,10.15,10.15,0,0,1-3.81,4,10.71,10.71,0,0,1-5.46,1.4,10.81,10.81,0,0,1-5.54-1.43,10.07,10.07,0,0,1-3.81-4,12.33,12.33,0,0,1-1.38-5.91,12.15,12.15,0,0,1,1.38-5.88,9.92,9.92,0,0,1,3.81-3.92A11,11,0,0,1,31.42,21a10.89,10.89,0,0,1,5.46,1.38,9.94,9.94,0,0,1,3.81,3.93A12.14,12.14,0,0,1,42.09,32.22Z"/></svg>');

    --icon-download-001:    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><title>icons-download-001</title><path d="M20,43.63a31.49,31.49,0,0,1-4.75-.31,11.17,11.17,0,0,1-.2-21.75A1.89,1.89,0,0,0,16.6,20,16,16,0,0,1,47.32,18.8,2.44,2.44,0,0,0,49,20.4a11.81,11.81,0,0,1-.82,23,30.64,30.64,0,0,1-4.49.24c-.79,0-1.59,0-2.38,0a1.92,1.92,0,1,1,0-3.83c1.88,0,3.77.08,5.63-.11a7.86,7.86,0,0,0,6.95-7.64,8,8,0,0,0-6.62-8.14l-1.61-.25a1.63,1.63,0,0,1-1.32-1.19c-.26-1-.46-2-.82-2.95a12.14,12.14,0,0,0-23.36,2.3c-.1.62-.19,1.24-.31,1.85-.16.85-.51,1.14-1.39,1.26s-1.58.18-2.35.35a7.35,7.35,0,0,0,1.5,14.52c1.84,0,3.67,0,5.51,0a1.9,1.9,0,0,1,.78,3.66,2.92,2.92,0,0,1-1,.15C21.92,43.65,20,43.63,20,43.63Z"/><path d="M30.2,49.89v-.84q0-8.54,0-17.08a4.25,4.25,0,0,1,.06-.87,1.92,1.92,0,0,1,1.94-1.53A2,2,0,0,1,34,31.3a6.13,6.13,0,0,1,0,.69q0,8.51,0,17v.79c.18-.15.31-.23.41-.33.87-.87,1.74-1.74,2.61-2.61a1.92,1.92,0,1,1,2.73,2.69q-3.11,3.13-6.24,6.24a1.91,1.91,0,0,1-2.88,0q-3.13-3.11-6.24-6.24a1.92,1.92,0,1,1,2.72-2.7C28.15,47.82,29.11,48.8,30.2,49.89Z"/></svg>');
    --icon-categories-001:  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><title>icons-categories-001</title><path d="M39.5,22a2,2,0,0,1,2,2V40a2,2,0,0,1-2,2h-16a2,2,0,0,1-2-2V24a2,2,0,0,1,2-2h16m0-2h-16a4,4,0,0,0-4,4V40a4,4,0,0,0,4,4h16a4,4,0,0,0,4-4V24a4,4,0,0,0-4-4Z"/><rect x="23.5" y="24" width="16" height="16" rx="1" ry="1"/><path d="M17,37H14a2,2,0,0,1-2-2V29a2,2,0,0,1,2-2h3V25H14a4,4,0,0,0-4,4v6a4,4,0,0,0,4,4h3Z"/><path d="M49,25H46v2h3a2,2,0,0,1,2,2v6a2,2,0,0,1-2,2H46v2h3a4,4,0,0,0,4-4V29A4,4,0,0,0,49,25Z"/></svg>');
    --icon-headphones-001:  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><title>icons-headphones-001</title><path d="M52.58,40.57c-.05.38-.08.76-.16,1.14a9.64,9.64,0,0,1-6.76,7.64,9,9,0,0,1-2.87.42h-.61a1.31,1.31,0,0,0-.72.21,2.59,2.59,0,0,1-1.6.33A2.36,2.36,0,0,1,37.76,48,9.52,9.52,0,0,1,38,46.65c1.26-5.09,2.61-10.15,4.07-15.19a3.18,3.18,0,0,1,.52-1.25A2.43,2.43,0,0,1,46,30a8.92,8.92,0,0,1,.67.87s.06.1.1.13c.42.26.85.52,1.32.75a14.3,14.3,0,0,0-.52-4.11,15.66,15.66,0,0,0-2.92-5.76l-.91.78a2.83,2.83,0,0,1-1.3.73,2.42,2.42,0,0,1-2-.43c-.68-.53-1.35-1.08-2.07-1.54a11.77,11.77,0,0,0-7-1.8,12.16,12.16,0,0,0-7.61,3.07,2.7,2.7,0,0,1-1.19.69,2.56,2.56,0,0,1-2.4-.68c-.3-.28-.62-.54-1-.83a15.13,15.13,0,0,0-2.48,4.45,16.1,16.1,0,0,0-1,5.47,4.7,4.7,0,0,0,1.4-.84c.2-.21.31-.49.5-.72a2.39,2.39,0,0,1,3.55-.08,2,2,0,0,1,.43.73c.64,2.19,1.28,4.39,1.87,6.59.85,3.18,1.66,6.37,2.48,9.56a3.26,3.26,0,0,1,.17,1.38,2.49,2.49,0,0,1-2.06,1.94l-.22,0h-.17A9.77,9.77,0,0,1,22.65,50a3.14,3.14,0,0,0-1.09-.26,19.36,19.36,0,0,1-2.29-.19,9.08,9.08,0,0,1-4.78-2.49,9.54,9.54,0,0,1-2.89-5.19c-.08-.41-.13-.83-.19-1.24V39.39a1.72,1.72,0,0,0,0-.18,9.59,9.59,0,0,1,2.31-5.58.57.57,0,0,0,.14-.4c0-1.06,0-2.13.08-3.19a16.29,16.29,0,0,1,1.92-6.58,18,18,0,0,1,8.78-8.22,17.32,17.32,0,0,1,11.15-1.15,18,18,0,0,1,10.93,7.2,17.17,17.17,0,0,1,3.1,7.53,22.37,22.37,0,0,1,.23,4.06,1.39,1.39,0,0,0,.33,1,9.52,9.52,0,0,1,2,4.19c.08.43.13.87.19,1.3ZM17.34,33.2c-.2.12-.37.2-.52.3A7.62,7.62,0,0,0,13.47,41a7.51,7.51,0,0,0,3.42,5.49A8,8,0,0,0,21,47.83c.25,0,.27,0,.21-.26L17.79,34.81C17.65,34.29,17.5,33.78,17.34,33.2ZM42.77,47.82a2.26,2.26,0,0,0,.28,0c.47-.06.95-.1,1.41-.2A7.81,7.81,0,0,0,50,37a7.68,7.68,0,0,0-3-3.65c-.32-.2-.35-.19-.45.16L42.93,47.15C42.87,47.37,42.83,47.58,42.77,47.82Zm.59-27.47-.07-.1L43.07,20A15.54,15.54,0,0,0,32.58,15.7a20.81,20.81,0,0,0-2.64.06,15.62,15.62,0,0,0-5.54,1.78,15.31,15.31,0,0,0-3.62,2.63c-.12.12-.15.2,0,.32l1.09.91a.25.25,0,0,0,.34,0c.2-.15.4-.28.59-.43a14.63,14.63,0,0,1,11.57-3.2A14.57,14.57,0,0,1,41.22,21a6.43,6.43,0,0,0,.61.44.26.26,0,0,0,.23,0A6.58,6.58,0,0,0,43.36,20.35Zm1.1,11c-.27,0-.36.07-.44.35Q42.84,36,41.66,40.37c-.66,2.46-1.31,4.92-2,7.37a.47.47,0,1,0,.9.26c0-.09.06-.19.08-.28Q42.23,42,43.76,36.28c.38-1.43.75-2.87,1.12-4.3C45,31.57,44.83,31.36,44.45,31.36Zm-24.91,0c-.28,0-.44.12-.46.35a1,1,0,0,0,.05.33q1.8,6.82,3.61,13.63c.21.78.42,1.55.65,2.32a.47.47,0,0,0,.57.36.48.48,0,0,0,.32-.62c-.62-2.34-1.23-4.69-1.86-7q-1.21-4.49-2.43-9C19.9,31.43,19.81,31.36,19.54,31.36Z"/></svg>');
    --icon-headphones-002:  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><title>icons-headphones-002</title><path d="M11.59,53.65A10.41,10.41,0,0,1,6.52,34.71a.83.83,0,0,0,.37-.78A35.85,35.85,0,0,1,9.48,20.39C12.92,12.3,19,7.66,27.73,6.46A28.56,28.56,0,0,1,41.67,7.77c6.28,2.3,10.46,6.76,13,12.88a36.09,36.09,0,0,1,2.48,13.14,1.12,1.12,0,0,0,.52,1,10.39,10.39,0,0,1-4.4,18.73c-.24,0-.48.06-.81.1,0-.26,0-.5,0-.73,0-6.09,0-12.18,0-18.28A32.71,32.71,0,0,0,50.46,23,18,18,0,0,0,43,13.61,19.11,19.11,0,0,0,34.62,11a24.25,24.25,0,0,0-10.48,1.13A17.23,17.23,0,0,0,13.76,22.48a32,32,0,0,0-2.16,12c0,6.11,0,12.22,0,18.33C11.59,53.08,11.59,53.32,11.59,53.65Zm-1-1.16v-.65c0-5.17,0-10.33,0-15.5,0-1.71,0-3.42.15-5.13a28.8,28.8,0,0,1,2.9-11A17.65,17.65,0,0,1,24,11.13a25.63,25.63,0,0,1,12.67-.86A18,18,0,0,1,50.75,21.09a30.82,30.82,0,0,1,2.63,12.72c.05,6,0,11.91,0,17.86,0,.25,0,.5,0,.79.18,0,.3,0,.42-.08a9.38,9.38,0,0,0,2.79-17,1,1,0,0,1-.54-1,35,35,0,0,0-2.53-13.65A21,21,0,0,0,43.42,9.6a24.2,24.2,0,0,0-9.48-2.37,26.65,26.65,0,0,0-12.55,2C15.76,11.73,12.14,16.1,10,21.78A36.07,36.07,0,0,0,7.89,34.57a.69.69,0,0,1-.36.67A9.36,9.36,0,0,0,5.9,50,9.13,9.13,0,0,0,10.6,52.48Z"/><path d="M51.4,43.32q0,5.58,0,11.15A3.09,3.09,0,0,1,48,57.86a3.65,3.65,0,0,1-2.64-.76,3,3,0,0,1-1-2.31q0-11.52,0-23a3,3,0,0,1,3.11-3.07h.84a3,3,0,0,1,3.16,3.17Q51.4,37.58,51.4,43.32Zm-6.11,0q0,5.65,0,11.31a2,2,0,0,0,1.19,2,3.44,3.44,0,0,0,2.8,0,2.09,2.09,0,0,0,1.14-2.13q0-11.23,0-22.46a3.79,3.79,0,0,0,0-.57,2,2,0,0,0-2-1.75h-.73A2.09,2.09,0,0,0,45.29,32Q45.29,37.66,45.29,43.29Z"/><path d="M12.61,43.26q0-5.6,0-11.2A3.06,3.06,0,0,1,16,28.69a6,6,0,0,1,1.6.16,3,3,0,0,1,2.13,3.07q0,6.2,0,12.41,0,5.08,0,10.16a3.08,3.08,0,0,1-3.39,3.36,6.21,6.21,0,0,1-1.55-.14,3,3,0,0,1-2.17-3Q12.6,49,12.61,43.26Zm6.11,0q0-1.6,0-3.19,0-4,0-8a2.1,2.1,0,0,0-2.34-2.36c-.28,0-.56,0-.84,0a1.77,1.77,0,0,0-1.58,1,3.63,3.63,0,0,0-.34,1.5q0,11.1,0,22.2a5.63,5.63,0,0,0,0,.63,2,2,0,0,0,2,1.87h.73a2.09,2.09,0,0,0,2.32-2.34Q18.72,48.88,18.72,43.25Z"/><rect x="21.3" y="41.69" width="1.04" height="3.14" rx="0.52" ry="0.52"/><rect x="24.2" y="37.17" width="1.04" height="12.18" rx="0.52" ry="0.52"/><rect x="27.11" y="35.79" width="1.04" height="14.94" rx="0.52" ry="0.52"/><rect x="30.03" y="38.65" width="1.04" height="9.22" rx="0.52" ry="0.52"/><rect x="32.94" y="33.21" width="1.04" height="20.1" rx="0.52" ry="0.52"/><rect x="35.85" y="36.88" width="1.04" height="12.75" rx="0.52" ry="0.52"/><rect x="38.76" y="39.65" width="1.04" height="7.22" rx="0.52" ry="0.52"/><rect x="41.67" y="41.56" width="1.04" height="3.39" rx="0.52" ry="0.52"/></svg>');

    --icon-list-up-001:     url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><title>icons-list-up-001</title><rect x="14" y="19" width="11" height="2"/><rect x="38.94" y="19" width="11" height="2"/><rect x="14" y="25" width="7" height="2"/><rect x="14" y="31" width="12.94" height="2"/><rect x="14" y="37" width="12.94" height="2"/><rect x="14" y="43" width="12.94" height="2"/><rect x="37" y="43" width="12.94" height="2"/><rect x="37" y="37" width="12.94" height="2"/><rect x="37" y="31" width="12.94" height="2"/><rect x="42.94" y="25" width="7" height="2"/><polygon points="40.49 25.18 32 16.7 32 16.7 32 16.7 23.51 25.18 25.64 27.3 30.5 22.44 30.5 45 33.5 45 33.5 22.44 38.36 27.3 40.49 25.18"/></svg>');
    --icon-list-down-001:   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><title>icons-list-down-001</title><rect x="38.94" y="40.7" width="11" height="2" transform="translate(88.88 83.39) rotate(180)"/><rect x="14" y="40.7" width="11" height="2" transform="translate(39 83.39) rotate(180)"/><rect x="42.94" y="34.7" width="7" height="2" transform="translate(92.88 71.39) rotate(180)"/><rect x="37" y="28.7" width="12.94" height="2" transform="translate(86.94 59.39) rotate(180)"/><rect x="37" y="22.7" width="12.94" height="2" transform="translate(86.94 47.39) rotate(180)"/><rect x="37" y="16.7" width="12.94" height="2" transform="translate(86.94 35.39) rotate(180)"/><rect x="14" y="16.7" width="12.94" height="2" transform="translate(40.94 35.39) rotate(180)"/><rect x="14" y="22.7" width="12.94" height="2" transform="translate(40.94 47.39) rotate(180)"/><rect x="14" y="28.7" width="12.94" height="2" transform="translate(40.94 59.39) rotate(180)"/><rect x="14" y="34.7" width="7" height="2" transform="translate(35 71.39) rotate(180)"/><polygon points="23.45 36.52 31.94 45 31.94 45 31.94 45 40.42 36.52 38.3 34.39 33.44 39.26 33.44 16.7 30.44 16.7 30.44 39.26 25.57 34.39 23.45 36.52"/></svg>');

    --icon-letter-001:      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><title>icon-email-001</title><path d="M32,62.79H7.84C4.24,62.79,2,60.57,2,57Q2,38.19,2,19.42a1.76,1.76,0,0,1,1-1.76c1.33-.72,2.59-1.56,3.91-2.29a1.14,1.14,0,0,0,.66-1.19c0-1.65,0-3.3,0-4.95a3.26,3.26,0,0,1,3.52-3.51c3.76,0,7.52,0,11.27,0a3.32,3.32,0,0,0,1.53-.42Q26.67,3.71,29.39,2a4.59,4.59,0,0,1,5.23,0c1.89,1.16,3.81,2.29,5.73,3.4a2.3,2.3,0,0,0,1.09.29c3.8,0,7.61,0,11.41,0A3.28,3.28,0,0,1,56.44,9.3c0,1.7,0,3.39,0,5.09a.85.85,0,0,0,.49.87c1.43.82,2.83,1.69,4.26,2.51A1.5,1.5,0,0,1,62,19.22q0,19,0,38a5.35,5.35,0,0,1-5.61,5.55Zm.09-54.87H11.31c-1.25,0-1.54.29-1.54,1.53,0,4.67,0,9.35,0,14a1.66,1.66,0,0,0,.51,1.27q8.79,9.09,17.56,18.2c2.54,2.63,5.79,2.66,8.31,0q8.8-9.12,17.61-18.24a1.58,1.58,0,0,0,.5-1.21c0-4.67,0-9.35,0-14,0-1.3-.28-1.58-1.56-1.58ZM6.6,60.34l.06.15H57.37l0-.15L37.56,44.67A7.53,7.53,0,0,1,32,47.1a7.67,7.67,0,0,1-5.57-2.41ZM4.22,21.62c0,2.33,0,4.46,0,6.59q0,14.4,0,28.81a16.43,16.43,0,0,0,.3,2.15L24.91,43.08Zm55.58,0L39.1,43.08,59.47,59.16a15.32,15.32,0,0,0,.31-2.09q0-17.32,0-34.65ZM36.24,5.7l.06-.15c-1.24-.69-2.47-1.42-3.74-2.05a1.43,1.43,0,0,0-1.12,0c-1.27.64-2.49,1.37-3.73,2.06,2.78.16,5.5.16,8.21.16ZM59.07,19.08l-2.58-1.52v4.13ZM7.52,21.75V17.55l-2.6,1.54Z"/><path d="M36.45,19.27a4.44,4.44,0,0,1,1.44,0c.57.2.57.81.57,1.36,0,2.43,0,4.85,0,7.27a2.6,2.6,0,0,0,3-2.27,9.54,9.54,0,0,0-9.44-11A9.11,9.11,0,0,0,23.2,20.5a9.64,9.64,0,0,0,2,10.56,9.77,9.77,0,0,0,11.15,1.69c1-.52,1.62-.46,2,.21s0,1.26-1,1.77a11.8,11.8,0,1,1-7.7-22.11,11.8,11.8,0,0,1,14,13.51,5.13,5.13,0,0,1-7.35,3.57.79.79,0,0,0-.92,0,6.43,6.43,0,1,1,.83-10.32l.16.13ZM32,20a4.2,4.2,0,1,0,4.25,4.21A4.23,4.23,0,0,0,32,20Z"/></svg>');
    --icon-letter-002:      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><title>icons-email-002</title><path d="M2,31.08l6.81,4.45L19.07,42.3l.48.34L16.73,45.3,2.54,58.69a5.45,5.45,0,0,1-.54.4Z"/><path d="M62,59.09a2.49,2.49,0,0,1-.37-.24l-17-16-.19-.21c.11-.09.2-.18.31-.25l17-11.18.26-.14Z"/><path d="M32,10.67H50.53c1.25,0,1.61.36,1.61,1.6q0,10.22,0,20.45a1,1,0,0,1-.5.94Q42.06,40,32.5,46.29a.75.75,0,0,1-1,0q-9.59-6.35-19.2-12.67a.93.93,0,0,1-.47-.9q0-10.25,0-20.51c0-1.17.38-1.55,1.54-1.55Zm0,17.11c-3,0-5.93,0-8.9,0a2.47,2.47,0,0,0-1.25.37,1.65,1.65,0,0,0-.59,1.93,1.81,1.81,0,0,0,1.82,1.2H40.93a1.77,1.77,0,0,0,1.9-1.79,1.74,1.74,0,0,0-1.94-1.72Zm0-8.91H23A1.74,1.74,0,0,0,21.2,21a1.78,1.78,0,0,0,1.87,1.44H40.81a1.94,1.94,0,0,0,1.58-.61,1.66,1.66,0,0,0,.29-1.86A1.68,1.68,0,0,0,41,18.86Z"/><path d="M4.71,61.5,22.58,44.63l.53.33c2.57,1.7,5.15,3.39,7.72,5.1a1.92,1.92,0,0,0,2.34,0q3.68-2.45,7.38-4.87l.87-.56L59.3,61.5Z"/><path d="M37.68,7.1H26.42c.16-.17.25-.28.36-.38L31,3a1.25,1.25,0,0,1,2,0l4.26,3.75Z"/><path d="M60.87,27.56,55.71,31V23Z"/><path d="M8.28,31,3.14,27.56,8.28,23Z"/></svg>');

    --icon-attention-001:   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><title>icon-attention-001</title><path d="M62,49.56a22.75,22.75,0,0,1-1.1,3.67A10.33,10.33,0,0,1,51,59.39c-8.33,0-16.66,0-25,0H13a10.26,10.26,0,0,1-8.45-3.91c-2.7-3.41-3.33-7.25-1.42-11.18,1.6-3.29,3.57-6.4,5.4-9.57q7.05-12.23,14.12-24.46A10.78,10.78,0,0,1,30.2,4.77,10.44,10.44,0,0,1,40.68,9.11C42.9,12.69,45,16.36,47.06,20c4.33,7.49,8.64,15,13,22.48A14.32,14.32,0,0,1,62,47.81Zm-30.08,5h19a6,6,0,0,0,4.63-1.85,5.83,5.83,0,0,0,.72-7.18L41.09,19.32c-1.41-2.45-2.77-4.93-4.28-7.31a5.37,5.37,0,0,0-5.37-2.52,5.76,5.76,0,0,0-4.62,3.17Q19.37,25.59,11.89,38.52c-1.47,2.55-3,5.07-4.37,7.67A5.42,5.42,0,0,0,7.89,52a5.76,5.76,0,0,0,5.19,2.61Z"/></svg>');
    --icon-attention-002:   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><title>icon-attention-002</title><path d="M35.08,25.12q-.36,6.16-.72,12.31a15.75,15.75,0,0,1-.1,1.69A2.25,2.25,0,0,1,32,41a2.16,2.16,0,0,1-2.19-1.88c-.17-1.53-.23-3.07-.32-4.6-.19-3.13-.37-6.26-.58-9.39-.17-2.62,2.16-4.47,4.4-3.43A3.17,3.17,0,0,1,35.08,25.12Z"/><path d="M32,49.25a3.07,3.07,0,0,1,0-6.13,3.07,3.07,0,0,1,0,6.13Z"/></svg>');

    --icon-success-001:     url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><title>icon-success-001</title><path d="M32,2A30,30,0,1,1,2,32,30,30,0,0,1,32,2ZM26,36.71c-1.28-1.26-2.53-2.49-3.77-3.73a3.08,3.08,0,0,0-2-1,3,3,0,0,0-2.91,1.7,3,3,0,0,0,.61,3.43c1.87,1.9,3.77,3.79,5.66,5.67,1.64,1.64,3.26,1.64,4.89,0L38.93,32.33,46,25.27a3,3,0,0,0,1-2.66,2.85,2.85,0,0,0-2-2.46,2.88,2.88,0,0,0-3.11.74c-2.39,2.38-4.77,4.78-7.16,7.16Z"/></svg>');

    --button-mask-001:      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M2,25.39C4.69,33.71,17.09,37,32,37s27.31-3.29,30-11.61A30.18,30.18,0,0,0,32,1C17.09,1,5,12,2,25.39Z"/></svg>');


    --tg-logo-img: url('data:image/svg+xml;utf8,<svg id="tg-logo-001" data-name="tg-logo-001" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><title>tg-logo-001</title><path d="M498.89,256.8a257.73,257.73,0,0,1-10.7,72.31,249.58,249.58,0,0,1-16.11,40.47A245,245,0,0,1,373.28,473a236.82,236.82,0,0,1-69.69,25.72,185.51,185.51,0,0,1-26.11,3.58c-7.65.43-15.32.95-23,.91a228,228,0,0,1-41.13-4,236.7,236.7,0,0,1-56.79-18.27A242.7,242.7,0,0,1,85.74,430.4,247.22,247.22,0,0,1,19.45,300c-1.26-7.38-2-14.86-2.79-22.31a188.11,188.11,0,0,1-.94-23.21,255.48,255.48,0,0,1,5.26-49A249.86,249.86,0,0,1,38.7,151.82a245.92,245.92,0,0,1,36.79-57.3A241.53,241.53,0,0,1,126,49.94,237.26,237.26,0,0,1,233.12,11.7c5.85-.6,11.75-.82,17.63-1,5.73-.16,11.47-.26,17.19,0a237.83,237.83,0,0,1,52.74,8.34,235.17,235.17,0,0,1,46.56,18.37A245.92,245.92,0,0,1,487,180.79a237.79,237.79,0,0,1,9.81,45.37c.65,5.76,1,11.56,1.43,17.35C498.56,247.93,498.68,252.37,498.89,256.8ZM372.64,168.64c-.24-1.92-.32-3.71-.7-5.43-1-4.33-3.57-7.25-7.93-8.23a23.15,23.15,0,0,0-6-.37,31.47,31.47,0,0,0-11,2.85q-37.91,16.14-75.85,32.22Q193.1,222.55,115,255.33a64.57,64.57,0,0,0-8.38,4.35,20.65,20.65,0,0,0-4.62,3.88,8.2,8.2,0,0,0,3.62,13.54c15,5,30,10,45.12,14.83a48.07,48.07,0,0,0,20.35,2.17A27.65,27.65,0,0,0,184,289.59q37.92-26.19,75.95-52.23c9.27-6.36,18.54-12.71,27.91-18.91a81.44,81.44,0,0,1,9.6-5.16,17.86,17.86,0,0,1,4.86-1.42c2.45-.4,3.78.93,3.38,3.35a15.58,15.58,0,0,1-1.33,4.12,30.71,30.71,0,0,1-6,8.46c-6.85,6.88-13.62,13.84-20.6,20.58-17.74,17.14-35.6,34.15-53.34,51.29a25.4,25.4,0,0,0-4.34,5.77,10.35,10.35,0,0,0,.21,10.87,22.84,22.84,0,0,0,4.45,5.37c3.46,3,7.11,5.87,10.8,8.63,16.13,12.06,32.86,23.26,49.55,34.52,3.42,2.31,6.88,4.54,10.24,6.94A86,86,0,0,0,313,381.65a39.5,39.5,0,0,0,11.46,3,14.43,14.43,0,0,0,13.66-6.22,21.73,21.73,0,0,0,3.75-8.09c.78-3.46,1.37-7,1.92-10.48q5-31.74,9.87-63.48c2.67-17.17,5.41-34.32,8-51.5q4.63-30.44,9.07-60.91C371.53,178.81,372,173.66,372.64,168.64Z"/></svg>');
    

/*
    --ticket-bg-p001: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 252"><defs><style>.cls-1{fill:rgba(255,255,255,1);}</style></defs><title>ticket-p001</title><path class="cls-1" d="M30.42,6A31.09,31.09,0,0,1,6,30.42v7.45a12.51,12.51,0,0,1,6.5,11A12.51,12.51,0,0,1,6,59.8v9.07a12.51,12.51,0,0,1,6.5,11A12.51,12.51,0,0,1,6,90.8v9.07a12.51,12.51,0,0,1,6.5,11,12.51,12.51,0,0,1-6.5,11v8.41a12.51,12.51,0,0,1,6.5,11,12.51,12.51,0,0,1-6.5,11v9.07a12.51,12.51,0,0,1,6.5,11,12.51,12.51,0,0,1-6.5,11v9.07a12.51,12.51,0,0,1,6.5,11,12.51,12.51,0,0,1-6.5,11v7.45A31.09,31.09,0,0,1,30.42,246H40V6Z"/><path d="M30.42,246A31.09,31.09,0,0,0,6,221.58v-7.45a12.51,12.51,0,0,0,6.5-11,12.51,12.51,0,0,0-6.5-11v-9.07a12.51,12.51,0,0,0,6.5-11,12.51,12.51,0,0,0-6.5-11v-9.07a12.51,12.51,0,0,0,6.5-11,12.51,12.51,0,0,0-6.5-11V121.8a12.51,12.51,0,0,0,6.5-11,12.51,12.51,0,0,0-6.5-11V90.8a12.51,12.51,0,0,0,6.5-11,12.51,12.51,0,0,0-6.5-11V59.8a12.51,12.51,0,0,0,6.5-11,12.51,12.51,0,0,0-6.5-11V30.42A31.09,31.09,0,0,0,30.42,6H40V0H25a25.19,25.19,0,0,1-.29,3.81,24.88,24.88,0,0,1-.5,2.44q-.31,1.2-.73,2.35A24.92,24.92,0,0,1,20.73,14q-.34.5-.7,1a25.14,25.14,0,0,1-2.36,2.72A25.11,25.11,0,0,1,13,21.38q-1,.63-2.12,1.15a24.83,24.83,0,0,1-3.4,1.34A25,25,0,0,1,0,25V42.33a6.48,6.48,0,0,1,2.53.51q.29.12.57.27a6.52,6.52,0,0,1,1,.7,6.49,6.49,0,0,1,2.37,5A6.48,6.48,0,0,1,6,51.36a6.48,6.48,0,0,1-.6,1.1,6.53,6.53,0,0,1-.79,1,6.53,6.53,0,0,1-.75.63l-.42.28a6.47,6.47,0,0,1-.9.48A6.48,6.48,0,0,1,0,55.33v18a6.48,6.48,0,0,1,2.53.51q.29.12.57.27a6.52,6.52,0,0,1,1,.7,6.49,6.49,0,0,1,2.37,5A6.48,6.48,0,0,1,6,82.36a6.48,6.48,0,0,1-.6,1.1,6.53,6.53,0,0,1-.79,1,6.53,6.53,0,0,1-.75.63l-.42.28a6.47,6.47,0,0,1-.9.48A6.48,6.48,0,0,1,0,86.33v18a6.48,6.48,0,0,1,2.53.51q.29.12.57.27a6.52,6.52,0,0,1,1,.7,6.49,6.49,0,0,1,2.37,5A6.48,6.48,0,0,1,6,113.36a6.48,6.48,0,0,1-.6,1.1,6.53,6.53,0,0,1-.79,1,6.53,6.53,0,0,1-.75.63l-.42.28a6.47,6.47,0,0,1-.9.48,6.48,6.48,0,0,1-2.53.51v17.33a6.48,6.48,0,0,1,2.53.51,6.47,6.47,0,0,1,.9.48l.42.28a6.53,6.53,0,0,1,.75.63,6.53,6.53,0,0,1,.79,1,6.48,6.48,0,0,1,.6,1.1,6.52,6.52,0,0,1,0,5.06q-.12.29-.27.57a6.52,6.52,0,0,1-.7,1,6.54,6.54,0,0,1-.88.88,6.51,6.51,0,0,1-1,.7q-.28.15-.57.27a6.48,6.48,0,0,1-2.53.51v18a6.49,6.49,0,0,1,5.39,2.87,6.47,6.47,0,0,1,.82,1.7,6.46,6.46,0,0,1,.26,1.27,6.57,6.57,0,0,1,0,.66h0a6.5,6.5,0,0,1-6.5,6.5v18a6.49,6.49,0,0,1,5.39,2.87,6.47,6.47,0,0,1,.82,1.7,6.46,6.46,0,0,1,.26,1.27,6.57,6.57,0,0,1,0,.66h0a6.5,6.5,0,0,1-6.5,6.5V227a25,25,0,0,1,25,25H40v-6Z"/></svg>');
    --ticket-bg-p002: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 252"><defs><style>.cls-1{fill:rgba(255,255,255,1);}</style></defs><title>ticket-p002</title><rect width="40" height="6"/><rect y="246" width="40" height="6"/><rect class="cls-1" y="6" width="40" height="240"/></svg>');
    --ticket-bg-p003: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 252 252"><defs><style>.cls-1{fill:rgba(255,255,255,1);}</style></defs><title>ticket-p003</title><path class="cls-1" d="M34.58,246a31,31,0,0,1,60.83,0H221.58A31.09,31.09,0,0,1,246,221.58v-7.45a12.5,12.5,0,0,1,0-21.93v-9.07a12.5,12.5,0,0,1,0-21.93v-9.07a12.5,12.5,0,0,1,0-21.93V121.8a12.5,12.5,0,0,1,0-21.93V90.8a12.5,12.5,0,0,1,0-21.93V59.8a12.5,12.5,0,0,1,0-21.93V30.42A31.09,31.09,0,0,1,221.58,6H95.42A31.05,31.05,0,0,1,65,31,31.05,31.05,0,0,1,34.58,6H0V246ZM65,36.33a12.5,12.5,0,1,1-12.5,12.5A12.51,12.51,0,0,1,65,36.33Zm0,31a12.5,12.5,0,1,1-12.5,12.5A12.51,12.51,0,0,1,65,67.33Zm0,31a12.5,12.5,0,1,1-12.5,12.5A12.51,12.51,0,0,1,65,98.33Zm0,30.33a12.5,12.5,0,1,1-12.5,12.5A12.51,12.51,0,0,1,65,128.67Zm0,31a12.5,12.5,0,1,1-12.5,12.5A12.51,12.51,0,0,1,65,159.67Zm0,31a12.5,12.5,0,1,1-12.5,12.5A12.51,12.51,0,0,1,65,190.67Z"/><path d="M247.87,43.82a6.52,6.52,0,0,1,1-.7q.28-.15.57-.27a6.48,6.48,0,0,1,2.53-.51V25a25.19,25.19,0,0,1-3.81-.29,24.88,24.88,0,0,1-2.44-.5A24.88,24.88,0,0,1,238,20.73q-.5-.34-1-.7a25.15,25.15,0,0,1-2.72-2.36A25.15,25.15,0,0,1,232,15q-.36-.48-.7-1a24.88,24.88,0,0,1-3.48-7.73,24.88,24.88,0,0,1-.5-2.44A25.19,25.19,0,0,1,227,0H90a25.19,25.19,0,0,1-.29,3.81,24.88,24.88,0,0,1-.5,2.44q-.31,1.2-.73,2.35A24.92,24.92,0,0,1,85.73,14q-.34.5-.7,1a25.14,25.14,0,0,1-2.36,2.72A25.11,25.11,0,0,1,78,21.38q-1,.63-2.12,1.15a24.83,24.83,0,0,1-3.4,1.34A25,25,0,0,1,65,25a25.19,25.19,0,0,1-3.81-.29,24.88,24.88,0,0,1-2.44-.5A24.88,24.88,0,0,1,51,20.73q-.5-.34-1-.7a25.15,25.15,0,0,1-2.72-2.36A25.15,25.15,0,0,1,45,15q-.36-.48-.7-1a24.88,24.88,0,0,1-3.48-7.73,24.88,24.88,0,0,1-.5-2.44A25.19,25.19,0,0,1,40,0H0V6H34.58A31.05,31.05,0,0,0,65,31,31.05,31.05,0,0,0,95.42,6H221.58A31.09,31.09,0,0,0,246,30.42v7.45a12.5,12.5,0,0,0,0,21.93v9.07a12.5,12.5,0,0,0,0,21.93v9.07a12.5,12.5,0,0,0,0,21.93v8.41a12.5,12.5,0,0,0,0,21.93v9.07a12.5,12.5,0,0,0,0,21.93v9.07a12.5,12.5,0,0,0,0,21.93v7.45A31.09,31.09,0,0,0,221.58,246H95.42a31,31,0,0,0-60.83,0H0v6H40a24.88,24.88,0,0,1,2.47-10.84q.53-1.09,1.15-2.12A25.13,25.13,0,0,1,50,232q.48-.36,1-.7a24.92,24.92,0,0,1,5.38-2.75q1.15-.42,2.35-.73a24.88,24.88,0,0,1,2.44-.5A25,25,0,0,1,90,252H227a24.88,24.88,0,0,1,2.47-10.84q.53-1.09,1.15-2.12A25.13,25.13,0,0,1,237,232q.48-.36,1-.7a24.92,24.92,0,0,1,5.38-2.75q1.15-.42,2.35-.73a24.88,24.88,0,0,1,2.44-.5A25.19,25.19,0,0,1,252,227V209.67a6.5,6.5,0,0,1-6.5-6.5h0a6.57,6.57,0,0,1,0-.66,6.5,6.5,0,0,1,6.47-5.84v-18a6.5,6.5,0,0,1-6.5-6.5h0a6.57,6.57,0,0,1,0-.66,6.5,6.5,0,0,1,6.47-5.84v-18a6.48,6.48,0,0,1-2.53-.51q-.29-.12-.57-.27a6.53,6.53,0,0,1-2.62-2.62q-.15-.28-.27-.57a6.44,6.44,0,0,1,2.14-7.76l.42-.28a6.31,6.31,0,0,1,3.43-1V117.33a6.31,6.31,0,0,1-3.43-1l-.42-.28a6.5,6.5,0,0,1,.75-10.95q.28-.15.57-.27a6.48,6.48,0,0,1,2.53-.51v-18a6.31,6.31,0,0,1-3.43-1l-.42-.28a6.5,6.5,0,0,1,.75-10.95q.28-.15.57-.27a6.48,6.48,0,0,1,2.53-.51v-18a6.31,6.31,0,0,1-3.43-1l-.42-.28a6.49,6.49,0,0,1-.29-10.25Z"/><path d="M65,153.67a12.5,12.5,0,1,0-12.5-12.5A12.51,12.51,0,0,0,65,153.67Zm-6-15a6.35,6.35,0,0,1,2.14-2.7l.42-.28a6.5,6.5,0,0,1,9.42,8q-.12.29-.27.57a6.51,6.51,0,0,1-8.25,2.89q-.29-.12-.57-.27a6.53,6.53,0,0,1-2.62-2.62q-.15-.28-.27-.57a6.52,6.52,0,0,1,0-5.06Z"/><path d="M65,61.33a12.5,12.5,0,1,0-12.5-12.5A12.51,12.51,0,0,0,65,61.33ZM60.87,43.82a6.52,6.52,0,0,1,1-.7q.28-.15.57-.27a6.52,6.52,0,1,1-.9,11.5l-.42-.28a6.49,6.49,0,0,1-.29-10.25Z"/><path d="M65,215.67a12.5,12.5,0,1,0-12.5-12.5A12.51,12.51,0,0,0,65,215.67Zm-6.5-12.5a6.57,6.57,0,0,1,0-.66,6.5,6.5,0,0,1,12.93,0,6.57,6.57,0,0,1,0,.66h0a6.5,6.5,0,0,1-13,0Z"/><path d="M65,92.33a12.5,12.5,0,1,0-12.5-12.5A12.51,12.51,0,0,0,65,92.33ZM60.87,74.82a6.52,6.52,0,0,1,1-.7q.28-.15.57-.27a6.52,6.52,0,1,1-.9,11.5l-.42-.28a6.49,6.49,0,0,1-.29-10.25Z"/><path d="M65,123.33a12.5,12.5,0,1,0-12.5-12.5A12.51,12.51,0,0,0,65,123.33Zm-4.13-17.52a6.52,6.52,0,0,1,1-.7q.28-.15.57-.27a6.52,6.52,0,1,1-.9,11.5l-.42-.28a6.49,6.49,0,0,1-.29-10.25Z"/><path d="M65,184.67a12.5,12.5,0,1,0-12.5-12.5A12.51,12.51,0,0,0,65,184.67Zm-6.5-12.5a6.57,6.57,0,0,1,0-.66,6.5,6.5,0,0,1,12.93,0,6.57,6.57,0,0,1,0,.66h0a6.5,6.5,0,0,1-13,0Z"/><rect x="120" y="45.92" width="80" height="3"/><rect x="120" y="49.98" width="80" height="3"/><rect x="120" y="198.92" width="80" height="3"/><rect x="120" y="202.98" width="80" height="3"/><rect x="120" y="117.99" width="80" height="3"/><rect x="120" y="123" width="80" height="3"/><rect x="120" y="55.05" width="74" height="6"/><rect x="120" y="74.05" width="74" height="6"/><rect x="120" y="92.05" width="74" height="6"/><rect x="120" y="145" width="74" height="6"/><rect x="120" y="156.95" width="74" height="6"/><rect x="120" y="165.08" width="74" height="6"/><rect x="120" y="173.94" width="74" height="9"/><rect x="120" y="191.04" width="74" height="6"/><rect x="120" y="106.03" width="74" height="9"/><rect x="120" y="127.92" width="74" height="8"/><rect x="120" y="63.1" width="74" height="3"/><rect x="120" y="68.98" width="74" height="3"/><rect x="120" y="81.04" width="74" height="3"/><rect x="120" y="87.04" width="74" height="3"/><rect x="120" y="100.06" width="74" height="3"/><rect x="120" y="139.98" width="74" height="3"/><rect x="120" y="151.96" width="74" height="3"/><rect x="120" y="186" width="74" height="3"/></svg>');
*/


}

@property --a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

* {
    box-sizing: border-box;
}

/* =========================
   Local fonts (TTF)
   Folder: ./fonts/
   ========================= */

/* Anton */
@font-face {
  font-family: "Anton";
  src: url("./fonts/Anton-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Bebas Neue Cyrillic (name with spaces) */
@font-face {
  font-family: "Bebas Neue Cyrillic";
  src: url("./fonts/BebasNeueCyrillic-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bebas Neue Cyrillic";
  src: url("./fonts/BebasNeueCyrillic-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Liberation Sans */
@font-face {
  font-family: "Liberation Sans";
  src: url("./fonts/LiberationSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Liberation Sans";
  src: url("./fonts/LiberationSans-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Liberation Sans";
  src: url("./fonts/LiberationSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Liberation Sans";
  src: url("./fonts/LiberationSans-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Lucida Grande (name with spaces) */
@font-face {
  font-family: "Lucida Grande";
  src: url("./fonts/LucidaGrande.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lucida Grande";
  src: url("./fonts/LucidaGrande-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: "Liberation Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    /*background: #eaeaea;*/
    background: var(--panels-color);
}

/* Phone frame (for preview only) */
.main {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.screen {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    opacity: 0;
    pointer-events: none;
}

.screen.active {
    opacity: 1;
    pointer-events: all;
    display: flex;
}

.player-screen {
    background: #eaeaea;
    opacity: 0;
    pointer-events: none;
}

.player-screen.active {
    opacity: 1;
    pointer-events: all;
}

.categories-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--cp-closed-height);

    filter: drop-shadow(0px 1px 30px rgba(0, 0, 0, 0.10)) drop-shadow(0px 1px 0px #cecece);

    transition: all var(--panels-swap-time) ease-in;
}

.categories-panel.opened {
    height: var(--cp-height);
}

.categories-panel .panel-background {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    justify-items: stretch;
    align-items: end;
    padding: 0px 0px 2px 0px;

    opacity: 0;

    transition: opacity var(--panels-swap-time) ease-in;
}

.categories-panel .panel-background .left-bg {
    background: url('img/BG_002.png');

    background-size: cover;
    background-position: bottom left;
    background-repeat: no-repeat;
    width: 40%;
    height: 80%;
    opacity: 0.5;
}

.categories-panel .panel-background .center-bg {
    background: url('img/BG_004.png');

    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: calc(var(--padding-size) * 2 + var(--button-size));
    left: var(--padding-size);
    right: var(--padding-size);
    bottom: var(--tailH);
    opacity: 0.05;
}

.categories-panel .panel-background .right-bg {
    background: url('img/BG_003.png');

    background-size: cover;
    background-position: bottom left;
    background-repeat: no-repeat;
    width: 40%;
    height: 80%;
    opacity: 0.5;
}

.categories-panel.opened .panel-background {
    opacity: 1;
}

.player-panel {
    position: absolute;
    bottom: calc(-1 * var(--pp-height) + var(--button-size) + var(--padding-size) * 2);
    left: 0;
    right: 0;
    height: var(--pp-height);

    transition: all 0.5s ease-in;

    filter: drop-shadow(0px -1px 30px rgba(0, 0, 0, 0.10)) drop-shadow(0px -1px 0px #cecece);
}

.player-panel.opened {
    pointer-events: none;

    bottom: calc(-1 * var(--panels-gap));

    filter: drop-shadow(0px -1px var(--panels-gap) rgba(0, 0, 0, 0.10)) drop-shadow(0px -1px 0px #cecece);
}

.player-panel.opened .player-string {
    opacity: 0;

    transition: opacity calc(var(--panels-swap-time) * 0.5) ease-in 0s;
    /*transition: opacity calc(var(--panels-swap-time) * 0.5) ease-in calc(var(--panels-swap-time) * 0.0);*/
}

.player-panel.base {
    bottom: calc(-1 * var(--pp-height) + var(--padding-size) * 0.5);
}

.player-panel .panel-background {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    opacity: 0;

    transition: opacity calc(var(--panels-swap-time) * 1) ease-in 0s;
}

.player-panel.opened .panel-background {
    opacity: 1;
}

.player-panel .panel-background .top-background {
    background-image: url(img/BG_006.png);
    position: absolute;
    left: calc(var(--padding-size) * 0.2);
    right: calc(var(--padding-size) * 0.2);
    aspect-ratio: 1600 / 487;
    background-size: cover;
    opacity: 0.2;
}

.player-panel .panel-background .bottom-background {
    background-image: url(img/BG_007.png);
    position: absolute;
    bottom: calc(var(--padding-size) * 0.1);
    left: calc(var(--padding-size) * -0.1);
    right: calc(var(--padding-size) * -0.1);
    aspect-ratio: 1200 / 857;
    background-size: cover;
    opacity: 0.1;
}

.panel {
    /*--panel-mask: none;*/
}

.panel::before{
    content:"";
    position:absolute;
    left:0; 
    right:0;
    bottom:0;
    height: calc(100% + var(--tailH));
    background: var(--panels-color);

    /*
    -webkit-mask-image: var(--panel-mask);
    mask-image: var(--panel-mask);
    */

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: bottom;
    mask-position: bottom;

    pointer-events:none;
}

.categories-panel.panel::before{
    top: 0;
    bottom: auto;

    -webkit-mask-position: bottom;
    mask-position: bottom;

    -webkit-mask-image: var(--top-panel-mask);
    mask-image: var(--top-panel-mask);
}

.player-panel.panel::before{
    top:auto;
    bottom:0;

    -webkit-mask-position: top;
    mask-position: top;

    -webkit-mask-image: var(--bottom-panel-mask);
    mask-image: var(--bottom-panel-mask);
}

.player-panel::after {
    content: "";
    display: block;
    position: sticky;
    width: 100vw;
    /*top: 100%;*/
    height: calc(var(--button-size) + var(--padding-size) * 2);
    background-image: url(img/BG_005.png);
    background-size: 120%;
    background-repeat: no-repeat;
    background-position: center bottom;
    opacity: var(--bottom-bg-opacity);
    pointer-events: none;

    transition: all 0.5s ease-in;
}

.player-panel.opened::after {
    height: var(--pp-height);
    opacity: calc(var(--bottom-bg-opacity) * 0.5);
}

.player-panel.base::after {
    height: calc(var(--padding-size) * 0.5);
    opacity: calc(var(--bottom-bg-opacity) * 0.2);
}


.player-panel .tail-button {
    opacity: 1;
    pointer-events: all;

    transition: opacity calc(var(--panels-swap-time) * 0.25) ease-in calc(var(--panels-swap-time) * 0.75);
}

.player-panel .tail-button.top-button {
    top:0;
}

.player-panel .tail-button .icon {
    width: calc(var(--tailH) * 0.8);
    height: calc(var(--tailH) * 0.8);
    transform: translate(-50%, -90%);
}

.player-panel .tail-button .text {  
    /*top: calc(100% + var(--padding-size) * 0.5);*/
    top: calc(100% + 4px);
    font-size: calc(var(--base-font-size) * 1.0);
    white-space: nowrap;
    color: var(--pl-icon-text-color-002);

    transition: opacity calc(var(--panels-swap-time) * 0.25) ease-in calc(var(--panels-swap-time) * 0.25);
}

.player-panel.base .tail-button .text {
    opacity: 0;
}

.player-panel.closed .tail-button .text {
    opacity: 1;
}

.player-panel.opened .tail-button {
    opacity: 0;
    pointer-events: none;

    transition: opacity calc(var(--panels-swap-time) * 0.25) ease-in 0s
}

.player-panel.opened .tail-button .text {
    opacity: 1;
}




.top-menu {
    position: absolute;
    width: 100%;
    padding: var(--padding-size);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
}

.albums-carousel {
    position: absolute;
    top: calc((var(--padding-size) * 2 + var(--button-size)) * 0.5);
    left: var(--padding-size);
    right: var(--padding-size);
    bottom: var(--tailH);

    transform: translateY(-50%);

    transition: transform var(--panels-swap-time) ease-in;
}

.carousel-buttons-holder {
    position: absolute;
    top: 50%;

    left: calc(var(--button-size) + var(--carouseil-button-size) * 0.5);
    right: calc(var(--button-size) + var(--carouseil-button-size) * 0.5);

    transform: translate(0%, -50%);
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    transition: all calc(var(--panels-swap-time) * 0.5) ease-in 0s;

    /*z-index: 9999;*/
}

.albums-carousel .back-button,
.albums-carousel .front-button {
    width: calc(var(--carouseil-button-size) * 0.5);
    height: calc(var(--carouseil-button-size) * 0.5);

    padding: 0;
    border: none;

    background: var(--button-border-color-001);

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;

    filter: drop-shadow(0px 2px 0px var(--panels-color));

    transition: all var(--panels-swap-time) ease-in;

    /*z-index: 9999;*/
}

.albums-carousel .back-button:hover,
.albums-carousel .front-button:hover {
    background: var(--text-color-002) !important;
    cursor: pointer;
    transition: all 0.2s ease-in;
}

.albums-carousel .back-button {
    -webkit-mask-image: var(--icon-left);
            mask-image: var(--icon-left);
}

.albums-carousel .front-button {
    -webkit-mask-image: var(--icon-right);
            mask-image: var(--icon-right);
}

.albums-carousel .images-holder {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;

    opacity: 0;

    transition: opacity calc(var(--panels-swap-time) * 0.5) ease-in calc(var(--panels-swap-time) * 0.1);
}

.albums-carousel .images-holder span {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    height: var(--button-size);
    width: var(--button-size);

    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;

    transition: all calc(var(--panels-swap-time) * 0.5) ease-in;
}

.albums-carousel .names-holder {
    position: fixed;
    top: calc(var(--button-size) * 0.15);
    left: calc(var(--padding-size) + var(--button-size) + var(--carouseil-button-size));
    right: calc(var(--padding-size) + var(--button-size) + var(--carouseil-button-size));
    transform: translateY(-50%);
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-family: 'Bebas Neue Cyrillic';
    font-size: calc(var(--base-font-size) * 1.6);
    color: var(--text-color-002); 

    opacity: 1;

    transition: opacity calc(var(--panels-swap-time) * 0.5) ease-in var(--panels-swap-time);
}

.albums-carousel .names-holder .album-name {
    display: none;
}

.albums-carousel .names-holder .album-name.selected {
    display: block;
}

.categories-panel.opened .albums-carousel {
    transform: translateY(0%);
}

.categories-panel.opened .albums-carousel .back-button,
.categories-panel.opened .albums-carousel .front-button {
    background: var(--button-content-color);

    width: var(--carouseil-button-size);
    height: var(--carouseil-button-size);
}

.categories-panel.opened .albums-carousel .names-holder {
    opacity: 0;

    transition: opacity 0s ease-in 0s;
}

.categories-panel.opened .albums-carousel .images-holder {
    opacity: 1;

    transition: opacity calc(var(--panels-swap-time) * 0.6) ease-in calc(var(--panels-swap-time) * 0.4);
}

.categories-panel.opened .albums-carousel .images-holder span {
    height: calc(var(--cp-height) - ((var(--padding-size) * 2 + var(--button-size))) * 0.5 - var(--tailH));
    width:  calc(var(--cp-height) - ((var(--padding-size) * 2 + var(--button-size))) * 0.5 - var(--tailH));

    transition: all calc(var(--panels-swap-time) * 0.5) ease-in calc(var(--panels-swap-time) * 0.5);
}

.categories-panel.opened .albums-carousel .carousel-buttons-holder {
    left: 0;
    right: 0;

    transition: all calc(var(--panels-swap-time) * 0.5) ease-in calc(var(--panels-swap-time) * 0.5);
}

.categories-panel.closed .albums-carousel .images-holder span {
    transition: all calc(var(--panels-swap-time) * 0.5) ease-in !important;
}


.categories-panel .tail-button {
    opacity: 1;
    pointer-events: all;

    transition: opacity calc(var(--panels-swap-time) * 0.25) ease-in 0s;
}

.categories-panel .tail-button.bottom-button {
    bottom: 0;
}

.categories-panel .tail-button .icon {
    top: calc(var(--tailH) * 0.75);
}

.categories-panel .tail-button .text {  
    top: calc(var(--base-font-size) * -1.00);
    font-size: calc(var(--base-font-size) * 1.0);
    white-space: nowrap;
    color: var(--pl-icon-text-color-002);
}

.categories-panel.opened .tail-button {
    opacity: 0;
    pointer-events: none;
}

.categories-panel.closed .tail-button {
    opacity: 1;
    pointer-events: all;

    transition: opacity calc(var(--panels-swap-time) * 0.25) ease-in calc(var(--panels-swap-time) * 0.75);
}




.player-string {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    justify-items: stretch;
    align-items: end;
    gap: 12px;

    pointer-events: all;

    height: calc(var(--button-size) + var(--padding-size) * 2);
    padding: calc(var(--padding-size) * 1) var(--padding-size);

    opacity: 1;

    /*transition: opacity calc(var(--panels-swap-time) * 0.5) ease-in 0s;*/
    transition: opacity calc(var(--panels-swap-time) * 0.5) ease-in calc(var(--panels-swap-time) * 1.0);
}

.player-string .buttons {
    display: flex;
    flex-direction: row;
    align-items: end;
    gap: 6px;
}

.player-string .buttons .button {
    min-width: calc(var(--button-size) * 0.7);
    min-height: calc(var(--button-size) * 0.7);
    width: calc(var(--button-size) * 0.7);
    height: calc(var(--button-size) * 0.7);
}

.player-string .playing-string-holder {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex: 1;
    height: calc(var(--button-size) * 0.7);
    padding: 0px 0px 4px 0px;
}

.player-string .playing-name-string {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.player-string .playing-name-string .text-string-holder {
    position: relative;
    flex: 1;
    overflow: hidden;
}

.player-string .playing-name-string .playing-name-ltl {
    display: flex;
    align-items: end;
    position: absolute;
    left: 0;
    height: 100%;
    white-space: nowrap;
    font-size: var(--base-font-size);
}

.player-string .playing-name-string .playing-time-ltl {
    white-space: nowrap;
    font-family: 'Anton';
    color: #d3d3d3;
    letter-spacing: 1px;
    font-size: calc(var(--base-font-size) * 1.0);
    line-height: 95%;
}

.player-string .playing-string-ltl {
    display: block;
    background: var(--button-border-color-001);
    border-radius: 2px;
    width: 100%;
    height: 2px;
    position: relative;
}

.player-string .playing-string-ltl .playing-string-inner {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--accent-color);

    width: var(--current-playing-percent);
}




.main-player {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: calc(var(--padding-size) + var(--tailH)) var(--padding-size);
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    pointer-events: none;
}

.player-panel.opened .main-player {
    opacity: 1;

    pointer-events: all;
}

.composition-header {
    font-family: 'Bebas Neue Cyrillic';
    font-weight: bold;
    color: var(--text-color-003);

    transform: translateY(var(--player-elements-translate-distance));

    opacity: 0;

    transition: opacity calc(var(--panels-swap-time) * 0.5) ease-in  calc(var(--panels-swap-time) * 0.0),
                transform calc(var(--panels-swap-time) * 0) ease-in  calc(var(--panels-swap-time) * 1);
}

.player-panel.opened .composition-header {
    transform: translateY(0);

    opacity: 1;

    transition: opacity calc(var(--panels-swap-time) * 1) ease-in  calc(var(--panels-swap-time) * 0.1),
                transform calc(var(--panels-swap-time) * 1) ease-in  calc(var(--panels-swap-time) * 0.1);
}

.composition-header .text {

}

.wave-display-holder {
    flex: 1.5;
    align-self: stretch;
    position: relative;

    /*background: url(img/wave_bg_001.png);*/
    /*background-blend-mode: multiply;*/

    pointer-events: none;

    opacity: 0;

    transition: opacity calc(var(--panels-swap-time) * 0.5) ease-in  calc(var(--panels-swap-time) * 0.0);
}

.player-panel .wave-display-holder .to-favorite-button {
    transform: translate(-50%, calc(var(--player-elements-translate-distance) * 1.2));

    transition: transform calc(var(--panels-swap-time) * 0) ease-in  calc(var(--panels-swap-time) * 1);
}

.player-panel.opened .wave-display-holder {
    opacity: 1;

    transition: opacity calc(var(--panels-swap-time) * 2) ease-in  calc(var(--panels-swap-time) * 0.5);
}

.player-panel.opened .wave-display-holder .to-favorite-button {
    pointer-events: all;

    outline: 2px solid rgb(139, 139, 139, 0.2);
    outline-offset: 2px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: transform calc(var(--panels-swap-time) * 1) ease-in calc(var(--panels-swap-time) * 0.5);
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.9) 90%, rgba(255, 255, 255, 1) 100%), 
                linear-gradient(180deg, rgba(185, 185, 185, 0.5) 0%, rgba(219, 219, 219, 0.5) 40%, rgba(231, 231, 231, 0.5) 60%, rgba(255, 255, 255, 0.6) 100%);
}

.player-panel.opened .wave-display-holder .to-favorite-button::before {
    opacity: 1;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    background: linear-gradient(180deg, rgba(250, 250, 250, 1) 0%, rgb(235 235 235) 100%);
    border: 2px solid rgba(255, 255, 255, 0.6);
    outline: 2px solid rgba(255, 255, 255, 0.4);
    outline-offset: 0px;
    box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5) inset;
}

.player-panel.opened .wave-display-holder .to-favorite-button::after {
    content: '';
    display: block;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
    opacity: 1;
    border: none;
    transition: none;
    box-shadow: none;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-image: var(--button-mask-001);
    mask-image: var(--button-mask-001);
}

.player-panel.opened .wave-display-holder .to-favorite-button.active {
    border: 2px solid var(--accent-color-80);
    outline: 2px solid var(--accent-color-40);
}

.wave-display {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    /*
    background: url(img/wave_bg_003.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: hue-rotate(var(--wave-color-hue)) saturate(1) brightness(1.1);
    */

    transform: scale(1.4, 1.4);

    transition: transform calc(var(--panels-swap-time) * 1.2) ease-in-out  calc(var(--panels-swap-time) * 0.8);
}

.wave-display .wave-display-bg {
    position: absolute;

    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    background: url(img/wave_bg_003.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: hue-rotate(var(--wave-color-hue)) saturate(1) brightness(1.1);
}

.wave-display .wave-canvas {
  width: 100%; 
  height: 100%; 
  display: block;

  /* Маска прозрачности (black = видно, transparent = скрыто) */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black var(--wave-fade-edge),
    black calc(100% - var(--wave-fade-edge)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black var(--wave-fade-edge),
    black calc(100% - var(--wave-fade-edge)),
    transparent 100%
  );

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;


  background: url(img/wave_002.png);
  background-size: contain;
  background-repeat: no-repeat;
}

.player-panel.opened .wave-display {
    transform: scale(1.0, 1.0);
}

.wave-display-holder .to-favorite-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--button-size);
    height: var(--button-size);
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(250, 250, 250, 0.5) 0%, rgba(240, 240, 240, 0.1) 100%);
}

.wave-display-holder .to-favorite-button::after {
    display: none;
}

.wave-display-holder .to-favorite-button .icon {
    /*background: var(--bg);*/
    /*background: var(--accent-color);*/
    background: var(--button-content-color);
}

.wave-display-holder .to-favorite-button .icon::before {
    content: "";
    background: var(--button-content-color);
    -webkit-mask-image: var(--icon-heart-002);
    mask-image: var(--icon-heart-002);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.wave-display-holder .to-favorite-button .icon::after {
    content: "";
    background: var(--button-content-color);
    -webkit-mask-image: var(--icon-heart-003);
    mask-image: var(--icon-heart-003);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.wave-display-holder .to-favorite-button.active .icon {
    background: var(--accent-color);
}

.player-elements {
    flex: 1;
    align-self: stretch;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: calc(var(--padding-size) * 1.0) calc(var(--padding-size) * 1.6);
    gap: calc(var(--base-gap-size) * 2);
}

.player-string-holder {
    display: flex;
    flex-direction: row;
    gap: var(--base-gap-size);
}

.current-time {
    font-family: 'Bebas Neue Cyrillic';
    font-weight: bold;
    color: var(--text-color-004);
}

.end-time {
    font-family: 'Bebas Neue Cyrillic';
    font-weight: bold;
    color: var(--text-color-004);
}

.playing-string {
    flex: 1;
    display: flex;
    align-items: center;
}

.stripe {
    position: relative;
    background: var(--button-border-color-001);
    height: 4px;
    width: 100%;
    border-radius: 2px;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.75) inset;
}

.stripe .stripe-inner {
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 1px;
    background: var(--accent-color);

    width: var(--current-playing-percent);
}

.player-controls {
    flex: 1;
    display: flex;
    flex-direction: row;
    /* justify-content: center; */
    align-items: center;
    padding: 0 var(--padding-size);
}

.player-controls .buttons {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: self-start;
    gap: var(--base-gap-size);
}

.btn-bwd {

}

.play-pause-button-big {
    margin-top: calc(var(--base-gap-size) * 1.5);
}

.play-pause-button-big .center {
    background: var(--bg);
    position: absolute;
    left: 10%;
    right: 10%;
    top: 10%;
    bottom: 10%;
    border-radius: 50%;
    border: 2px solid var(--button-content-color);
    outline: 3px solid var(--button-border-color-001);
    outline-offset: -5px;
}

.play-pause-button-big .center::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 52%;

    width: 35%;
    height: 35%;

    transform: translate(-50%, -50%);

    /*background: var(--button-content-color);*/
    background: var(--accent-color);

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

.play-pause-button-big .center::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 52%;

    width: 35%;
    height: 35%;

    transform: translate(-50%, -50%);

    background: var(--button-content-color);

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

.play-pause-button-big.play .center::before {
    -webkit-mask-image: var(--icon-play-001);
    mask-image: var(--icon-play-001);
}

.play-pause-button-big.play .center::after {
    -webkit-mask-image: var(--icon-play-002);
    mask-image: var(--icon-play-002);
}

.play-pause-button-big.pause .center::before {
    -webkit-mask-image: var(--icon-pause-001);
    mask-image: var(--icon-pause-001);
}

.play-pause-button-big.pause .center::after {
    opacity: 0;
}

.play-pause-button-big.stop .center::before {
    -webkit-mask-image: var(--icon-stop-001);
    mask-image: var(--icon-stop-001);
}

.play-pause-button-big.stop .center::after {
    -webkit-mask-image: var(--icon-stop-002);
    mask-image: var(--icon-stop-002);
}

.play-pause-button-big.active {
    color: var(--text-color-001) !important;
}

.play-pause-button-big.active::before {
    
}

.play-pause-button-big.active::after {
    border: 2px solid var(--accent-color) !important;
    box-shadow: 0px 0px 6px var(--accent-color-40), 0px 0px 6px var(--accent-color-40) inset !important;

    opacity: 0 !important;
}

.play-pause-button-big.active .center {
    outline: 3px solid var(--accent-color-80);
    outline-offset: -4px;
}

.play-pause-button-big.active .center::before {
    /*background: var(--accent-color);*/
    background: var(--button-content-color);
}

.play-pause-button-big.active .center::after {
}

.btn-fwd {

}








.playlist-panel {
    position: absolute;
    flex: 1;
    left: 0;
    right: 0;
    /*top: 0;*/
    /*bottom: 0;*/

    top: calc(var(--cp-height) - 0vh);
    bottom: calc((var(--button-size) + var(--padding-size) * 2) - 0vh);

    padding: clamp(var(--tailH), calc(var(--tailH)  + var(--player-elements-translate-distance)), calc(var(--tailH) + var(--pl-padding-size))) var(--pl-padding-size);
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
    max-height: 100%;

    opacity: 1;

    transition: all var(--panels-swap-time) ease-in,
                opacity calc(var(--panels-swap-time) * 0.2) ease-in;
}

.playlist-panel.cpclosed {
    top: var(--cp-closed-height);
    padding-top: clamp(calc(var(--tailH) * 1), calc(var(--tailH) * var(--pl-fs-k) + var(--player-elements-translate-distance) * 2), calc(var(--tailH) * var(--pl-fs-k)));
}

.playlist-panel.cpopened {
    top: calc(var(--cp-height) - 0vh);
    padding-top: clamp(var(--tailH), calc(var(--tailH) + var(--player-elements-translate-distance)), calc(var(--tailH) + var(--pl-padding-size)));
}

.playlist-panel.ppclosed {
    bottom: calc((var(--button-size) + var(--padding-size) * 2) - 0vh);
    padding-bottom: calc(var(--tailH) + var(--pl-padding-size));
}

.playlist-panel.ppopened {
    bottom: calc(var(--pp-height) - var(--panels-gap));
    padding-bottom: var(--tailH);
}

.playlist-panel.ppbased {
    bottom: calc(var(--padding-size) * 0.5);
}

.playlist-panel.cpopened.ppopened {
    top: calc(var(--cp-height) - 1px);
    bottom: calc(var(--pp-height) - var(--panels-gap));
    padding: calc(var(--panels-gap) * 1) var(--pl-padding-size);
    max-height: 0;
}

.playlist-panel.cpclosed.ppclosed {
    padding-top: clamp(calc(var(--tailH) * 2), calc(var(--tailH) * var(--pl-fs-k) + var(--player-elements-translate-distance) * 2), calc(var(--tailH) * var(--pl-fs-k) + var(--pl-padding-size)));
    padding-bottom: clamp(calc(var(--tailH) * 1), calc(var(--tailH) * var(--pl-fs-k) + var(--player-elements-translate-distance) * 2), calc(var(--tailH) * var(--pl-fs-k) + var(--padding-size) * 2));

    bottom: calc(var(--button-size) + var(--padding-size) * 2);
}

.playlist-panel.cpclosed.ppbased {
    padding-top: clamp(calc(var(--tailH) * 2), calc(var(--tailH) * var(--pl-fs-k) + var(--player-elements-translate-distance) * 2), calc(var(--tailH) * var(--pl-fs-k) + var(--pl-padding-size)));
    padding-bottom: clamp(calc(var(--tailH) * 1), calc(var(--tailH) * var(--pl-fs-k) + var(--player-elements-translate-distance) * 2), calc(var(--tailH) * var(--pl-fs-k) + var(--padding-size) * 2));

    bottom: calc(var(--padding-size) * 0.5);
}


.playlist-panel:before,
.playlist-panel:after {
    content: "";
    position: absolute;
    left: 50%;
    width: calc(100% * 1.0);
    transform: translateX(-50%);
    aspect-ratio: 16 / 5;
    background-size: contain;
    opacity: 0.2;

    transition: all var(--panels-swap-time) ease-in;
}

.playlist-panel:before {
    background-image: url(img/BG_009.png);
    top:    clamp(calc(var(--tailH) * 2), calc(var(--tailH) * 0.8 + var(--player-elements-translate-distance) * 2), calc(var(--tailH) * 0.8 + var(--pl-padding-size)));
    transform: translate(-50%, -100%);
    width: calc(100% * 1.2);
}

.playlist-panel:after {
    background-image: url(img/BG_008.png);
    bottom: clamp(calc(var(--tailH) * 2), calc(var(--tailH) * 0.8 + var(--player-elements-translate-distance) * 2), calc(var(--tailH) * 0.8 + var(--pl-padding-size)));
    transform: translate(-50%, 100%);
    width: calc(100% * 1.1);
}

.playlist-panel.cpclosed:before {
    top: calc(var(--tailH) * 1.4);
}

.playlist-panel.cpopened:before {
    top:    clamp(calc(var(--tailH) * 2), calc(var(--tailH) * 0.8 + var(--player-elements-translate-distance) * 2), calc(var(--tailH) * 0.8 + var(--pl-padding-size)));
}

.playlist-panel.ppclosed:after {
    bottom: clamp(calc(var(--tailH) * 2), calc(var(--tailH) + var(--player-elements-translate-distance) * 2), calc(var(--tailH) + var(--pl-padding-size)));
}

.playlist-panel.ppopened:after {
    bottom: calc(var(--tailH) * 1.0);
}

.playlist-panel.cpopened.ppopened:before {
    top:    calc(var(--tailH) * -0.5);
}

.playlist-panel.cpopened.ppopened:after {
    bottom: calc(var(--tailH) * -0.8);
}

.playlist-panel.cpclosed.ppclosed:before {
    top:    clamp(calc(var(--tailH) * 2), calc(var(--tailH) + var(--player-elements-translate-distance) * 2), calc(var(--tailH) + var(--pl-padding-size)));
}

.playlist-panel.cpclosed.ppclosed:after {
    bottom: clamp(calc(var(--tailH) * 2), calc(var(--tailH) + var(--player-elements-translate-distance) * 2), calc(var(--tailH) + var(--pl-padding-size)));
}

.playlist-panel.cpclosed.ppbased:before {
    top:    clamp(calc(var(--tailH) * 2), calc(var(--tailH) + var(--player-elements-translate-distance) * 2), calc(var(--tailH) + var(--pl-padding-size)));
}

.playlist-panel.cpclosed.ppbased:after {
    bottom: clamp(calc(var(--tailH) * 2), calc(var(--tailH) + var(--player-elements-translate-distance) * 2), calc(var(--tailH) + var(--pl-padding-size)));
}

.playlist-holder {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
    position: relative;
    flex: 1;
    border-top: 1px solid var(--button-border-color-001);
    border-bottom: 1px solid var(--button-border-color-001);

    max-height: 100%;

    transition: all var(--panels-swap-time) ease-in-out;
}

.playlist-panel.closed .playlist-holder {
    max-height: 0;
}

.playlist-holder:before,
.playlist-holder:after {
    content: "";
    position: absolute;
    width: calc(var(--tailW) * 0.5);
    height: 2px;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    background: var(--button-border-color-001);
}

.playlist-holder:before {
    top: -2px;
}

.playlist-holder:after {
    bottom: -2px;
}

.playlist {
    display: none;
    /*display: flex;*/
    opacity: 0;
    pointer-events: none;

    flex: 1;
    position: relative;
    flex-direction: row;

    overflow: hidden;

    max-height: 100%;
    padding: calc(var(--padding-size) * 0.5) 2px;

    transition: all var(--panels-swap-time) ease-in-out;
}

.playlist.active {
    display: flex;
    opacity: 1;
    pointer-events: all;
}

.playlist-panel.cpopened.ppopened .playlist {
    max-height: 0;
    padding: 0 2px;
    opacity: 0;
}

.playlist-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--base-gap-size);

    overflow: auto;
    -webkit-overflow-scrolling: touch; /* iOS inertia */
    scrollbar-width: none;             /* Firefox hide */
}

.playlist-inner::-webkit-scrollbar { 
    width: 0; 
    height: 0; 
}

.playlist-element {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    width: 100%;
    flex-shrink: 1;
}

.playlist-element:after {
    content: '';
    position: absolute;

    bottom: calc((var(--base-gap-size) + 1px) * -0.5);
    left: 50%;
    width: 100%;
    height: 1px;
    transform: translateX(-50%);

    background: var(--button-border-color-001);
    opacity: 0.5;
}

.playlist-element:last-child:after {
    display: none;
}

.playlist-favorite {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 100%;
    aspect-ratio: 1 / 1;
    border: none;
    background: transparent;
    padding: 0;
}

.playlist-favorite::before {
    content: "";
    display: block;
    position: absolute;
    width: 90%;
    height: 90%;

    /*background: var(--button-border-color-001);*/
    background: var(--text-color-004);

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: 100%;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-image: var(--icon-heart-001);
    mask-image: var(--icon-heart-001);
}

.playlist-favorite::after {
    content: "";
    display: block;
    position: absolute;
    width: calc(90% + 1px);
    height: calc(90% + 1px);

    /*background: var(--button-border-color-002);*/
    background: var(--text-color-006);

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: 100%;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-image: var(--icon-heart-003);
    mask-image: var(--icon-heart-003);
}

.playlist-favorite.active::before {
    /*background: var(--accent-color);*/
    background: var(--text-color-006);
}

.playlist-favorite.active::after {
  
}

.playlist-element-name {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.count-name-string {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 6px;
    width: 100%;
}

.count-name-string .count {
    font-size: var(--base-font-size);

    color: var(--text-color-006);
}

.count-name-string .text-string-holder {
    position: relative;
    flex: 1;
    overflow: hidden;

    color: var(--text-color-006);
}

.count-name-string .name {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    font-size: var(--base-font-size);
    white-space: nowrap;
}

.information-string {
    white-space: nowrap;
    font-size: var(--base-font-size);
    color: var(--text-color-009);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: stretch;
    justify-items: stretch;
    gap: 4px;
}

.information-string .icon {
    display: block;
    position: static;
    width: var(--base-font-size);
    height: var(--base-font-size);
    /* aspect-ratio: 1 / 1; */
    transform: none !important;

    background: var(--text-color-004);
}

.information-string .info-text {
    color: var(--text-color-004);
}

.playlist-element-time {
    font-size: calc(var(--base-font-size) * 1.1);
    display: flex;
    align-items: center;

    color: var(--text-color-006);
}

.playlist-element-play-button {
    position: relative;
    height: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    padding: 0;

    border: 1px solid var(--pl-play-btn-bdr-unactive);
    background: var(--pl-play-btn-bg-unactive);
}

.playlist-element-play-button .icon {
    opacity: 0.25;
}

.playlist-element-play-button .icon.play {
    width: 50%;
    height: 50%;
    transform: translate(-45%, -50%);
    background: var(--pl-play-btn-icon-active-bg);
}

.playlist-element-play-button .icon.play:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--pl-play-btn-icon-active-bdr);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-image: var(--icon-play-002);
    mask-image: var(--icon-play-002);
}

.playlist-element-play-button .icon.stop {
    width: 50%;
    height: 50%;
    background: var(--pl-play-btn-icon-active-bg);
}

.playlist-element-play-button .icon.stop:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--pl-play-btn-icon-active-bdr);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-image: var(--icon-stop-002);
    mask-image: var(--icon-stop-002);
}

.load-percent-circle,
.play-percent-circle {
    position: absolute;
    left:   -1px;
    top:    -1px;
    right:  -1px;
    bottom: -1px;
    background-size: 100%;
    border-radius: 50%;
    border-color: transparent;

    display: none;
}

.load-percent-circle {
    background: conic-gradient(
      from 0deg,
      var(--pl-play-btn-load-percents-bdr) 0deg,
      var(--pl-play-btn-load-percents-bdr) 60%,
      transparent 60%,
      transparent 360deg
    )
}

.play-percent-circle {
    background: conic-gradient(
      from 0deg,
      var(--pl-play-btn-play-percents-bdr) 0deg,
      var(--pl-play-btn-play-percents-bdr) 0%,
      transparent 0%,
      transparent 360deg
    )
}

.playlist-element-play-button .play-inner-bg-circle {
    position: absolute;
    left: 1px;
    top: 1px;
    right: 1px;
    bottom: 1px;
    border-radius: 50%;
    border-color: transparent;  

    background: var(--pl-play-btn-bg-unactive);
}


.playlist-scroll {
    min-width: 10px;
    position: relative;
}

.playlist-scroll-bar {
    position: absolute;
    top: 0;
    left: 4px;
    right: 0;
    bottom: 0;
    background: var(--button-border-color-001);
    border-radius: 3px;
}

.playlist-scroll-bar .thumb {
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    height: calc((100% - 2px) * 0.5);
    background: var(--button-content-color);
    border-radius: 2px;
}


.playlist-panel .tail-button {

}

.playlist-panel .tail-button.top-button {
    top: 0;
    left: calc(50% - var(--tailW) * 0.4 * 0.5);
}

.playlist-panel .tail-button.top-button .icon {
}

.playlist-panel .tail-button.top-button .text {
    opacity: 1;
    transition: opacity calc(var(--panels-swap-time) * 0.5) ease-in calc(var(--panels-swap-time) * 0.5);
}

.playlist-panel .tail-button.bottom-button {
    bottom: 0;
    left: calc(50% - var(--tailW) * 0.4 * 0.5);
}

.playlist-panel .tail-button.bottom-button .icon {
    top: calc(var(--tailH) * 0.8);
}

.playlist-panel .tail-button.bottom-button .text {
    top: calc(var(--base-font-size) * -1.2);

    opacity: 1;
    transition: opacity calc(var(--panels-swap-time) * 0.5) ease-in calc(var(--panels-swap-time) * 0.5);
}

.playlist-panel.cpopened.ppopened .tail-button.top-button .text {
    opacity: 0;
}


.playlist-panel.cpopened.ppopened .tail-button.bottom-button .text {
    opacity: 0;
}




.playlist-element.opened {

}

.playlist-element.opened .playlist-favorite.active::before {
    background: var(--accent-color);
}

.playlist-element.opened .playlist-favorite.active::after {
    background: var(--button-border-color-002);
}

.playlist-element.opened .count-name-string .count {
    color: var(--text-color-003);
}

.playlist-element.opened.done .count-name-string .count {
    color: var(--text-color-green);
}

.playlist-element.opened .count-name-string .text-string-holder {
    color: var(--text-color-003);
}

.playlist-element.opened.active .count-name-string .text-string-holder {
    color: var(--accent-dark);
}

.playlist-element.opened.playing .count-name-string .text-string-holder {
    color: var(--text-color-green);
}

.playlist-element.opened .information-string .icon {
    background: var(--text-color-006);
}

.playlist-element.opened.instruction .information-string .icon {
    background: var(--accent-color);
}

.playlist-element.opened .information-string .info-text {
    color: var(--text-color-006);
}

.playlist-element.opened.instruction .information-string .info-text {
    color: var(--text-color-green);
}

.playlist-element.opened .playlist-element-time {
    color: var(--text-color-003);
}

.playlist-element.opened.playing .playlist-element-time {
    color: var(--text-color-001);
}

.playlist-element.opened .playlist-element-play-button {
    border: 1px solid var(--pl-play-btn-bdr);
    background: var(--pl-play-btn-bg);
}

.playlist-element.opened .load-percent-circle, 
.playlist-element.opened .play-percent-circle {
    display: block;
}

.playlist-element.opened.playing .play-percent-circle {
    background: conic-gradient(
      from 0deg,
      var(--pl-play-btn-play-active-bdr) 0deg,
      var(--pl-play-btn-play-active-bdr) 0%,
      transparent 0%,
      transparent 360deg
    )
}


.playlist-element.opened .playlist-element-play-button .play-inner-bg-circle {
    background: var(--pl-play-btn-bg);
}

.playlist-element.opened .playlist-element-play-button .icon {
    opacity: 1;
}

.playlist-element.opened.active .playlist-element-play-button .icon.play {
    background: var(--accent-color-50);
}

.playlist-element.opened.active .playlist-element-play-button .icon.play:before {
    
}







/* Login */
.login-screens {
    display: none;

    z-index: 2;
    flex-direction: row;

    pointer-events: none;
}

.login-screens::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0px 0px var(--base-gap-size) inset rgba(255, 255, 255, 0.9);

    pointer-events: none;
}

.login-screens::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background: url(img/BG_010.png);
    background-size: cover;
    background-position: 60% 50%;
}

.login-screen {
    flex: 1;
    display: flex;
    flex-direction: column;

    padding: calc(var(--padding-size) * 2) calc(var(--padding-size) * 3);
    align-items: stretch;
    gap: calc(var(--base-gap-size) * 0.2);
}

.register-screen {
    flex: 1;
    display: flex;
    flex-direction: column;

    padding: calc(var(--padding-size) * 2) calc(var(--padding-size) * 1);
    align-items: stretch;
    gap: calc(var(--base-gap-size) * 0.2);
}

.enter-email-screen {
    flex: 1;
    display: flex;
    flex-direction: column;

    padding: calc(var(--padding-size) * 2) calc(var(--padding-size) * 1);
    align-items: stretch;
    gap: calc(var(--base-gap-size) * 0.2);
}

.new-password-screen {
    flex: 1;
    display: flex;
    flex-direction: column;

    padding: calc(var(--padding-size) * 2) calc(var(--padding-size) * 1);
    align-items: stretch;
    gap: calc(var(--base-gap-size) * 0.2);
}

.inner-screen {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    transform: translateX(0%);

    transition: transform var(--panels-swap-time) ease-in-out;
}

.inner-screen.left {
    transform: translateX(-100%);
}

.inner-screen.right {
    transform: translateX(100%);
}

.inner-screen .screen-header {
    position: relative;
    color: var(--text-color-005);
    font-family: 'Bebas Neue Cyrillic';
    font-weight: bold;
    font-size: calc(var(--base-font-size) * 3);
    align-self: stretch;
    margin-bottom: var(--padding-size);
}

.inner-screen .screen-header:after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(var(--padding-size) * -0.5);
    width: 60%;
    height: 1px;
    transform: translateX(-50%);
    background: var(--button-border-color-001);
}

.inner-screen .screen-header .button {
    position: absolute;
    left: 0;
    top: 0;
    min-width: auto;
    min-height: auto;
    height: 100%;
    aspect-ratio: 1 / 1;
}

.inner-screen .screen-header > span {
    display: block;
    padding-left: var(--button-size);
    padding-right: var(--button-size);
    text-align: center;
}

.inner-screen .block {

}

.inner-screen .form {
    display: flex;
    flex-direction: row;
    padding: 0 calc(var(--padding-size) * 0.5);
}

.inner-screen .form .form-titles {
    display: flex;
    flex-direction: column;
    min-width: 20vw;
}

.inner-screen .form .form-title {
    padding: 6px 6px;
    min-width: var(--input-size);
    min-height: calc(var(--input-size) + 6px * 2);
    display: flex;
    flex-direction: row;
    align-items: center;
    color: var(--text-color-007);
}

.inner-screen .form .form-inputs {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
}

.inner-screen .form .form-input {
    padding: 6px 6px;
    flex: 1;
}

.inner-screen .form .form-input .input {
    text-align: center;
}

.inner-screen .form .form-input .input.error {
    outline: 4px solid var(--accent-color-70);
    outline-offset: -1px;
}

.inner-screen .space {
    min-height: calc(var(--base-gap-size) * 2);
}

.inner-screen .hr {
    position: relative;
    min-height: calc(var(--base-gap-size) * 2);
}

.inner-screen .hr:after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(var(--padding-size) * 0.5);
    width: 60%;
    height: 1px;
    transform: translateX(-50%);
    background: var(--button-border-color-001);
}

.login-screen .app-name {
    z-index: 2;
    color: var(--text-color-005);
    font-family: 'Bebas Neue Cyrillic';
    font-weight: bold;
    font-size: calc(var(--base-font-size) * 3);
    align-self: center;
}

.login-screen .app-version {
    z-index: 2;
    color: var(--text-color-006);
    font-family: 'Lucida Grande';
    font-size: calc(var(--base-font-size) * 1);
    align-self: center;
}

.login-screen .app-logo {
    z-index: 2;
    flex: 1;

    position: relative;
}

.login-screen .app-logo:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    height: 90%;
    transform: translate(-50%, -50%);

    background: url(img/logo_icon_001.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;

    /*aspect-ratio: 1 / 1;*/
}

.login-screen .login-form {
    z-index: 2;
    flex: 1.5;
    display: flex;
    flex-direction: column;
    gap: var(--base-gap-size);
}

.login-screen .login-form .input {
    text-align: center;
}

.filler {
    flex: 1;
}

.errors-holder {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: calc(var(--base-gap-size) * 0.5);
    padding: calc(var(--padding-size) * 0.5) calc(var(--padding-size) * 1.0);
    color: var(--accent-color);
    font-size: var(--base-font-size);
}

.errors-holder .error {
    position: relative;
    padding-left: calc(var(--base-gap-size) * 2);
}

.errors-holder .error::before {
    content: '●';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}

.login-form .button {
    color: var(--text-color-005);
}

.email-verify-form {
    position: relative;
    border-radius: var(--input-size);
    flex: 1;
}

.email-verify-form.attention {
    outline: 2px dashed var(--accent-color-70);
    outline-offset: 2px;
}

.email-verify-form.error {
    outline: 2px solid var(--accent-color);
}

.email-verify-form.success {
    outline: 2px solid var(--green-color);
}

.email-verify-form .check-txt,
.email-verify-form .send-txt,
.email-verify-form .resend-txt,
.email-verify-form .done-txt {
    display: none;
}

.email-verify-form.check .check-txt {
    position: relative;
    display: inline-block;
}

.email-verify-form.send .send-txt {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.email-verify-form.resend .resend-txt {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--base-gap-size);
}

.email-verify-form.resend .resend-txt .spinner {
    position: relative;
    min-height: calc(var(--base-font-size) * 2.4);
    aspect-ratio: 1 / 1;
    text-transform: none;
    display: none;
    justify-items: center;
    justify-content: center;
    align-items: center;
    padding: calc(var(--base-font-size) * 0.3);
    font-size: calc(var(--base-font-size) * 1.2);
}

.email-verify-form.resend .resend-txt .spinner.active {
    display: flex;
}

.email-verify-form.resend .resend-txt .spinner::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 50%;
    background: conic-gradient(transparent 0%, var(--accent-color) 40%, transparent 41%);
    -webkit-mask: radial-gradient(circle, transparent 60%, black 61%);
    mask: radial-gradient(circle, transparent 60%, black 61%);
    transform: rotateZ(0deg);

    animation: rotate-clockwise 1s linear infinite;
}

@keyframes rotate-clockwise {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


.email-verify-form.resend .resend-txt .text {
  
}


.email-verify-form.done .done-txt {
    position: relative;
    display: inline-block;
}

.email-verify-form .input {
    width: 100%;
    text-align: center;
}

.email-verify-form .button {
    position: absolute;
    right: 2px;
    /*left: 2px;*/
    width: calc(100% - 4px);
    top: 2px;
    bottom: 2px;
    min-height: calc(var(--input-size) - 4px);
    border-radius: calc(var(--input-size) - 4px);
    font-size: calc(var(--base-font-size) * 1.4);

    transition: all 0.25s ease-in;
}

.email-verify-form .button::after {
    border-radius: calc(var(--input-size) - 4px);
}

.email-verify-form.send .button {
    /*left: auto;*/
    width: calc(var(--input-size) - 4px);
    min-width: calc(var(--input-size) - 4px);
}

.new-pwd-block {
    display: none;

    flex-direction: column;
    align-items: stretch;
    gap: calc(var(--base-gap-size) * 0.2);
}

.new-pwd-block.active {
    display: flex;
}





/* Loading */
.loading-screen {
    display: none;

    align-items: center;
    justify-content: center;
    background-color: var(--panels-color);
    z-index: 999;

    pointer-events: none;
}

.loading-screen::after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0px 0px var(--base-gap-size) inset rgba(255, 255, 255, 0.9);
}

.loading-screen.active {
    display: flex;

    pointer-events: all;
}

.loading-screen:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background: url(img/BG_010.png);
    background-size: cover;
    background-position: 60% 50%;
}

.loading-screen .center {
    z-index: 3;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--base-gap-size) * 2);
}

.loading-screen .center:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100vw, 100vh);
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);

    background: url(img/BG_011.png);
    background-size: cover;
    background-position: 50% 50%;
    opacity: 0.7;

    animation: spin-clockwise 60s linear infinite;
}

@keyframes spin-clockwise {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.loading-screen .logo-holder {
    z-index: 3;
}

.loading-screen .logo-holder .logo {
    background: url(img/logo_icon_001.png);
    width: min(30vh, 30vh);
    aspect-ratio: 1 / 1;
    background-size: contain;
}

.loading-screen .loading-holder {
    display: flex;
    flex-direction: column;
    gap: var(--base-gap-size);
    justify-items: center;
    align-items: center;
}

.loading-holder .loading-main-text {
    font-family: 'Bebas Neue Cyrillic';
    font-weight: bold;
    color: var(--text-color-002);

    display: none;
}

.loading-screen.show-main-text .loading-holder .loading-main-text {
    display: block;
}

.loading-holder .loading-stripe {
    position: relative;
    align-self: stretch;
    margin: 0 calc(var(--padding-size) * 2);
    min-height: calc(var(--input-size) * 0.4);
    background: var(--input-bg-color);
    box-shadow: var(--input-box-shadow);
    outline: 2px solid var(--button-outline-color);
    border: 2px solid var(--input-border-color);
    border-radius: calc(var(--input-size) * 0.2);
}

.loading-holder .loading-stripe .stripe {
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    height: calc(100% - 2px);
    background: var(--accent-color);
    border-radius: inherit;
}

.loading-holder .loading-stripe .loading-percents {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 4;
    font-size: calc(var(--base-font-size) * 0.8);
    font-weight: bold;
    color: var(--text-color-001);

    display: none;
}

.loading-screen.show-percent-text .loading-holder .loading-stripe .loading-percents {
    display: block;
}

.loading-holder .loading-additional-text {
    font-family: 'Liberation Sans';
    font-size: var(--base-font-size);
    color: var(--text-color-004);

    display: none;
}

.loading-screen.show-additionsl-text .loading-holder .loading-additional-text {
    display: block;
}





/* Menu */
.menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.0);
    opacity: 0;
    pointer-events: none;

    transition: opacity 0.2s ease-in 0.2s, 
                background-color 0.3s ease-in-out 0.1s;
}

.menu.active {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.15);
    pointer-events: all;
    transition: opacity 0.1s ease-in 0.0s;
}

.menu-panel {
    position: relative;
    background: var(--panels-color);
    padding: var(--padding-size);
    padding-bottom: calc(var(--padding-size) * 1.2);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    border-bottom-left-radius: calc(var(--padding-size) * 1.4);
    border-bottom-right-radius: calc(var(--padding-size) * 1.4);
    outline: 1px solid var(--button-border-color-001);
    box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.25);

    transform: translateY(-120%);
    transition: transform 0.5s ease-in 0.0s;
}

.menu.active .menu-panel {
    transform: translateY(0%);
}

.menu-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: -10%;
    background: var(--panels-color);
    border-bottom-left-radius: calc(var(--padding-size) * 1.4);
    border-bottom-right-radius: calc(var(--padding-size) * 1.4);
    z-index: -1;

    transition: all 0.3s ease-in-out 0.05s;
}

.menu-panel::before {
    opacity: 0.5;
}

.menu.active .menu-panel::before {
    opacity: 0.9;
    bottom: 0;
}

.menu-panel .burger-button {
    position: absolute;
    top: var(--padding-size);
    left: var(--padding-size);
    min-width: var(--button-size);
    min-height: var(--button-size);
    border: 2px solid var(--button-border-color-003);
    background: transparent;
    border-radius: 50%;
    padding: 0;
}

.menu-panel .burger-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    background: var(--button-border-color-002);
    -webkit-mask-image: var(--icon-burger);
    mask-image: var(--icon-burger);
    mask-size: 50%;
    -webkit-mask-size: 50%;
    mask-position: 50%;
    -webkit-mask-position: 50%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    border: none;    
}

.menu-panel .burger-button:hover::before {
    background: var(--accent-color);
}

.menu-panel .menu-header {
    position: relative;
    align-self: center;
    font-size: calc(var(--base-font-size) * 3);
    font-family: 'Bebas Neue Cyrillic';
    color: var(--button-border-color-002);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.025em;
    transform: scaleX(1.4);

    user-select: none;
}

.menu-panel .menu-header::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: -10%;
    right: -10%;
    height: 1px;
    width: 120%;
    background: var(--button-border-color-002);
}

.menu-panel .subscribtions-holder {
    padding: calc(var(--padding-size) * 1) 0 0 0;
}

.menu-panel .subscription-unactive {
    display: none;
    flex-direction: column;
    gap: 10px;
}

.menu-panel .subscription-unactive.active {
    display: flex;
}

.menu-panel .subscription-title {
    align-self: center;
    font-size: calc(var(--base-font-size) * 2.4);
    font-family: 'Bebas Neue Cyrillic';
    text-transform: uppercase;
    color: var(--accent-color);
    letter-spacing: 0.025em;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25), -1px -1px 1px rgba(0, 0, 0, 0.25), 1px -1px 1px rgba(0, 0, 0, 0.25), -1px 1px 1px rgba(0, 0, 0, 0.25);

    user-select: none;
}


.menu-panel .subscription-unactive .subscription-title {
    color: var(--accent-color);
}

.menu-panel .subscription-unactive .subscription-end-date {
    align-self: center;
    display: flex;
    flex-direction: row;
    gap: 10px;
    color: var(--text-color-002);
    user-select: none;
}

.menu-panel .subscription-unactive .subscription-end-date .subscription-date {
    font-weight: bold;
    color: var(--accent-color);
}

.menu-panel .subscription-active {
    display: none;
    flex-direction: column;
    gap: 10px;
}

.menu-panel .subscription-active.active {
    display: flex;
}

.menu-panel .subscription-active .subscription-title {
    color: var(--green-color);
}

.menu-panel .subscription-active .subscription-end-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--text-color-002);
}

.menu-panel .subscription-active .subscription-end-date .subscription-date {
    font-weight: bold;
    color: var(--accent-color);
}

.menu-panel .subscription-active .subscription-days-left {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 6px;
    color: var(--text-color-002);
    font-size: var(--base-font-size);
}

.menu-panel .subscription-active .subscription-days-left .subscription-days-left-text {
    font-weight: bold;
    color: var(--accent-color);
}

.menu-panel .account-info-holder {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0px;
    padding: calc(var(--padding-size) * 0.5) 0;
    margin: calc(var(--padding-size) * 0.5) 0;

    position: relative;
}

.menu-panel .account-info-holder:before,
.menu-panel .account-info-holder:after {
    content: '';
    position: absolute;
    left: 15%;
    right: 15%;
    height: 1px;
    background: var(--button-border-color-001);
}

.menu-panel .account-info-holder:before {
    top: 0;
}

.menu-panel .account-info-holder:after {
    bottom: 0;
}

.menu-panel .account-name {
    font-size: calc(var(--base-font-size) * 1.2);
    text-align: center;
    color: var(--text-color-002);
    padding: calc(var(--padding-size) * 0.25) calc(var(--padding-size) * 0.5);

    user-select: none;
}

.menu-panel .account-name .email {
    color: var(--text-color-001);
}

.menu-panel .account-balance {
    color: var(--text-color-002);
    padding: calc(var(--padding-size) * 0.25) calc(var(--padding-size) * 0.5);

    user-select: none;
}

.menu-panel .account-balance .balance {
    color: var(--text-color-001);
}

.cupon-buttons-holder {
    position: relative;
}

.cupon-buttons-holder .buttons-holder {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cupon-buttons-holder .cupon-holder {
    display: none;

    flex-direction: row;
    justify-content: stretch;
    align-items: stretch;
    min-height: calc(var(--button-size) * 2 + var(--base-gap-size));
    position: relative;

    margin-left: calc(-1 * var(--padding-size));
    margin-right: calc(-1 * var(--padding-size));

    padding-left: calc(var(--padding-size) * 1);
    padding-right: calc(var(--padding-size) * 1);
    padding-top: calc(var(--padding-size) * 0.5);
    padding-bottom: calc(var(--padding-size) * 0.5);

    border-top: 1px solid var(--button-border-color-001);
    border-bottom: 1px solid var(--button-border-color-001);

    background-color: var(--bg);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.0) 20%, rgba(0, 0, 0, 0.0) 80%, rgba(0, 0, 0, 0.02) 100%), var(--bg);
    box-shadow: 0px 0px 50px inset rgba(0, 0, 0, 0.02);
}

.cupon-buttons-holder .cupon-holder .cupon-left:before,
.cupon-buttons-holder .cupon-holder .cupon-center:before,
.cupon-buttons-holder .cupon-holder .cupon-right:before {
    content: '';
    background-size: 100% 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    opacity: 0.65;
}

.cupon-buttons-holder .cupon-holder .cupon-left,
.cupon-buttons-holder .cupon-holder .cupon-center,
.cupon-buttons-holder .cupon-holder .cupon-right {
    position: relative;
    height: calc(var(--button-size) * 2 + var(--base-gap-size) - var(--padding-size) * 1 - 2px);
}

.cupon-buttons-holder .cupon-holder .cupon-left {
    aspect-ratio: 40 / 252;
}

.cupon-buttons-holder .cupon-holder .cupon-left:before {
    background: url('img/ticket-p001.png');
    background-repeat: no-repeat;
    background-position-x: right;
    background-size: 100% 100%;
}

.cupon-buttons-holder .cupon-holder .cupon-center {
    flex: 1;
    padding: 0 calc(var(--padding-size) * 0.5);
}

.cupon-buttons-holder .cupon-holder .cupon-center:before {
    background: url('img/ticket-p002.png');
    background-repeat: repeat-x;
    background-size: 100% 100%;
}

.cupon-buttons-holder .cupon-holder .cupon-right {
    aspect-ratio: 227 / 252;
}

.cupon-buttons-holder .cupon-holder .cupon-right:before {
    background: url('img/ticket-p003.png');
    background-repeat: no-repeat;
    background-position-x: left;
    background-size: 100% 100%;
}

.cupon-buttons-holder .cupon-holder .iconed-input-holder {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.cupon-buttons-holder .cupon-holder .cupon-center .button {
    position: absolute;
    right: calc(var(--padding-size) * 0.5 + 2px);
    top: 50%;
    transform: translateY(-50%);
    min-width: calc(var(--input-size) - 4px);
    min-height: calc(var(--input-size) - 4px);
    border-radius: calc(var(--input-size) - 4px);
    padding: 0 calc(var(--input-size) * 0.5 - 4px);
    outline: 2px solid var(--text-color-003);
}

.cupon-buttons-holder .cupon-holder .cupon-center .button:after {
    border-radius: calc(var(--input-size) - 4px);
}

.cupon-buttons-holder.active .buttons-holder {
    display: none;
}

.cupon-buttons-holder.active .cupon-holder {
    display: flex;
}








/* Messages */
.messages-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;

  background-color: rgba(0, 0, 0, 0.0);
  opacity: 0;
  pointer-events: none;

  transition: opacity 0.2s ease-in 0.2s, background-color 0.3s ease-in-out 0.1s;
}

.messages-popup.active {
  background-color: rgba(0, 0, 0, 0.2);
  opacity: 1;
  pointer-events: all;
}

.message-holder {
    position: absolute;
    top: calc(var(--padding-size) * 2 + var(--button-size));
    left: var(--padding-size);
    bottom: var(--padding-size);
    right: var(--padding-size);

    border-radius: calc(var(--button-size) * 0.5);
    background: var(--bg);

    border: 1px solid var(--button-border-color-001);
    outline: 2px solid var(--button-outline-color);

    padding: calc(var(--padding-size));
    padding-top: calc(var(--button-size) + var(--padding-size) * 0.5);

    display: flex;
    flex-direction: column;
    gap: var(--base-gap-size);
}

.message-type {
    position: absolute;
    top: calc(-1 * var(--button-size));
    left: calc(50% - var(--button-size));
    width: calc(var(--button-size) * 2);
    height: calc(var(--button-size) * 2);
    border-radius: 50%;

    background: var(--bg);
    background: linear-gradient(180deg, rgba(250, 250, 250, 1) 0%, rgba(240, 240, 240, 1) 100%);
    border: 1px solid var(--button-border-color-001);
    outline: 2px solid var(--button-outline-color);
}

.message-type::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(250, 250, 250, 1) 0%, rgb(235 235 235) 100%);
    border: 2px solid rgba(255, 255, 255, 0.6);
    outline: 2px solid rgba(255, 255, 255, 0.4);
    outline-offset: 0px;
    box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5) inset;
}

.message-type::after {
    content: '';
    display: block;
    position: absolute;
    top: 5px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
    opacity: 1;
    border: none;
    transition: none;
    box-shadow: none;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-image: var(--button-mask-001);
    mask-image: var(--button-mask-001);
}

.message-type .icon {
    width: 50%;
    height: 50%;

    -webkit-mask-image: var(--icon-letter-002);
    mask-image: var(--icon-letter-002);
    top: 50%;
}

.message-type.message .icon {
    -webkit-mask-image: var(--icon-letter-002);
    mask-image: var(--icon-letter-002);

    top: 45%;
}

.message-type.info .icon {
    -webkit-mask-image: var(--icon-info-002);
    mask-image: var(--icon-info-002);
    width: 60%;
    height: 60%;
    top: 50%;
}

.message-header {
    text-align: center;
    font-size: calc(var(--base-font-size) * 2.2);
    font-family: 'Bebas Neue Cyrillic';
    font-weight: bold;
    text-transform: uppercase;
    color: var(--text-color-008);
    letter-spacing: 0.025em;

    user-select: none;
}

.message-subheader {
    text-align: center;
    font-size: calc(var(--base-font-size) * 1.4);
    font-family: 'Bebas Neue Cyrillic';
    font-weight: bold;
    text-transform: uppercase;
    color: var(--text-color-006);
    letter-spacing: 0.025em;

    user-select: none;
}

.message-text-holder {
    flex: 1;
    display: flex;
    /*margin-top: var(--padding-size);*/
    /*margin-bottom: var(--padding-size);*/
    color: var(--text-color-001);

    padding: calc(var(--padding-size) * 1) calc(var(--padding-size) * 0.5);

    user-select: none;
}

.message-text {
    flex: 1;
}

.messages-scroll {
    min-width: 10px;
    position: relative;
}

.messages-scroll-bar {
    position: absolute;
    top: 0;
    left: 4px;
    right: 0;
    bottom: 0;
    background: var(--button-border-color-001);
    border-radius: 3px;
}

.messages-scroll-bar .thumb {
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    height: calc((100% - 2px) * 0.5);
    background: var(--button-content-color);
    border-radius: 2px;
}

.accept-message-popup {

}





.error-message-hldr {
    opacity: 0;
    pointer-events: none;

    position: fixed;
    top: var(--padding-size);
    left: calc(var(--padding-size) + var(--button-size) + var(--padding-size) * 0.5);
    right: calc(var(--padding-size) + var(--button-size) + var(--padding-size) * 0.5);
    min-height: var(--button-size);

    border-radius: calc(var(--button-size) * 0.25);
    background: var(--bg);
    border: 1px solid var(--button-border-color-001);
    outline: 2px solid var(--accent-color-90);
    outline-offset: -6px;
    padding: calc(var(--padding-size) * 0.5);

    display: flex;
    align-items: center;
    gap: var(--base-gap-size);

    z-index: 9999;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);

    transition: opacity var(--error-msg-fade-time) ease-in;/* var(--error-msg-show-time);*/
}

.error-message-hldr.active {
    opacity: 1;
    pointer-events: all;
    transition: opacity 0.1s ease-in 0.0s;
}

.error-message-hldr.vertical {
    flex-direction: column;
    padding: var(--padding-size);
    gap: calc(var(--base-gap-size) * 1.5);
}

.error-message-hldr .error-icon {
    min-height: calc(var(--button-size) - var(--padding-size));
    aspect-ratio: 1 / 1;
    position: relative;
}

.error-message-hldr .error-icon::before,
.error-message-hldr .error-icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background: var(--button-content-color);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

.error-message-hldr .error-icon::before {
    display: block;

    -webkit-mask-image: var(--icon-attention-001);
    mask-image: var(--icon-attention-001);

    background: var(--accent-color);
}

.error-message-hldr .error-icon::after {
    -webkit-mask-image: var(--icon-attention-002);
    mask-image: var(--icon-attention-002);
}



.error-message-hldr.success {
    outline: 2px solid var(--green-color);
}

.error-message-hldr.success .error-icon::before {
    display: none;
}

.error-message-hldr.success .error-icon::after {
    -webkit-mask-image: var(--icon-success-001);
    mask-image: var(--icon-success-001);

    background: var(--green-color);
}


.error-message-hldr .error-message {
    flex: 1;
    font-size: var(--base-font-size);
    color: var(--text-color-003);
}









/* Inputs */
input {
    min-width: var(--input-size);
    min-height: var(--input-size);
    background: var(--input-bg-color);
    box-shadow: var(--input-box-shadow);

    outline: 2px solid var(--button-outline-color);
    border: 2px solid var(--input-border-color);
    border-radius: var(--input-size);

    padding: 0 calc(var(--button-size) * 0.75);
}

.input.error {
    outline: 2px solid var(--accent-color);
    outline-offset: 4px;
}

.input.success {
    outline: 2px solid var(--green-color);
    outline-offset: 4px;
}

.labeled-input {
    display: flex;
    gap: calc(var(--base-gap-size) * 0.5);
}

.labeled-input .label {
    text-align: center;
    color: var(--text-color-007);
    font-size: var(--base-font-size);
}

.labeled-input .input {
    flex: 1;
}

.iconed-input-holder {
    position: relative;
    display: flex;
    flex-direction: row;
}

.iconed-input-holder .input {
    width: 100%;
    text-align: center;
    padding-right: calc(var(--input-size) + var(--input-size) * 0.5 - 4px);
}

.iconed-input-holder.login:before,
.iconed-input-holder.password:before,
.iconed-input-holder.phone:before,
.iconed-input-holder.email:before {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(var(--button-size) * 0.5);
    height: 40%;
    aspect-ratio: 1 / 1;
    right: auto;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: none;
    padding: 0;
    background: var(--text-color-007);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

.iconed-input-holder.login:before {
    -webkit-mask-image: var(--icon-user);
            mask-image: var(--icon-user);  
}

.iconed-input-holder.password:before {
    -webkit-mask-image: var(--icon-lock);
            mask-image: var(--icon-lock);  
}

.iconed-input-holder.phone:before {
    -webkit-mask-image: var(--icon-mobile);
            mask-image: var(--icon-mobile);  
}

.iconed-input-holder.email:before {
    -webkit-mask-image: var(--icon-email);
            mask-image: var(--icon-email);  
}

.iconed-input-holder .eye {
    position: absolute;
    top: 50%;
    right: calc(var(--button-size) * 0.05);
    height: 40%;
    aspect-ratio: 1 / 1;
    left: auto;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: none;
    padding: 0;

    background: var(--text-color-007);

    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-position: center;
            mask-position: center;
}

.iconed-input-holder .eye.visible {
    -webkit-mask-image: var(--icon-visible);
            mask-image: var(--icon-visible);
}

.iconed-input-holder .eye.invisible {
    -webkit-mask-image: var(--icon-invisible);
            mask-image: var(--icon-invisible);
}

.forget-password {
    font-family: 'Bebas Neue Cyrillic';
    font-weight: bold;
    font-size: calc(var(--base-font-size) * 1.5);
    color: var(--text-color-008);
    border: none;
    background: transparent;
}









/* Buttons */
.button {
    position: relative;
    min-width: var(--button-size);
    min-height: var(--button-size);
    border-radius: calc(var(--button-size) / 2);
    border: 1px solid var(--button-border-color-001);
    outline: 2px solid var(--button-outline-color);
    background: linear-gradient(180deg, rgba(250, 250, 250, 1) 0%, rgba(240, 240, 240, 1) 100%);
    /*background: #00FF00;*/
    padding: 0;
    font-size: calc(var(--base-font-size) * 1.8);
    font-family: 'Bebas Neue Cyrillic';
    text-transform: uppercase;
    color: var(--text-color-001);
    letter-spacing: 0.025em;
}

.button::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: calc(var(--button-size) / 2);
    border: 2px solid var(--accent-color);
    box-shadow: 0px 0px 6px var(--accent-color-40), 0px 0px 6px var(--accent-color-40) inset;
    opacity: 0.0;

    transition: opacity 0.1s ease-in;
}

.button::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border-radius: calc(var(--button-size) / 2);
    /* border: 1px solid rgba(255, 255, 255, 0.2); */
    outline: 2px solid rgba(255, 255, 255, 0.2);
    outline-offset: 0px;
    background: linear-gradient(180deg, rgba(250, 250, 250, 1) 0%, rgba(240, 240, 240, 1) 100%);
}

.button:active::after {
    opacity: 0.95;
}

.button:disabled:active::after {
    opacity: 0.0;
}

.button span.btn-text {
    position: relative;
    user-select: none;
}

.button.round {
    border-radius: 50%;
}

.button.round::before {
    border-radius: 50%;
}

.button.round::after {
    border-radius: 50%;
}

.button.rect {
    border-radius: calc(var(--button-size) / 4);
}

.button.rect::before {
    border-radius: calc(var(--button-size) / 4 - 2px);
}

.button.rect::after {
    border-radius: calc(var(--button-size) / 4);
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
}

.button.rect.type002 {
    min-height: calc(var(--button-size) * 0.75);
    border-radius: calc(var(--button-size) * 0.75 / 2);

    border-color: var(--accent-color);
    border-width: 2px;
}

.button.rect.type002::before {
    border-radius: calc(var(--button-size) / 2);
}

.button.rect.type002::after {
    border-radius: calc(var(--button-size) * 0.75 / 2);
}

.button.loading.rect.type002::before {
    border-radius: calc(var(--button-size) / 2);
}

.button.rect.type003 {
    min-height: calc(var(--button-size) * 0.75);
    border-radius: calc(var(--button-size) * 0.75 / 2);

    border-width: 2px;
}

.button.rect.type003::before {
    border-radius: calc(var(--button-size) / 2);
}

.button.rect.type003::after {
    border-radius: calc(var(--button-size) * 0.75 / 2);
}

.button.loading.rect.type003::before {
    border-radius: calc(var(--button-size) / 2);
}


.button.green {
    color: var(--text-color-green);
}

.button.green::after {
    border: 2px solid var(--green-color);
    box-shadow: 0px 0px 6px var(--green-color-40), 0px 0px 6px var(--green-color-40) inset;
}

.button.middle {
    min-width: calc(var(--button-size) * 1.1);
    min-height: calc(var(--button-size) * 1.1);
}

.button.big {
    min-width: calc(var(--button-size) * 1.6);
    min-height: calc(var(--button-size) * 1.6);
}

.button.loading {
    --a: 0deg;

    background:
  
      conic-gradient(
        from 0deg,
        var(--accent-color-00) var(--a),
        var(--accent-color-70) calc(var(--a) + 70deg),
        var(--accent-color)    calc(var(--a) + 80deg),
        var(--accent-color)    calc(var(--a) + 89deg),
        var(--accent-color-00) calc(var(--a) + 90deg),
        var(--accent-color-00) 360deg
      ),
  
      conic-gradient(
        from 0deg,
        var(--accent-color-00) calc(var(--a) - 360deg),
        var(--accent-color-70) calc(var(--a) - 360deg + 70deg),
        var(--accent-color)    calc(var(--a) - 360deg + 80deg),
        var(--accent-color)    calc(var(--a) - 360deg + 89deg),
        var(--accent-color-00) calc(var(--a) - 360deg + 90deg),
        var(--accent-color-00) 360deg
      ),
  
      linear-gradient(180deg, rgba(250,250,250,1) 0%, rgba(240,240,240,1) 100%);
  
      animation: loading-sweep 2s linear infinite;
}

@keyframes loading-sweep {
    from { --a: 0deg; }
    to   { --a: 360deg; }
}

.button.loading::before {
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;

    border-radius: calc(var(--button-size) / 4 - 4px);
}

.button.loading.rect::before { 
    /*border-radius: 50%;*/
    border-radius: calc(var(--button-size) / 4 - 4px);
}

.button.loading.rect.type002 {
    border-color: var(--button-border-color-001);
    border-width: 1px;
}

.button.active {
    color: var(--text-color-green);
}

.button.active::after {
    border: 2px solid var(--green-color);
    box-shadow: 0px 0px 6px var(--green-color-40), 0px 0px 6px var(--green-color-40) inset;

    opacity: 1;
}

.play-pause-button-ltl {
    position: relative;
    min-width: calc(var(--button-size) * 1);
    min-height: calc(var(--button-size) * 1);
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--button-border-color-002);
    background: transparent;
}

.play-pause-button-ltl::before {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    top: 10%;
    bottom: 10%;
    border-radius: 50%;

    background: var(--button-border-color-002);
    border: 4px solid var(--button-border-color-002);
}

.play-pause-button-ltl.active::before {
    background: var(--accent-color);
}

.play-pause-button-ltl .icon {
    background: #FFF;
    width: 25%;
    height: 25%;
    margin-left: 0.5px;
}

.play-pause-button-ltl .icon::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    background: var(--button-border-color-002);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    opacity: 0;
}

.play-pause-button-ltl.active .icon::after {
    opacity: 1;
}

.play-pause-button-ltl.play .icon {
    -webkit-mask-image: var(--icon-play-001);
    mask-image: var(--icon-play-001);
}

.play-pause-button-ltl.play .icon::after {
    -webkit-mask-image: var(--icon-play-003);
    mask-image: var(--icon-play-003);
}

.play-pause-button-ltl.pause .icon {
    margin-left: 0;
    -webkit-mask-image: var(--icon-pause-001);
    mask-image: var(--icon-pause-001);
}

.play-pause-button-ltl.pause .icon::after {
    /* -webkit-mask-image: var(--icon-play-003); */
    /* mask-image: var(--icon-play-003); */
    opacity: 0;
}

.play-pause-button-ltl.stop .icon {
    margin-left: 0;
    -webkit-mask-image: var(--icon-stop-001);
    mask-image: var(--icon-stop-001);
}

.play-pause-button-ltl.stop .icon::after {
    /* -webkit-mask-image: var(--icon-play-003); */
    /* mask-image: var(--icon-play-003); */
    opacity: 0;
}

.add-to-favorite {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    width: calc(var(--button-size) * 0.7);
    height: calc(var(--button-size) * 0.7);
    border: none;
    background: transparent;
}

.add-to-favorite::before {
    content: "";
    display: block;
    position: absolute;
    width: 90%;
    height: 90%;
    background: var(--button-border-color-001);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-image: var(--icon-heart-001);
    mask-image: var(--icon-heart-001);
}

.add-to-favorite::after {
    content: "";
    display: block;
    position: absolute;
    width: 90%;
    height: 90%;
    background: var(--button-border-color-002);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-image: var(--icon-heart-003);
    mask-image: var(--icon-heart-003);

    transition: all 0.1s ease-in;
}

.add-to-favorite:active::after {
    background: var(--accent-color);
}

.add-to-favorite.active {

}

.add-to-favorite.active::before {
    background: var(--accent-color);
}

.add-to-favorite.active::after {
    background: var(--button-border-color-002);
}

.to-favorite-button {
  
}

.tail-button {
    position: absolute;
    width: calc(var(--tailW) * 0.4);
    /*height: calc(var(--tailH) * 1);*/
    height: 1px;
    left: calc(50% - (var(--tailW) * 0.4 * 0.5));
    background: transparent;
    border: none;
}

.tail-button .icon {
    background: var(--pl-icon-color-001);
    width: calc(var(--tailH) * 1);
    height: calc(var(--tailH) * 1);
    top: 0;
    transform: translate(-50%, -80%);
}

.tail-button .text {
    font-family: 'Bebas Neue Cyrillic';
    font-size: calc(var(--base-font-size) * 1.1);
    color: var(--pl-icon-text-color-001);
    text-transform: uppercase;
    letter-spacing: 0.075em;
    text-align: center;
    font-weight: bold;
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translate(-50%);
}






/* NOT-TG error */
.not-tg-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--panels-color);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.not-tg-screen .error-msg-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(var(--base-gap-size) * 2);
}

.not-tg-screen .error-msg-wrapper .error-icon {
    display: block;
    width: 100px;
    height: 100px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-image: var(--tg-logo-img);
    mask-image: var(--tg-logo-img);
    background: #1790cd;
}

.not-tg-screen .error-msg-wrapper .error-message {
    display: flex;
    flex-direction: column;
    gap: calc(var(--base-gap-size) * 0.1);

    justify-content: flex-start;
    align-items: center;
}

.not-tg-screen .error-msg-wrapper .error-message .str {
    font-family: 'Liberation Sans';
    text-transform: uppercase;
    font-size: calc(var(--base-font-size) * 1.5);
}

.not-tg-screen .error-msg-wrapper .error-message .str.bold {
    font-family: 'Bebas Neue Cyrillic';
    font-weight: bold;
    color: var(--text-color-001);
    font-size: calc(var(--base-font-size) * 4.2);
    text-align: center;
}

.not-tg-screen .error-msg-wrapper .link {
    color: #1790cd;
    text-decoration: none;
}



.tmp-log {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--panels-color);
    padding: 20px;
    z-index: 99999;
}

.tmp-log .log-entry {
   margin: 5px 0; 
   padding: 5px; 
   background: #f0f0f0; 
   border-left: 3px solid #4CAF50; 
   font-family: monospace; 
   font-size: 12px; 
}





/* Icons */
.icon {
    display: block;
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 60%;
    transform: translate(-50%, -50%);
    background: var(--button-content-color);

    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-position: center;
            mask-position: center;
}

.icon.burger {
    -webkit-mask-image: var(--icon-burger);
            mask-image: var(--icon-burger);

    width: 50%;
    height: 50%;
}

.icon.info {
    -webkit-mask-image: var(--icon-info);
          mask-image: var(--icon-info);

    transform: translate(-49%, -56%);
}

.icon.play {
    -webkit-mask-image: var(--icon-play-001);
            mask-image: var(--icon-play-001);
}

.icon.pause {
    -webkit-mask-image: var(--icon-pause-001);
            mask-image: var(--icon-pause-001);
}

.icon.stop {
    -webkit-mask-image: var(--icon-stop-001);
            mask-image: var(--icon-stop-001);
}

.icon.bwd {
    -webkit-mask-image: var(--icon-bwd-001);
            mask-image: var(--icon-bwd-001); 
}

.icon.fwd {
    -webkit-mask-image: var(--icon-fwd-001);
            mask-image: var(--icon-fwd-001); 
}

.icon.heart {
    -webkit-mask-image: var(--icon-heart-001);
            mask-image: var(--icon-heart-001); 
}

.icon.back {
    width: 50%;
    height: 50%;

    transform: translate(-60%, -50%);

    -webkit-mask-image: var(--icon-left);
            mask-image: var(--icon-left); 
}

.icon.right {
    -webkit-mask-image: var(--icon-right);
            mask-image: var(--icon-right);

    width: 50%;
    height: 50%;
    transform: translate(-45%, -50%);
}

.icon.download {
    -webkit-mask-image: var(--icon-download-001);
            mask-image: var(--icon-download-001);
}

.icon.categories {
    -webkit-mask-image: var(--icon-categories-001);
            mask-image: var(--icon-categories-001);
}

.icon.headphones {
    -webkit-mask-image: var(--icon-headphones-002);
            mask-image: var(--icon-headphones-002);
}

.icon.list-up {
    -webkit-mask-image: var(--icon-list-up-001);
            mask-image: var(--icon-list-up-001);
}

.icon.list-down {
    -webkit-mask-image: var(--icon-list-down-001);
            mask-image: var(--icon-list-down-001);
}




/* Helpers */
.column {
    flex-direction: column;
}

.row {
    flex-direction: row;
}

.hidden { 
    display: none !important; 
}