.confirm-place-classic-style {
    position: fixed;
    z-index: 1978;
    background: rgba(255, 255, 255, 0.3);
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 1000px) {
    .wrapper-confirm-classic-style {
        z-index: 1057;
        position: absolute;
        width: 300px;
        height: 250px;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        /*background: radial-gradient(70% 95%, #d3f0fa, #68a8e4);*/
        background: rgba(255, 255, 255, 0.6);
        text-align: center;
        border-radius: 30px;
        border: 2px solid #000000;
        box-shadow: 2px 4px 1px #000000;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: 'Lato', sans-serif;
    }

    .wrapper-confirm-classic-style p {
        z-index: 1057;
        position: absolute;
        top: 25%;
        font-size: 1.2em;

    }

    .wrapper-confirm-classic-style div {
        z-index: 1057;
        position: absolute;
        bottom: 5px;
        font-weight: bolder;
        width: 100%;
    }

    .wrapper-confirm-classic-style div div {
        cursor: pointer;
        z-index: 1057;
        position: relative;
        display: inline-block;
        font-weight: bolder;
        text-align: center;
        width: 90px;
        height: 50px;
        margin-right: auto;
        margin-left: auto;
        border-radius: 10px;
        border: 1px solid gray;
    }
}

@media screen and (min-width: 1000px) {
    .wrapper-confirm-classic-style {
        z-index: 1057;
        position: absolute;
        width: 600px;
        height: 350px;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        background: radial-gradient(70% 95%, #464f55, #233448);
        /*background: radial-gradient(40% 50%, rgb(242, 248, 255), rgb(240, 250, 255));*/
        text-align: center;
        border-radius: 30px;
        border: 2px solid black;
        box-shadow: 2px 4px 1px #333333;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: 'Lato', sans-serif;
        /*font-family: "Comic Sans MS";*/
    }

    .wrapper-confirm-classic-style p {
        z-index: 1057;
        position: absolute;
        top: 25%;
        font-size: 2em;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: 'Lato', sans-serif;

    }

    .wrapper-confirm-classic-style div {
        z-index: 1057;
        position: absolute;
        bottom: 5px;
        font-weight: bolder;
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: 'Lato', sans-serif;
    }

    .wrapper-confirm-classic-style div div {
        cursor: pointer;
        z-index: 1057;
        position: relative;
        font-weight: bolder;
        text-align: center;
        width: 290px;
        height: 50px;
        margin-right: auto;
        margin-left: auto;
        border-radius: 10px;
        border: 1px solid rgba(27, 27, 27, 0.93);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: 'Lato', sans-serif;
    }
}


.btn-cover {
    color: rgba(9, 10, 9, 0.8);
    padding: 15px 5px;
    width: auto;
    text-decoration: none;
    text-align: center;
    margin: 20px auto;
    display: block;
    background-image: linear-gradient(to left, transparent, transparent 50%, rgba(17, 76, 155, 0.58) 50%, rgba(17, 76, 155, 0.8));
    background-position: 100% 0;
    background-size: 200% 100%;
    transition: all .25s ease-in;
    font: 400 1.7em tahoma;
    border: 3px solid rgba(9, 10, 9, 0.89);
}

.btn-cover:hover {
    background-position: 0 0;
    color: #fff;
}

.btn-play {
    /*padding: 5px;*/
    height: 50px;
    width: 50px;
    z-index: 100;
    display: inline-table;
    border-radius: 30px;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.13);
    background-color: rgb(255, 255, 255);
    margin-left: auto;
    margin-right: auto;
}

.btn-stop {
    /*padding: 5px;*/
    height: 50px;
    width: 50px;
    border-radius: 30px;
    z-index: 100;
    display: inline-table;
    border: 1px solid rgba(122, 142, 148, 0.22);
    position: relative;
    background-color: rgba(255, 255, 255, 0.71);
    margin-left: auto;
    margin-right: auto;
}

.btn-create {
    /*padding: 5px;*/
    width: 50px;
    height: 50px;
    z-index: 100;
    display: inline-table;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 30px;
    background-color: rgba(255, 255, 255, 0.75);
    margin-left: auto;
    margin-right: auto;
}

/*@media screen and (max-width: 1000px) {*/
/*    .chat-place {*/
/*        position: fixed;*/
/*        left: 30px;*/
/*        width: 65%;*/
/*        height: 100%;*/
/*        bottom: 100px;*/
/*        overflow: hidden;*/
/*    }*/
/*}*/
.cnv-chat-wrapper {
    width: 100%;
    height: 100%;
}

.chat-place-canvas {
    position: fixed;
    height: 700px;
    overflow: hidden;
    z-index: 500;
    padding-bottom: 25px;
}

.message-wrapper {
    position: absolute;
    top: 150px;
    width: 100%;
}

.text-value {
    border-radius: 2px;
    padding: 15px;
    color: black;
    margin-right: 15px;
}

.button-create-call {
    margin: 10px;
    z-index: 50;
}

.button-push-message {
    margin: 10px;
    z-index: 50;
}


.place-online-count {
    position: fixed;
    bottom: 15px;
    text-align: right;
    height: 15px;
    font-size: 20px;
    font-weight: bolder;
    width: 100%;
}

.avatar-wrapper-classic {
    width: 100px;
    height: 100px;
    border: 1px solid darkgrey;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 1000px) {
    .message-place {
        position: relative;
        cursor: pointer;
        overflow: hidden;
        background: linear-gradient(to bottom, rgba(108, 108, 108, 0.78) 10%, rgba(81, 90, 94, 0.44) 50%, rgba(77, 77, 77, 0.45) 90%);
        width: 100%;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        flex-wrap: nowrap;
    }
}

@media screen and (min-width: 1000px) {
    .message-place {
        position: relative;
        cursor: pointer;
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin-left: auto;
        background: linear-gradient(to bottom, rgba(108, 108, 108, 0.78) 10%, rgba(81, 90, 94, 0.44) 50%, rgba(77, 77, 77, 0.45) 90%);
        margin-right: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        flex-wrap: nowrap;
    }
}

/* Box sizing rules */
input[type="text"]:focus {
    outline: none;
}

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

/* Remove default padding */
ul[class],
ol[class] {
    padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
    margin: 0;
}

/* Set core body defaults */
html, body {
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
    background-size: cover;
    cursor: pointer;
    font: 400 18px tahoma;
    color: #070017;
    /*text-shadow: -1px 0 #faf9f5, 0 1px #f2f8ff, 1px 0 #faf9f5, 0 -1px #faf9f5;*/
    /*запрет на копирование*/
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
    list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
    max-width: 100%;
    display: block;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
    margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
    font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.button-action {
    height: 30px;
    width: 30px;
    margin-bottom: 15px;
}

.button-action-call {
    margin: 0 !important;
    padding: 0;
    display: inline-flex;
}

.box-inline {
    width: 100%;
    display: grid;
    border-top: 2px dashed rgba(255, 255, 255, 0.1);
}

.box-item {
    display: grid;
}

.text-value p {
    background: rgba(247, 247, 248, 0.8);
    border-radius: 3px;
    display: inline-block;;
    padding: 5px;
    box-shadow: 0px 0px 1px #5c5d61
}

/*.button-join-call {*/
/*    display: inline-flex;*/
/*    color: #efefef;*/
/*    font-size: 18px;*/
/*    border-radius: 20px;*/
/*    background: linear-gradient(to bottom, rgb(3, 245, 3) 10%, rgb(3, 107, 3) 50%, rgb(3, 107, 3) 90%);*/
/*}*/

.button-join-call {
    /* Базовые стили */
    padding: 16px 32px;
    font-size: 18px;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    letter-spacing: 1px;

    /* Градиент и анимация */
    background: linear-gradient(
            45deg,
            #00cc00,
            #00b300,
            #009900,
            #00b300,
            #00cc00
    );
    background-size: 400% 400%;
    animation: gradientShift 3s ease infinite;

    /* Оформление */
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 179, 0, 0.3),
    0 0 20px rgba(0, 255, 0, 0.2) inset;

    /* Позиционирование */
    position: relative;
    overflow: hidden;
}

/* Анимация градиента */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Эффект при наведении */
.button-join-call:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 179, 0, 0.4),
    0 0 25px rgba(0, 255, 0, 0.3) inset;
    animation-duration: 1.5s; /* Ускоряем анимацию при наведении */
}

/* Эффект при нажатии */
.button-join-call:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(0, 179, 0, 0.3),
    0 0 15px rgba(0, 255, 0, 0.2) inset;
}

/* Блестящий эффект поверх кнопки */
.button-join-call::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
            45deg,
            transparent,
            rgba(255, 255, 255, 0.1),
            transparent
    );
    transform: rotate(45deg);
    transition: all 0.5s ease;
}

.button-join-call:hover::before {
    animation: shine 1.5s ease;
}

@keyframes shine {
    0% {
        transform: rotate(45deg) translate(-50%, -50%);
    }
    100% {
        transform: rotate(45deg) translate(50%, 50%);
    }
}

/* Для поддержки reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .button-join-call {
        animation: none;
        background: #00cc00;
    }

    .button-join-call:hover {
        animation: none;
        background: #00b300;
    }

    .button-join-call::before {
        display: none;
    }
}

.wrapper-message-btn {
    display: grid;
    width: 30px;
    height: 100%;
}

.wrapper-meta-data {
    display: inline-flex;
}

.wrapper-message-data {
    border-left: 1px solid rgba(10, 20, 30, 0.47);
    display: grid;
    overflow-wrap: anywhere;
}

.empty-message h2 {
}

.empty-message {
    height: 45px;
    text-align: center;
    position: relative;
    margin-right: auto;
    margin-left: auto;
    width: 100px;
    font-size: 0.6em;
    color: rgba(248, 249, 250, 0.81);
    border-radius: 20px;
    background: rgb(5, 1, 16);
}

.wrapper-meta-data div {
    margin: 5px;
}

@media screen and (max-width: 1000px) {
    .chat-place {
        position: fixed;
        width: 100%;
        box-shadow: 1px -1px 100px #490875;
        height: 100%;
        bottom: 100px;
    }

    .chat-place-all-view {
        position: fixed;
        width: 100%;
        overflow-y: hidden;
        height: 100%;
    }

    .analyser-player-call-room {
        margin-top: 8px;
        position: relative;
        float: right;
        margin-left: 10px;
    }

    .analyser-player {
        margin-top: 8px;
        position: relative;
        float: right;
    }

    .left {
        position: relative;
        float: left;
        margin-right: 15px;
    }

    .right {
        margin-right: 15px;
        position: relative;
        float: right;
    }
}

@media screen and (min-width: 1000px) {

    .chat-place {
        position: fixed;
        left: 30px;
        background-repeat: round;
        width: 70%;
        box-shadow: 1px -1px 100px #490875;
        height: 100%;
        bottom: 100px;
    }

    .chat-place-all-view {
        position: fixed;
        left: 30px;
        width: 90%;
        overflow-y: hidden;
        height: 100%;
    }

    .analyser-player-call-room {
        margin-top: 8px;
        width: 210px;
        position: relative;
        float: right;
        margin-left: 10px;
    }

    .analyser-player {
        margin-top: 8px;
        width: 200px;
        position: relative;
        float: right;
    }

    .left {
        position: relative;
        float: left;
        margin-right: 15px;
    }

    .right {
        margin-right: 15px;
        position: relative;
        float: right;
    }
}

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

    .menu-paintApp-classic-style {
        background: linear-gradient(to bottom, rgb(17, 53, 110) 10%, rgb(23, 74, 157) 50%, rgb(43 17 102) 90%);
        /*background: linear-gradient(to bottom, rgb(17, 53, 110) 10%, rgb(23, 74, 157) 50%, rgb(80 46 155) 90%);*/
        /*background: linear-gradient(to bottom, rgb(17, 53, 110) 10%, rgb(23,74, 157) 50%, rgb(13, 77, 179) 90%);*/
        /*margin:5px;*/
        width: 100%;
        display: inline-flex;
        height: 50px;
        position: fixed;
        z-index: 48;
        transition: 1s ease;
        vertical-align: bottom;
        color: white;
        /*background: white;*/
        animation: grow 1.3s ease-in-out;
    }

    .img-button-classic-style {
        z-index: 1000;
        width: auto;
        margin-right: 20px;
    }

    .weight-menu-classic-style {
        background: white;
        /*margin-top: 15px;*/
        display: inline-flex;
    }

    .tools-menu-classic-style {
        /*background: white;*/
        margin: 5px;
        display: inline-grid;
    }

    .tools-menu-classic-style div {
        /*margin-bottom: 6px;*/
    }

    .options-menu-classic-style {
        position: fixed;
        left: 0;
        bottom: 0;
    }

    .options-menu-classic-style {
        display: inline-flex;
    }
}

.menu-topic {
    display: inline-flex;
    width: 100%;
    height: 50px;
    position: fixed;
    top: 0px;
    z-index: 36;
    color: white;
    vertical-align: bottom;
    background: linear-gradient(to bottom, rgb(17, 53, 110) 10%, rgb(23, 74, 157) 50%, rgb(43 17 102) 90%);
    box-shadow: 2px 0 2px black;
}

@media screen and (max-width: 3000px) and (min-width: 600px) {
    .menu-paintApp-classic-style {
        display: inline-flex;
        width: 100%;
        height: 50px;
        position: absolute;
        z-index: 48;
        color: white;
        vertical-align: bottom;
        /*background: white;*/
        background: linear-gradient(to bottom, rgb(17, 53, 110) 10%, rgb(23, 74, 157) 50%, rgb(43 17 102) 90%);
        /*background: linear-gradient(to bottom, rgb(17, 53, 110) 10%, rgb(23, 74, 157) 50%, rgb(80 46 155) 90%);*/
        /*background: linear-gradient(to bottom, rgb(17, 53, 110) 10%, rgb(23,74, 157) 50%, rgb(13, 77, 179) 90%);*/
        box-shadow: 2px 0 2px black;
    }

    .weight-menu-classic-style {
        /*background: white;*/
        display: inline-flex;
    }

    .tools-menu-classic-style {
        /*background: white;*/
        display: inline-flex;
    }

    .img-button-classic-style:hover {
        /*animation: sizeScale .1s linear;*/
    }

    .img-button-classic-style {
        width: auto;
        height: 50px;
    }
}

.air-icon {
    padding: 15px;
    animation: air-animate 2s infinite;
}

.weight-tool-value-classic-style {
    margin: auto;
    text-align: center;
    vertical-align: middle;
    font-size: 1.8em;
    color: #f7f7f8;
    background: #0a0027;
    width: 50px;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    /*text-shadow: -1px 0 #ffffff, 0 1px #ffffff, 1px 0 #ffffff, 0 -1px #ffffff;*/
    justify-content: center;
    font-family: 'Lato', sans-serif;
}


.img-button-classic-style {
    z-index: 1000;
    padding: 2px;
    cursor: pointer;
    margin: 2px;
    font-weight: bolder;
    -webkit-transition: .3s linear;
    -moz-transition: .3s linear;
    -o-transition: .3s linear;
    transition: .3s linear;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

.img-button-classic-style img {
    width: inherit;
    height: inherit;
}

.img-button-classic-style span {
    width: auto;
    height: 50px;
    align-items: center;
    justify-content: center;
}

.select {
    border: 1px solid #0f0f1e;
    box-shadow: 3px 3px 3px black;
}

@keyframes blinkBorder {
    1% {
        opacity: 0.9;
    }
    30% {
        opacity: 0.6;
    }
    70% {
        opacity: 0.4;
    }
    90% {
        opacity: 0.3;
    }

}

@keyframes grow {
    0% {
        margin-top: -300px;
    }
    100% {
        margin-top: 0px;
    }
}

@keyframes sizeScale {
    1% {
        box-shadow: 1px 1px 0 slategray;
    }
    30% {
        box-shadow: 2px 1px 0 slategray;
    }

    100% {
        box-shadow: 2px 1px 1px slategray;
    }
}

@keyframes air-animate {
    1% {
        padding: 15px;
        border-radius: 30px;
        box-shadow: 1px 1px 0px slategray;
    }
    10% {
        padding: 15px;
        border-radius: 30px;
        box-shadow: 2px 2px 0px slategray;
    }
    20% {
        padding: 15px;
        border-radius: 30px;
        box-shadow: 3px 3px 0px slategray;
    }
    30% {
        padding: 15px;
        border-radius: 30px;
        box-shadow: -1px -1px 0px slategray;
    }
    40% {
        padding: 15px;
        border-radius: 30px;
        box-shadow: -2px -2px 0px slategray;
    }
    50% {
        padding: 15px;
        border-radius: 30px;
        box-shadow: -3px -3px 1px slategray;
    }
    60% {
        padding: 15px;
        border-radius: 30px;
        box-shadow: 1px 0px 1px slategray;
    }
    70% {
        padding: 15px;
        border-radius: 30px;
        box-shadow: 2px 0px 2px slategray;
    }
    80% {
        padding: 15px;
        border-radius: 30px;
        box-shadow: 3px 0px 3px slategray;
    }
    90% {
        padding: 15px;
        border-radius: 30px;
        box-shadow: -1px 0px 2px slategray;
    }
    100% {
        padding: 15px;
        border-radius: 30px;
        box-shadow: -3px -3px 2px slategray;
    }
}

.color-pallet-classic-style {
    position: relative;
    z-index: 50;
}

.p-12 {
    position: relative;
    top: 10px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: white;
    /*text-shadow: -1px 0 #09001c, 0 1px #0e0c25, 1px 0 #170b30, 0 -1px #170b30;*/
    width: 250px;
    font-weight: bolder;
    font-size: 20px;
}

@media screen and (max-width: 600px) {
    .color-pallet-wrapper-classic-style {
        background: radial-gradient(70% 95%, rgba(212, 241, 251, 0.57), rgba(104, 168, 228, 0.45));
        bottom: 50px;
    }
}

.color-pallet-wrapper-classic-style {
    background: radial-gradient(70% 95%, rgba(211, 240, 250, 0.3), #68a8e4);
    float: right;
    position: absolute;
    /*background: white;*/
    z-index: 57;
    border: 1px solid black;
}

.icon-classic-style {
    width: 50px;
    height: 50px;
    position: relative;
    float: right;
}

.panel-color-pallet-classic-style {
    height: 70px;
    display: flex;
    z-index: 50;
    background: unset;
}

.panel-color-pallet-classic-style img {
    z-index: 51;
    cursor: move;
    border-radius: 50px;
    /*background: white;*/
}

.panel-color-pallet-classic-style div {
    z-index: 51;
    position: relative;
}

.combo-box {
    border: none;
    color: #080810;
    margin: 0;
    border-bottom: 1px solid rgba(194, 200, 195, 0.9);

}

.combo-box .hi {
    background: rgba(255, 252, 249, 0.24);
}

.combo-box input {
    outline: none;
    border: none;
    /*color:white;*/
    width: 99%;
    /*border-bottom: solid 1px slategrey;*/
}

.selected {
    background: rgba(228, 85, 105, 0.71);
}

.combo-box-list {
    position: absolute;
    overflow: auto;
    padding: 1vh;
    bottom: 0px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.53);
    border-left: 1px solid rgba(248, 249, 250, 0.44);
    border-right: 1px solid rgba(122, 142, 148, 0.22);
    background: #f3f1f1;
    z-index: 53;
}

.wrapper-customer-panel {
    margin-right: auto;
    margin-left: auto;
    width: 610px;
    /*padding: 3px;*/
    border: 1px solid rgba(248, 249, 250, 0.96);
    /*box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.9);*/
}

.Ok {
    background-color: darkseagreen;
}

.Cancel {
    background-color: gray;
}

.inform-place-classic-style {
    position: fixed;
    z-index: 9968;
    top: 10px;
    border: 2px solid rgba(10, 0, 39, 0.53);
    display: flex;
    background: linear-gradient(to bottom, rgb(17, 53, 110) 10%, rgb(23, 74, 157) 50%, rgb(13, 77, 179) 90%);
    /*background: radial-gradient(70% 95%, rgb(255, 255, 255), rgba(247, 247, 248, 0.9));*/
}

.bottom {
    bottom: 0;
}

input[name=user_name] {
    color: white;
}

.form-place-classic-style {
    position: absolute;
    text-align: center;
    z-index: 3000;
    background: linear-gradient(to bottom, rgb(17, 53, 110) 10%, rgb(56, 54, 57) 50%, rgb(0, 0, 0) 90%);
    color: rgb(243, 241, 241);
    font-size: 18px;
    border-bottom-left-radius: 10px;
}

@keyframes effect-show {
    0% {
        transform: translateX(100vh);
        border-radius: 300px;
    }
    90% {
        transform: translateX(10vh);
        border-radius: 10px;
    }
}

.wrapper-inform-classic-style {
    z-index: 9752;
    top: 100px;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 300px;
}

.wrap-text-video {
    position: absolute;
}

.text-block-inform-classic-style {
    text-align: center;
    padding: 15px;
    color: white;
    user-select: contain !important;
    -ms-user-select: contain !important;
    -moz-user-select: contain !important;
    -khtml-user-select: contain !important;
    -webkit-user-select: contain !important;
}

.text-to-copy-wrapper {
    width: 290px;
    display: flex;
    padding: 2px;
    word-break: break-all;
    background: rgba(247, 247, 248, 0.61);
    font-family: Roboto;
    -ms-user-select: all;
    -moz-user-select: all;
    -webkit-user-select: all;
    user-select: all;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.msg {
    font-size: 8vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    align-items: center;
    color: #FEFEFE;
    background-color: #1184F0;
}

.features {
    font-size: 1rem;
    text-transform: uppercase;
}

.features li {
    width: 100%;
    text-align: center;
    padding: 0.25em;
}

.mini-avatar {
    position: absolute;
}

.vol-player {
    height: 50px;
    line-height: 50px;
    text-align: center;
}

.inner {
    color: rgba(220, 220, 220, 0.87);
    height: 50px;
    line-height: 50px;
    text-align: center;
}

.drawer-list h4 {
    color: white;
}

.drawer-list {
    text-align: center;
    z-index: 57;
    transform: translate(100vw, 0);
    -ms-transform: translatex(-100vw);
    box-sizing: border-box;
    pointer-events: none;
}

.drawer-list ul {
    margin: 0;
    padding: 0;
    pointer-events: auto;
}

.drawer-list li {
    list-style: none;
    text-transform: uppercase;
    pointer-events: auto;
    white-space: nowrap;
    box-sizing: border-box;
}

.drawer-list li:last-child {
    margin-bottom: 2em;
}

.drawer-list li a {
    text-decoration: none;
    color: #FEFEFE;
    text-align: center;
    display: block;
    padding: 1rem;
    font-size: calc(24px - .5vw);
}

@media (min-width: 768px) {
    .drawer-list li a {
        text-align: right;
        padding: 0.5rem;
    }
}

.drawer-list li a:hover {
    cursor: pointer;
    background-color: #88c2f8;
    background-color: rgba(17, 132, 240, 0.5);
}

.hamburger {
}

input.hamburger {
    z-index: 57;
    display: none;
}

input.hamburger:checked ~ .drawer-list {
    transform: translatex(0);
    border-bottom-left-radius: 0;
}

input.hamburger:checked ~ .drawer-list li {
    transform: translatex(0);
}

input.hamburger:checked ~ label > i {
    background-color: transparent;
    transform: rotate(90deg);
}

input.hamburger:checked ~ label > i:before {
    transform: translate(-50%, -50%) rotate(315deg);
}

input.hamburger:checked ~ label > i:after {
    transform: translate(-50%, -50%) rotate(-315deg);
}

input.hamburger:checked ~ label close {
    color: #FEFEFE;
    width: 100%;
}

input.hamburger:checked ~ label open {
    color: rgba(0, 0, 0, 0);
    width: 0;
}

label.hamburger {
    position: fixed;
    right: 15px;
    top: 10px;
    z-index: 99;
    display: block;
    height: 40px;
    width: 20px;
}

label.hamburger:hover {
    cursor: pointer;
}

label.hamburger text close, label.hamburger text open {
    text-transform: uppercase;
    font-size: 0.8em;
    align-text: center;
    position: absolute;
    transform: translateY(50px);
    text-align: center;
    overflow: hidden;
}

label.hamburger text close {
    color: rgb(243, 241, 241);
    right: 0;
    width: 0;
}

label.hamburger text open {
    color: #f3f1f1;
    width: 100%;
}

label.hamburger > i {
    position: absolute;
    width: 100%;
    height: 2px;
    top: 50%;
    background-color: #f3f1f1;
    pointer-events: auto;
    transition-duration: 0.35s;
    transition-delay: 0.35s;
}

label.hamburger > i:before, label.hamburger > i:after {
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    left: 50%;
    background-color: #f3f1f1;
    content: "";
    transition: transform 0.35s;
    transform-origin: 50% 50%;
}

label.hamburger > i:before {
    transform: translate(-50%, -14px);
}

label.hamburger > i:after {
    transform: translate(-50%, 14px);
}

.icon {
    display: inline-block;
    width: 5vw;
    height: 4vw;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
}

.wrapper-img-in {
    position: absolute;
    background: transparent;
    cursor: move;
    z-index: 100;
}

.wrapper-img-out {
    position: absolute;
    background: transparent;
    cursor: nwse-resize;
    border: 2px dashed black;
    z-index: 100;
}

.inform-wrapper-user-name {
    position: absolute;
    z-index: 68;
    background: rgba(27, 58, 11, 0.45);
    border: 2px solid white;
    right: 250px;
    text-align: center;
    width: 250px;
    height: 50px;
    animation: effect-show .4s linear;
}

.place-form-data-classic-style {
    z-index: 52;
    position: fixed;
    top: 0;
    right: 0;
    /*bottom: 0;*/
    /*left: 0;*/
    /*background: rgba(255, 255, 255, 0.6);*/
    background: radial-gradient(70% 95%, #544d5e, #4b4355);
    margin: auto;
    width: 100%;
    height: 100%;
}

.daily-item-interval {
    width: 50px;
    text-align: center;
    float: left;
}

.wrapper-form-data-classic-style {
    width: 500px;
    height: auto;
    border: 1px solid #000000;
    /*background: rgba(250, 251, 255, 0.9);*/
    padding: 3px;
    margin-left: auto;
    margin-right: auto;
}

.input-classic-style {
    display: flex;
    margin-bottom: 35px;
    width: 300px;
}

.input-classic-style input {
    border: 2px solid rgb(122, 142, 148);
    width: 100%;
    background-color: rgba(248, 249, 250, 0.81);
    color: black;
    outline: none;
}

.time-frame-input {
    border: none;
    background: none;

    outline: none;
}

.wrapper-btn-classic-style {
    display: block;
    text-align: center;
}

.error {
    border: 1px solid #aa512e;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
    min-height: 100vh;
    color: #fff;
    overflow-x: hidden;
}

.react-app {
    position: relative;
    min-height: 100vh;
}

.gr {
    background: green;
}

.rd {
    background: red;
}

.out-block-classic {
    position: absolute;
    width: 100%;
    z-index: 50;
    height: 100%;
}

.outer-any-frame {
    position: fixed;
    top: 0px;
    z-index: 50;
    width: 100%;
    height: 50%;
}

.outer-pic-frame {
    position: absolute;
    width: 100%;
    height: 50%;
    bottom: 0px;
}

.mess-edit-wrap {
    text-align: center;
    z-index: 49;
    width: 100%;
    height: 100%;
    top: 0;
    position: fixed;
    display: grid;
    background: linear-gradient(to bottom, rgb(17, 53, 110) 10%, rgb(56, 54, 57) 50%, rgb(0, 0, 0) 90%);
}

.edit-item {
    display: table-row;
}

.cell-item {
    display: table-cell;
}

.menu-item {
    background: rgb(17, 53, 110);
    padding: 2px;
    margin: 6px;
    color: rgba(209, 209, 209, 1);
    border-radius: 30px !important;
}

.wrapper-admin {
    z-index: 2000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgb(17, 53, 110) 10%, rgb(56, 54, 57) 50%, rgb(0, 0, 0) 90%);
    position: fixed;
}

.admin-panel {
    text-align: center;
    display: table;
    width: 100%;
    color: white;
}

.row-adm {
    display: table-row;
    border-bottom: 1px dashed #737373;
}

.cell-adm {
    display: table-cell;
    border-right: 1px dashed #737373;
    border-bottom: 1px dashed #737373;
}

.green {
    font-size: 8px;
    background: #178325;
    border-radius: 30px;
    padding: 5px;
}

.prod-msg-wrapper {
    padding: 3px;
    position: fixed;
    left: 0;
    z-index: 1000;
    width: 500px;
    background: #0d0328;
    color: white;
    overflow: scroll;
}

.prod-msg-wrapper div {
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.consumer-wrapper {
    width: 100%;
    height: 100px;
    position: fixed;
    bottom: 0;
    color: #b2b2b2;
    font-size: 24px;
    overflow: hidden;
    background: black;
    z-index: 100;
}

.button-air-mail {
    position: absolute;
    top: 50%;
    left: 60px;
    border-radius: 50%;
    height: 100px;
    transform: translate(-50%, -50%);
}

.button-air {
    position: absolute;
    top: 50%;
    left: 5px;
    border-radius: 50%;
    height: 100px;
    transform: translate(-50%, -50%);
}

.button-pause-air-wrap-outer {
    border-top: 2px dashed rgb(19, 39, 171);
    border-bottom: 2px dashed rgb(19, 39, 171);
    position: absolute;
    left: 0px;
    animation: wave infinite 2s;
    background-color: rgba(255, 255, 255, 0.3);
    height: 100px;
    /*transform: translate(-50%, -50%);*/
}

.button-air-wrap-outer {
    border-top: 2px dashed rgb(33, 75, 13);
    border-bottom: 2px dashed rgb(33, 75, 13);
    position: absolute;
    left: 0px;
    animation: wave infinite 2s;
    background-color: rgba(255, 255, 255, 0.3);
    height: 100px;
}

.button-air-wrap {
    position: absolute;
    top: 50%;
    left: 15px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    height: 100px;
    transform: translate(-50%, -50%);
}

.carousel-wrapper-air {
    height: 100px;
    position: relative;
    overflow: hidden;
}

.carousel-air {
    position: absolute;
    display: flex;
    top: 50%;
    transform: translateY(-50%);
}

.air-item {
    margin-right: 20px;
    position: relative;
    width: 300px;
    height: 50px;
    background: rgba(0, 96, 100, 0.96);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    animation: wave-shadow infinite 20s;
}

.air-item-icn {
    position: absolute;
    width: 30px;
    left: 2px;
    top: 50%;
    transform: translate(0, -50%);
}

.air-player-txt {
    position: absolute;
    top: 50%;
    left: 110px;
    max-width: 700px;
    min-width: 200px;
    overflow: hidden;
    text-align: center;
    transform: translate(0, -50%);
}

.air-item-txt {
    position: absolute;
    top: 50%;
    left: 35px;
    width: 250px;
    overflow: hidden;
    text-align: center;
    transform: translate(0, -50%);
}

/* #178325;*/
@keyframes wave-shadow {
    0% {
        box-shadow: 0px 10px 5px #9a8708;
    }
    10% {
        box-shadow: 1px 10px 10px #836d17;
    }
    20% {
        box-shadow: 2px 10px 5px #969407;
    }
    30% {
        box-shadow: 1px 10px 10px #bd3112;
    }
    50% {
        box-shadow: 0px 10px 5px #833417;
    }
    80% {
        box-shadow: 0px 2px 10px #834417;
    }
    100% {
        box-shadow: 1px 10px 5px #836a17;
    }
}

@keyframes wave {
    0% {
        width: 0;
        background-color: rgba(255, 255, 255, 0.3);
    }
    100% {
        width: 100%;
        background-color: rgba(255, 255, 255, 0.0);
    }
}

.consumer-ipt {
    width: 300px;
}

.consumer-txt {
    width: 300px;
}

#vid {
    position: absolute;
    width: 10px;
    height: 10px;
    left: -1000px;
}

.item-max-index {
    z-index: 99999 !important;
}

.item-max-index-fixed {
    position: fixed !important;
    z-index: 99999 !important;
}

.daily-planner-wrapper {
    width: 2210px;
    height: 100%;
    z-index: 100;
    overflow: hidden;
    position: relative;
    background: linear-gradient(to bottom, rgb(17, 53, 110) 10%, rgb(56, 54, 57) 50%, rgb(0, 0, 0) 90%);
}

.daily-planner-wrapper-week {
    position: absolute;
}

.daily-planner-wrapper-week canvas {
    position: absolute;
    z-index: 100;
    background: unset;
}

.wrapper-time-scale-classic {
    height: 30px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
}

.grid {
    display: inline-grid;
}

.off-line-user {
    text-shadow: none;
    height: 50px;
    background: linear-gradient(to left, rgb(23, 40, 65) 10%, rgba(23, 40, 65, 0.75) 50%, rgba(23, 40, 65, 0) 90%);
}

.on-line-user {
    text-shadow: none;
    height: 50px;
    background: linear-gradient(to left, rgb(3, 107, 3) 10%, rgba(3, 107, 3, 0.75) 50%, rgba(3, 107, 3, 0) 90%);
}

#audio-in-chat {
    display: none;
}

#shadow-text-input {
}

.wrap-attach-item {
    width: 100%;
    bottom: 100px;
    display: inline-table;
    position: fixed;
}

.wrapper-attachment-audio {
    width: 100px;
    overflow: hidden;
    color: #efefef;
    background: rgba(9, 10, 9, 0.72);
}

.name-audio {
    word-wrap: break-word;
    text-align: center;
    font-size: 0.9em;
}

.player-footer-bar-message {
    bottom: 50px;
    width: 100%;
    overflow: scroll;
}

.player-footer-bar {
    position: absolute;
    bottom: 50px;
    width: 100%;
    overflow: scroll;
    display: inline-flex
}


.out-block {
    width: 100%;
    position: relative;
    text-align: center;
    color: white;
    background: rgba(0, 0, 0, 0.5);
}

.call-8 {
    position: relative;
    top: 210px;
    width: 100%;
}

.carousel-wrapper-caller-style {
    overflow: hidden;
    position: relative;
    margin-top: 100px;
    z-index: 50;
    width: 100%;
    padding: 0;
}


.wrap-video {
    z-index: 20000;
    width: 200px;
    position: fixed;
    bottom: 5px;
}

video {
    z-index: 1000;
    position: relative;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000;

    /* Оптимизация рендеринга */
    will-change: transform;
    contain: content;

    /* Оптимизация памяти */
    image-rendering: -webkit-optimize-contrast;

    /* Фикс для iOS */
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

.video {
    width: 300px;
    z-index: 1000;
    position: relative;
}

.time-scale-classic {
    height: 30px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.23) 20%, rgba(255, 255, 255, 0.24) 50%, rgba(255, 255, 255, 0.71) 90%);
}

input:focus {
    font-size: 30px;
    font-family: Bookman Old Style;
}

.user-name-message {
    color: rgba(245, 245, 245, 0.98);
    font-size: 12px;
    font-weight: bolder;
    font-family: Bookman Old Style;
}

.date-message {
    color: rgba(245, 245, 245, 0.98);
    font-size: 12px;
    margin-bottom: 10px;
    font-family: Bookman Old Style;
}

.wrap-analyser {
    position: relative;
    z-index: 0;
    margin-left: -450px;
}

#analyser {
    position: absolute;
    z-index: 1;
}


.timer {
    z-index: 110;
    padding: 0;
}

.wrap-connect {
    z-index: 110;
    display: inline-flex;
}

.svg-timer-containere {
    box-shadow: 10px 0 10px rgba(45, 93, 196, 0.43);
    stroke-width: 10px;
}

#audio-file {
    display: none;
}

.pad-stop-track {
    z-index: 99;
    float: left;
    margin: 6px;
    border-radius: 10px;
    font-size: 0.92em;
    font-family: Bookman Old Style;
    text-align: center;
    line-height: normal;
    width: 100px;
    background: rgba(0, 79, 227, 0.72);
    border: 2px double white;
}

.yellow {
    background: rgba(255, 0, 0, 0.47);
}

.pad-play-track {
    z-index: 99;
    float: left;
    margin: 6px;
    font-size: 0.92em;
    font-family: Bookman Old Style;
    text-align: center;
    line-height: normal;
    border-radius: 10px;
    width: 100px;
    background: rgba(21, 131, 4, 0.75);
    border: 2px double white;
}

#minuts, #seconds {
    stroke: rgb(247, 247, 248);
    stroke-width: 3px;
    transition: stroke-dashoffset .3s ease;
    -moz-transition: stroke-dashoffset .3s ease;
    -ms-transition: stroke-dashoffset .3s ease;
    -o-transition: stroke-dashoffset .3s ease;
}

#start-record {
    border-radius: 30px;
    background: rgba(103, 0, 0, 0.57);

}

#stop-record {
    border-radius: 30px;
    background: rgba(9, 10, 9, 0.54);
}

.info-wrap-record-status {
    background: red;
}

#miliseconds {
    stroke: rgba(9, 10, 9, 0.72);
    stroke-width: 1px;
}

.main-video {
    display: none;
}

.adm-btn {
    border-radius: 10px;
    color: black;
    float: right;
    margin-right: 8px;
    position: relative;
    padding: 10px;
    background: linear-gradient(to top, rgb(255, 255, 255) 20%, rgba(247, 247, 248, 0.57) 50%, rgb(247, 247, 248) 80%);
}

.tg-btn {
    z-index: 1000;
    margin-top: 15px;
    width: 50px;
    border-radius: 10px;
    color: black;
    float: right;
    margin-right: 8px;
    position: relative;
    padding: 10px;
    background: linear-gradient(to top, rgb(255, 255, 255) 20%, rgba(247, 247, 248, 0.57) 50%, rgb(247, 247, 248) 80%);

}

.apk-btn {
    z-index: 1000;
    margin-top: 50px;
    width: 50px;
    border-radius: 10px;
    color: black;
    float: right;
    position: relative;
    padding: 10px;
    background: linear-gradient(to top, rgb(255, 255, 255) 20%, rgba(247, 247, 248, 0.57) 50%, rgb(247, 247, 248) 80%);
}

.home-btn {
    z-index: 100;
    margin-right: 15px;
    margin-left: 10px;
    position: relative;
    border-radius: 10px;
    padding: 2px;
    background: linear-gradient(to top, rgb(255, 255, 255) 20%, rgba(247, 247, 248, 0.57) 50%, rgb(247, 247, 248) 80%);
    box-shadow: 2px 2px 2px black;
}

.more-btn {
    display: none;
    z-index: 10;
    top: 5px;
    left: 25px;
    position: fixed;
    border-radius: 10px;
    padding: 2px;
    background: linear-gradient(to top, rgb(255, 255, 255) 20%, rgba(247, 247, 248, 0.57) 50%, rgb(247, 247, 248) 80%);
    box-shadow: 2px 2px 2px black;
}

.react-app {
    background-repeat: repeat;
    width: 100%;
    height: 100%;
    /*display: grid;*/
    position: absolute;
}

.login-icn-style {
    position: absolute;
    right: 15px;
    top: 5px;
    z-index: 15;
    padding: 7px;
}

.wrapper-public-performance-uno {
    border-bottom: none;
    margin-bottom: 30px;
    position: absolute;
    z-index: 40;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

.left span {
    position: absolute;
}

.left div {
}

.wrapper-background {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.47) 20%, rgba(247, 247, 248, 0.37) 50%, rgba(247, 247, 248, 0.38) 80%);
}

.wrapper-public-performance {
    border-bottom: none;
    margin-top: 70px;
    position: relative;
    margin-right: auto;
    margin-left: auto;
}

.r-icn {
    right: 5px;
}

.l-icn {
    left: 5px;
}

.menu-paintApp-classic-style div {

}

.panel-control-invite {
    position: fixed;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    border: 3px solid rgba(248, 249, 250, 0.43);
    border-radius: 15px;
}

.icn {
    padding: 15px;
    border-radius: 200px;
}

.icn-btn {
    bottom: 5px;
    padding: 3px;
    border: 1px dashed rgba(255, 255, 255, 0.01);
    border-radius: 10px;
}

.count-like {
    position: absolute;
    bottom: 0px;
}

.count-participant {
    position: relative;
    float: right;
}

.up-radius {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background: linear-gradient(to top, rgb(247, 247, 248) 20%, rgba(247, 247, 248, 0.66) 50%, rgba(255, 255, 255, 0.3) 80%);
}

.down-radius {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.3) 20%, rgba(247, 247, 248, 0.66) 50%, rgb(247, 247, 248) 80%);
}

.point-description {
    width: 100%;
    float: left;
    position: relative;
}

.btn-cl {
    width: 130px;
    font-weight: bolder;
    text-align: center;
    height: 30px;
    font-size: 21px;
    border: 1px solid #f3f1f1;
    color: white;
    position: relative;
    margin-right: auto;
    margin-left: auto;
    background: linear-gradient(to top, rgba(25, 105, 196, 0.99) 20%, rgba(25, 73, 196, 0.99) 50%, rgba(25, 105, 196, 0.99) 80%);;
}

.wrap-btn {
    width: 100%;
    height: 30px;
    position: absolute;
    display: inline-flex;
    bottom: 15px;
}

.footer-description {
    text-align: center;
    font-size: 18px;
    padding-top: 50px;
    padding-bottom: 80px;
    padding-left: 10px;
    padding-right: 10px;
    text-shadow: 0px 0px 20px black;
    color: rgba(235, 235, 235, 0.9);
    position: relative;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 20%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.8) 80%);
}


/*.form-fixed {*/
/*    position: fixed;*/
/*    bottom: 0px;*/
/*    left: 0px;*/
/*    overflow: scroll;*/
/*    z-index: 21000;*/
/*    background: rgb(145, 150, 155);*/
/*}*/

.form-fixed {
    position: fixed;
    bottom: 0px;
    left: 0px;
    overflow: auto;
    z-index: 21000;
    width: 100%;
    background: linear-gradient(135deg, #343e41 0%, #7a8e94 100%);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin: 20px auto;
}

.form-fixed h1 {
    text-align: center;
    margin: 0 0 30px 0;
    color: #2c3e50;
    font-size: 28px;
    font-weight: 600;
    background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.event-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Контейнер для даты (год, месяц, день) */
.daily-item-year,
.daily-item-month,
.daily-item-day {
    position: relative;
    display: inline-block;
    vertical-align: top;
}

/* Контейнер для времени начала и продолжительности */
.daily-item-hour,
.daily-item-min {
    position: relative;
    display: inline-block;
    vertical-align: top;
}

/* Альтернативный вариант с flexbox для более точного контроля */
.date-row {
    display: flex;
    gap: 5px;
    align-items: center;
}

.time-row {
    display: flex;
    gap: 5px;
    align-items: center;
}

/* Если хотите использовать flexbox, добавьте эти классы в HTML */
/*.daily-item {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    gap: 8px;*/
/*}*/

.daily-item .label {
    font-weight: 500;
    color: #2c3e50;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.daily-item input,
.daily-item-description textarea {
    padding: 15px 20px;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    font-size: 16px;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.daily-item input:focus,
.daily-item-description textarea:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.daily-item input::placeholder,
.daily-item-description textarea::placeholder {
    color: #adb5bd;
}

.daily-item-description textarea {
    min-height: 120px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
}

.wrapper-btn-classic-style {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 10px;
}

.btn-cover {
    padding: 15px 30px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(39, 174, 96, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.3) inset;
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary {
    background: linear-gradient(135deg, #95a5a6 0%, #bdc3c7 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(149, 165, 166, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(149, 165, 166, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.3) inset;
}

/* Анимация для кнопок */
.btn-cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent
    );
    transition: left 0.5s ease;
}

.btn-cover:hover::before {
    left: 100%;
}

/* Адаптивность */
@media (max-width: 600px) {
    .form-fixed {
        padding: 30px 20px;
        width: 95%;
    }

    .wrapper-btn-classic-style {
        flex-direction: column;
    }

    .btn-cover {
        width: 100%;
    }
}

/* Валидация стилей */
.daily-item input:invalid {
    border-color: #e74c3c;
}

.daily-item input:valid {
    border-color: #ffffff;
}

/*end*/
.daily-form {
    width: 450px;
    font-size: 30px;
}

.daily-item {
    display: flex;
    width: 450px;
    text-align: left;
    color: #13131a;
}

.daily-item input {
    width: 200px;
    margin: 5px;
    float: right;
    background: unset;
}

.daily-item h4 {
    float: left;
    margin-right: 15px;
}

.daily-item-hour h4 {
    float: left;
    margin-right: 15px;
}

.daily-item-min h4 {
    float: left;
    margin-right: 15px;
}

.daily-item-year-over {
    display: flex;
    width: 300px;
    float: left;
}

/*.daily-item-year {*/
/*    display: flex;*/
/*    width: 160px;*/
/*    float: left;*/
/*}*/

/*.daily-item-month {*/
/*    display: flex;*/
/*    width: 60px;*/
/*    float: left;*/
/*}*/

/*.daily-item-day {*/
/*    display: flex;*/
/*    width: 60px;*/
/*    float: left;*/
/*}*/

.daily-item-description textarea {
    width: 445px;
    height: 117px;
    border: 1px solid rgba(243, 241, 241, 0.31);
    background: unset;
}

.daily-item-year h4 {
    float: left;
    margin-right: 10px;
}

.daily-item-year-over h4 {
    float: left;
    margin-right: 10px;
}

.daily-item-month h4 {
    float: left;
}

.daily-item-day h4 {
    float: left;
}

.daily-item-year-over input {
    width: 80px;
    background: unset;
}

.daily-item-year input {
    width: 80px;
    background: unset;
}

.daily-item-month input {
    width: 50px;
    background: unset;
}

.daily-item-day input {
    width: 50px;
    background: unset;
}

/*.daily-item-hour {*/
/*    width-min: 300px;*/
/*    width-max: 400px;*/
/*    display: flex;*/
/*    margin: 5px;*/
/*    float: left;*/
/*}*/

/*.daily-item-min {*/
/*    width: 110px;*/
/*    display: flex;*/
/*    margin: 5px;*/
/*    text-align: left;*/
/*    float: left;*/
/*}*/

.daily-item-hour input {
    width: 50px;
    background: unset;
}

.daily-item-min input {
    width: 50px;
    background: unset;
}

.daily-item-event {
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    font-size: 2.8em;
    left: 50%;

}

.status-connect {
    position: fixed;
    top: 1px;
    right: 1px;
    z-index: 111;
}

.panel-performance {
    display: flex;
    height: 70px;
    width: 100%;
}


.control-caller-panel {
    z-index: 1100;
    position: fixed;
    border-radius: 30px;
    text-align: center;
    max-width: 450px;
    min-width: 380px;
    top: 5px;
    left: 50%;
    font-weight: bolder;
    color: white;
    transform: translateX(-50%);
    box-shadow: 2px 3px 13px #0a0027;
    border: 1px solid rgba(243, 241, 241, 0.21);
    background: rgba(0, 0, 0, 0.24);
}

.caller-panel {
    width: 100%;
    height: 100%;
    z-index: 99;
    background: rgba(28, 26, 26, 0.13);
    position: fixed;
}


.inline {
    width: 100%;
    display: inline-flex;
}


input[type='text'],
input[type='number'],
input {
    font-size: 30px !important;
}

.panel-performance div {
    margin-left: auto;
    margin-right: auto;
}

.abs {
    position: absolute;
}

.main-menu-wrapper-classic-style {
    position: fixed;
    text-shadow: 1px 1px 1px rgba(247, 247, 248, 0.60), 1px 1px 1px rgba(247, 247, 248, 0.60), -1px -1px -1px rgba(247, 247, 248, 0.60), -1px -1px 1px rgba(247, 247, 248, 0.60);
    right: 0px;
    z-index: 900;
    color: white;
    display: flex;
    height: 10px;
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
}

.avatar-classic-place {
    position: absolute;
}

.user-name-place {
    border-bottom: 1px solid rgba(10, 0, 39, 0.67);
    color: #efefef;
    font-weight: bolder;
}

@media screen and (min-width: 1000px) {
    .chat-place-classic-style {
        width: 55%;
        height: 100%;
        display: block;
        font-family: Dialog;
        font-size: 1.4em;
        margin-left: 36px;
        border: 1px solid rgba(122, 142, 148, 0.66);
    }

    .player-classic-audio {
        position: relative;
        width: 450px;
        min-width: 450px;
        overflow: hidden;
        float: left;
        margin: 5px;
        color: rgba(255, 255, 255, 0.55);
        border-radius: 30px;
        display: table-caption;
        z-index: 800;
        box-shadow: -1px 1px 10px rgba(9, 10, 9, 0.8);
        background: linear-gradient(to bottom, rgb(17 53 110) 10%, rgb(23 74 157) 50%, rgb(13 77 179) 90%);
        border: 1px solid rgba(255, 255, 255, 0.36);
    }
}

@media screen and (max-width: 1000px) {
    .chat-place-classic-style {
        width: 70%;
        height: 100%;
        display: block;
        font-size: 1.4em;
        margin-left: 6px;
        border: 1px solid rgba(122, 142, 148, 0.66);
    }

    .player-classic-audio {
        position: relative;
        width: 300px;
        min-width: 300px;
        float: left;
        overflow: hidden;
        color: rgba(255, 255, 255, 0.55);
        margin: 5px;
        border-radius: 30px;
        display: table-caption;
        box-shadow: -1px 1px 10px rgba(9, 10, 9, 0.8);
        z-index: 800;
        background: linear-gradient(to bottom, rgb(17 53 110) 10%, rgb(23 74 157) 50%, rgb(13 77 179) 90%);
        border: 1px solid rgba(255, 255, 255, 0.36);
    }

    .c-hamburger {
        display: block;
        position: relative;
        overflow: hidden;
        margin: 0;
        padding: 0;
        width: 50px;
        height: 50px;
        font-size: 0;
        text-indent: -9999px;
        appearance: none;
        box-shadow: none;
        border-radius: 50px;
        border: none;
        cursor: pointer;
        transition: background 0.3s;
    }

    .c-hamburger:focus {
        outline: none;
    }

    .c-hamburger span {
        display: block;
        position: absolute;
        top: 22px;
        left: 10px;
        right: 10px;
        height: 5px;
        background: rgba(0, 0, 0, 0.98);
    }

    .c-hamburger span::before,
    .c-hamburger span::after {
        position: absolute;
        display: block;
        left: 0;
        width: 100%;
        height: 8px;
        background-color: rgba(0, 0, 0, 0.98);
        content: "";
    }

    .c-hamburger span::before {
        top: -10px;
    }

    .c-hamburger span::after {
        bottom: -10px;
    }

    .c-hamburger--htx {
        background-color: rgba(245, 255, 255, 0);
    }

    .c-hamburger--htx span {
        transition: background 0s 0.3s;
    }

    .c-hamburger--htx span::before,
    .c-hamburger--htx span::after {
        transition-duration: 0.3s, 0.3s;
        transition-delay: 0.3s, 0s;
    }

    .c-hamburger--htx span::before {
        transition-property: top, transform;
    }

    .c-hamburger--htx span::after {
        transition-property: bottom, transform;
    }

    .c-hamburger--htx.is-active {
        background-color: rgba(4, 255, 67, 0.57);
    }

    .c-hamburger--htx.is-active span {
        background: none;
    }

    .c-hamburger--htx.is-active span::before {
        top: 0;
        transform: rotate(45deg);
    }

    .c-hamburger--htx.is-active span::after {
        bottom: 0;
        transform: rotate(-45deg);
    }

    .c-hamburger--htx.is-active span::before,
    .c-hamburger--htx.is-active span::after {
        transition-delay: 0s, 0.3s;
    }
}

.player-classic {
    z-index: 100;
    position: absolute;
    display: flex;
}

.classic-wrapper-invitation {
    z-index: 300;
}

.classic-wrapper-menu-invitation {
    display: flex;
    background: linear-gradient(to bottom, rgb(17, 53, 110) 10%, rgb(23, 74, 157) 50%, rgb(13, 77, 179) 90%);
}

.hide {
    visibility: hidden;
}

.c-hamburger-z {
    display: block;
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    width: 50px;
    height: 50px;
    font-size: 0;
    text-indent: -9999px;
    appearance: none;
    box-shadow: none;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
}

.c-hamburger-z:focus {
    outline: none;
}

.c-hamburger-z span {
    display: block;
    position: absolute;
    top: 22px;
    left: 10px;
    right: 10px;
    height: 5px;
    background: rgba(0, 0, 0, 0.98);
}

.c-hamburger-z span::before,
.c-hamburger-z span::after {
    position: absolute;
    display: block;
    left: 0;
    width: 100%;
    height: 8px;
    background-color: rgba(0, 0, 0, 0.98);
    content: "";
}

.c-hamburger-z span::before {
    top: -10px;
}

.c-hamburger-z span::after {
    bottom: -10px;
}

.c-hamburger-z--htx {
    background-color: rgb(245, 255, 255);
}

.c-hamburger-z--htx span {
    transition: background 0s 0.3s;
}

.c-hamburger-z--htx span::before,
.c-hamburger-z--htx span::after {
    transition-duration: 0.3s, 0.3s;
    transition-delay: 0.3s, 0s;
}

.c-hamburger-z--htx span::before {
    transition-property: top, transform;
}

.c-hamburger-z--htx span::after {
    transition-property: bottom, transform;
}

/* состояние active при открытом меню  */
.c-hamburger-z--htx.is-active {
    z-index: 100;
    background-color: rgba(255, 255, 255, 1);
}

.c-hamburger-z--htx.is-active span {
    background: none;
}

.c-hamburger-z--htx.is-active span::before {
    top: 0;
    transform: rotate(45deg);
}

.c-hamburger-z--htx.is-active span::after {
    bottom: 0;
    transform: rotate(-45deg);
}

.c-hamburger-z--htx.is-active span::before,
.c-hamburger-z--htx.is-active span::after {
    transition-delay: 0s, 0.3s;
}

.figure-static-classic {
    overflow: hidden;
    position: absolute;
}

.figure-dynamic-classic {
    overflow: hidden;
    position: absolute;
}

.figure-font-classic {
    overflow: hidden;
    position: absolute;
}

.paint-classic-style {
    box-shadow: -1px -3px 4px black;
    margin-top: 70px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.chat-paint-classic-style {
    box-shadow: -1px -3px 4px black;
    z-index: 47;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 600px) {
    .chat-paint-classic-style {
        box-shadow: -1px -3px 4px black;
        z-index: 47;
        position: relative;
        margin-left: 3px;
    }
}

.paint-global-wrapper-classic-style {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.chat-draw-place-wrapper-classic-style {
    position: fixed;
    display: flex;
    bottom: 0px;
    height: 98px;
    z-index: 46;
    background: linear-gradient(to right, rgb(247, 247, 248) 20%, rgb(17, 53, 110) 50%, rgba(247, 247, 248, 0) 90%);
    width: 100%
}

.main-animation {
    position: relative;
    margin-right: auto;
    margin-left: auto;
}

.cht-wrap {
    background-size: cover;
    filter: blur(8px);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
}

.fon-wrap {
    background-size: cover;
    filter: blur(3px);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
}

.wrapper-main-animation {
    background-size: cover;
    width: 100%;
    height: 430px;
    overflow: hidden;
    position: relative;
}

.main-animation-container {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.cnv-main-animation {
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.head {
    width: 300px;
    border: 5px solid rgba(2, 7, 1, 0.72);
}

.figure-wrapper-classic-style {
    background: transparent;
    margin-right: auto;
    margin-left: auto;
    /*position: absolute;*/
    /*!*left: 50%;*!*/
    /*!*transform: translateX(-50%);*!*/
    /*!*top: 50%;*!*/
    /*!*transform: translateY(-50%);*!*/
}

.carousel-wrapper-classic-style h2 {
    position: absolute;
    top: 100px;
    font-size: 2.8em;
    left: 50%;
    transform: translateX(-50%);
    text-shadow: 2px 1px 3px rgba(247, 247, 248, 0.55), 1px 3px 3px rgba(247, 247, 248, 0.57), -1px -1px 3px rgba(247, 247, 248, 0.53), -1px -2px 3px rgba(247, 247, 248, 0.35);
}

.out-block-video {
    position: relative;
}

/*start*/


.content-video {
    display: flex; /* Включаем флекс-контейнер */
    flex-wrap: wrap; /* Разрешаем перенос на новую строку */
    width: 100vw;
    height: 100vh; /* Контейнер на весь экран */
    box-sizing: border-box;
}

.wrap-video-web-cam {
    flex: 1 1 auto; /* Элементы растягиваются и сжимаются */
    min-width: 400px; /* Минимальная ширина блока */
    min-height: 400px; /* Минимальная высота блока (16:9) */
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0;
}

.name-participant {
    width: 180px;
    text-align: center;
}


.line-box {
    width: 300px;
    display: contents;
}

.wrap-noise {
    display: grid;
    position: relative;
}


@media (max-width: 768px) {
    .grid-box video {
        max-width: 330px;
        object-fit: cover;
        -o-object-fit: cover;
    }
}

@media (min-width: 768px) {
    .grid-box video {
        max-width: 400px;
        object-fit: cover;
        -o-object-fit: cover;
    }
}

@media (min-width: 600px) {
    .noise {
        position: absolute;
        top: -10px;
        width: 34px;
        height: 34px;
        left: 2px;
        z-index: 90;
    }

    .info-participant {
        z-index: 1000;
    }

    .grid-box {
        display: inline-grid;
        text-align: center;
        place-items: anchor-center;
    }

    .content-participant {
        color: white;
        font-size: 1.8em;
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100vh; /* Контейнер на весь экран */
        position: absolute;
        background: rgb(35, 40, 44);
        z-index: 100;
    }

    .connected {
        flex: 1 1 auto;
        min-width: 300px;
        min-height: 300px;
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgb(12, 26, 3);
        text-align: center;
        z-index: 100;
    }

    .offer {
        flex: 1 1 auto;
        min-width: 300px;
        min-height: 300px;
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgb(4, 29, 47);
        text-align: center;
        z-index: 100;
    }

    .wrap-participant {
        display: flex; /* Включаем флекс-контейнер */
        flex-wrap: wrap; /* Разрешаем перенос на новую строку */
        width: 100vw;
        height: 100vh; /* Контейнер на весь экран */
        box-sizing: border-box;
        z-index: 100;
    }
}

.wrapper-message-data .player-classic-audio {
    margin-left: auto !important;
    margin-right: auto !important;
}

.wrapper-message-data .text-value {
    width: 100% !important;
    text-align: center;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 600px) {
    .noise {
        position: absolute;
        top: -15px;
        width: 34px;
        height: 34px;
        left: 2px;
        z-index: 90;
    }

    .info-participant {
        position: absolute;
        bottom: 5px;
        z-index: 1000;
    }

    .grid-box {
        position: relative;
        background: #1a1a1a;
        border-radius: 8px;
        overflow: hidden;
        align-items: center;
        justify-content: center;
    }

    .grid-box video {
        width: 100%;
        height: 100%;
        object-fit: cover; /* или contain в зависимости от потребностей */
        object-position: center;
        -o-object-fit: cover;
    }

    .content-participant {
        color: white;
        font-size: 1.2em;
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100vh; /* Контейнер на весь экран */
        position: absolute;
        background: rgb(35, 40, 44);
        z-index: 100;
    }

    .connected {
        min-height: 180px;
        min-width: 180px;
        flex-direction: column-reverse;
        text-align: center;
        align-items: center;
        border: 1px solid #ccc;
        display: flex;
        background: rgb(12, 26, 3);
        z-index: 100;
    }

    .offer {
        min-height: 180px;
        min-width: 180px;
        flex-direction: column-reverse;
        text-align: center;
        align-items: center;
        border: 1px solid #ccc;
        display: flex;
        background: rgb(4, 29, 47);
        z-index: 100;
    }

    .wrap-participant {
        grid-template-columns: 1fr;
        display: grid;
        width: 100vw;
        height: 100vh;
    }

    .wrap-video-web-cam {
        min-height: 60px;
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
    }

    .wrap-video-web-cam .avatar {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
        margin-right: 15px;
        margin-bottom: 0;
    }

    h1 {
        font-size: 1.8rem;
    }

    .wrap-video-web-cam-test-hide {
        /*position: relative;*/
        /*z-index: 20000;*/
        flex: 1 1 auto; /* Элементы растягиваются и сжимаются */
        min-width: 240px; /* Минимальная ширина блока */
        min-height: 135px; /* Минимальная высота блока (16:9) */
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f0f0f0;
    }

    /*.wrap-participant div {*/
    /*    position: relative;*/
    /*}*/
    .wrap-participant:has(.offer:only-child) {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }

    /* 3 участника - специальное расположение */
    .wrap-participant:has(.offer:nth-child(2):last-child) {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .wrap-participant:has(.offer:nth-child(3):last-child) {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .wrap-participant:has(.offer:nth-child(4):last-child) {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .wrap-participant:has(.offer:nth-child(n+4):last-child) {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
    }

    .wrap-participant:has(.connected:only-child) {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }

    /* 3 участника - специальное расположение */
    .wrap-participant:has(.connected:nth-child(2):last-child) {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .wrap-participant:has(.connected:nth-child(3):last-child) {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .wrap-participant:has(.connected:nth-child(4):last-child) {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .wrap-participant:has(.connected:nth-child(n+4):last-child) {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
    }
}

.wrap-video-web-cam-test-hide {
    flex: 1 1 auto; /* Элементы растягиваются и сжимаются */
    min-width: 240px; /* Минимальная ширина блока */
    min-height: 135px; /* Минимальная высота блока (16:9) */
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0;
}


.content-video-test-hide {
    /*display: flex;*/
    display: flex; /* Включаем флекс-контейнер */
    flex-wrap: wrap; /* Разрешаем перенос на новую строку */
    width: 100vw;
    height: 100vh; /* Контейнер на весь экран */
    box-sizing: border-box;
}

.video-carousel-wrapper-classic-style {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

.video-conference-place {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

.carousel-wrapper-main {
    position: relative;
    height: 300px;
    z-index: 50;
    overflow: hidden;
    padding: 0;
    background: linear-gradient(to bottom, rgba(9, 10, 9, 0.18) 10%, rgba(9, 10, 9, 0.55) 50%, rgba(0, 0, 0, 0.5) 90%);
}

.carousel-wrapper-classic-style {
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 50;
    overflow: hidden;
    padding: 0;
    background: linear-gradient(to bottom, rgba(9, 10, 9, 0.18) 10%, rgba(9, 10, 9, 0.55) 50%, rgb(9, 10, 9) 90%);
}

.carousel-wrapper-layer-factory {
    display: flex;
    position: fixed;
    height: 25%;
    z-index: 50;
    width: 100%;
    overflow: hidden;
    bottom: 70px;
    padding: 10px;
    /*background: rgba(105,105,105,0.4);*/
    background: linear-gradient(to bottom, rgba(134, 143, 144, 0.13) 20%, rgba(69, 69, 69, 0.16) 50%, rgba(59, 58, 68, 0.09) 80%);
}

.carousel-wrapper-animate-factory {
    display: flex;
    position: relative;
    height: 100%;
    z-index: 51;
    overflow: hidden;
    width: 100%;
    padding: 0;
    background: linear-gradient(to bottom, rgb(134, 143, 144) 20%, rgb(69, 69, 69) 50%, rgb(59, 58, 68) 80%);
}

.carousel-wrapper-animate-factory-time-frame {
    display: flex;
    position: relative;
    height: 100%;
    z-index: 51;
    overflow: hidden;
    width: 100%;
    padding: 0;
    background: linear-gradient(to top, rgb(167, 167, 167) 20%, rgb(79, 79, 82) 50%, rgb(255, 255, 255) 80%);
}

.carousel-body-classic-style {
    position: absolute;
    display: flex;
    top: 50%;
    transform: translateY(-50%);
}


.left-carousel-button-classic-style {
    cursor: pointer;
    cursor: pointer;
    height: 50px;
    position: absolute;
    width: 50px;
    background: rgba(19, 10, 44, 0.8);
    border-radius: 50px;
    left: 0px;
    background: black;
    z-index: 1952;
    top: 50%;
}

.right-carousel-button-classic-style {
    cursor: pointer;
    height: 50px;
    width: 50px;
    background: rgba(19, 10, 44, 0.8);
    border-radius: 50px;
    position: absolute;
    right: 0px;
    z-index: 1952;
    top: 50%;
}

.button-carousel-classic-style {
    pointer-events: none;
}

.carousel-item {
    position: relative;
    border: 2px solid rgba(122, 142, 148, 0.22);
    height: 300px;
    width: 300px;
}

.select-item {
    border: 2px dashed #3a8aac;
}

.button-choose-classic-style {
    cursor: pointer;
    margin-left: 30px;
    float: left;
    z-index: 56;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.78);
}

.button-del-classic-style {
    cursor: pointer;
    margin-right: 30px;
    float: right;
    z-index: 56;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.78);
}

.wrapper-choose-figure-classic-style {
    height: 300px;
    width: auto;
    margin: 15px;
}

.wrapper-choose-figure-classic-style h1 {
    margin-top: -90px;
    text-shadow: 1px 1px 1px rgb(9, 10, 9), 1px 1px 1px rgb(9, 10, 9), -1px -1px 1px rgb(9, 10, 9), -1px -1px 1px rgb(9, 10, 9);
    position: relative;
}

.wrapper-choose-figure-classic-style h4 {
    margin-top: 5px;
    color: black;
    text-shadow: 1px 1px 5px rgb(243, 241, 241), 1px 1px 5px rgb(243, 241, 241), -1px -1px 5px rgb(243, 241, 241), -1px -1px 5px rgb(243, 241, 241);
    position: relative;
}

.out-block h2 {
    margin-bottom: 15px;
    text-shadow: 1px 0px 10px rgb(0, 0, 0), -2px 1px 10px rgb(0, 0, 0), -3px -2px 10px rgb(0, 0, 0), 3px -2px 10px rgb(0, 0, 0);
}

.wrapper-choose-animate-classic-style {
    width: auto;
}

.out-block-font {
    position: fixed;
    bottom: 20px;
    width: 100%;
    height: 200px;
}

.font-factory-carousel-classic-style {
    display: flex;
    position: relative;
    overflow: hidden;
    height: 100%;
    z-index: 56;
    width: 100%;
    padding: 0;
    background: rgba(105, 105, 105, 0.4);
}

@media screen and (max-width: 600px) {
    .out-block-font {
        position: fixed;
        bottom: 60px;
        width: 100%;
        height: 70px;
    }
}

.panel-choose-figure-classic-style {
    z-index: 56;
    position: absolute;
    width: 300px;
    bottom: 25px;
}

.carousel-item-char-classic-style {
    vertical-align: baseline;
    text-align: center;
    font-size: 3.7ex;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wrapper-control-layer-position {
    display: flex;
    position: fixed;
    width: 100%;
    height: 70px;
    top: 100px;
    z-index: 800;
}

.plate-control-layer-position {
    padding: 5px;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 20px;
    display: flex;
}

.plate-control-layer-position div {
    width: 50px;
}


.item-layer {
    height: 150px;
    width: 150px;
    opacity: 0.3;
}

.wrapper-layer-item {
    height: 150px;
    width: 150px;
    margin-left: 30px;
}

.wrapper-item-layer-btn {
    width: auto;
    float: right;
}

.close-wrapper-classic-style {
    z-index: 54;
    width: 50px;
    height: 50px;
    position: fixed;
    right: 0px;
    margin-left: auto;
    margin-right: 0;
}

.close-button-classic-style {
    background: white;
    border: 5px solid white;
    border-radius: 50px;
    position: relative;
    margin: auto;
    width: 50px;
    cursor: pointer;
}

.close-button-in-classic-style {
    width: inherit;
    text-align: center;
}

.close-button-text-classic-style {
    z-index: 54;
    font-size: 16px !important;
    line-height: 40px;
    font-weight: bold;
    text-transform: uppercase;
    color: black;
    transition: all .3s ease-in;
    opacity: 0;
    cursor: pointer;
    font-family: 'Lato', sans-serif;
}

.close-button-in-classic-style:before, .close-button-in-classic-style:after {
    position: absolute;
    content: '';
    height: 4px;
    width: inherit;
    background: #000000;
    left: 0;
    transition: all .3s ease-in;
}

.close-button-in-classic-style:before {
    top: calc(50% - 4px);
    transform: rotate(45deg);
}

.close-button-in-classic-style:after {
    bottom: 50%;
    transform: rotate(-45deg);
}

.close-button-classic-style:hover .close-button-text-classic-style {
    opacity: 1;
}

.close-button-classic-style:hover .close-button-in-classic-style:before,
.close-button-classic-style:hover .close-button-in-classic-style:after {
    transform: rotate(0);
}

.close-button-classic-style:hover .close-button-in-classic-style:before {
    top: 0;
}

.close-button-classic-style:hover .close-button-in-classic-style:after {
    bottom: 0;
}

.yes {
    /*float:right;*/
    cursor: pointer;
    font-size: 1.4em;
    font-weight: bolder;
    vertical-align: middle;
    /*background: #7dbc7d;*/
    background: radial-gradient(70% 95%, #d3f0fa, #68a8e4);
    position: relative;
    -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.8);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Lato', sans-serif;
}


.no {
    /*float:left;*/
    cursor: pointer;
    font-size: 1.4em;
    font-weight: bolder;
    vertical-align: middle;
    /*background: #aa919a;*/
    background: radial-gradient(70% 95%, #d3f0fa, #e45569);
    position: relative;
    -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.8);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Lato', sans-serif;
}


.box-inline-right {
    float: right;
    display: inline;
    margin-bottom: 3px;
}

.float-right {
    float: right;
}

.figure-canvas-classic-style {

}

/*# sourceMappingURL=main.css.map*/