@font-face {
   font-family: "Segoe";
   src: url("/fonts/Segoe UI.ttf") format("truetype");

}

@font-face {
   font-family: "OpenSansSemiBold";
   src: url("/fonts/OpenSans-SemiBold.ttf") format("truetype");
}

@font-face {
   font-family: "OpenSansRegular";
   src: url("/fonts/OpenSans-Regular.ttf") format("truetype");
}


html,
body {
   overflow-x: hidden;
   background: #101012;
   display: flex;
   justify-content: start;
   height: 100%;
   width: 100%;
   padding: 0;
   margin: 0;
   min-width: fit-content;
   font-family: "OpenSansRegular";
   color: #4D4D4D;
   background-attachment: fixed;
   position: relative;
}

textarea {
   scrollbar-width: thin;
   scrollbar-color: #DE642B #E54270;

   text-align: left;
}

.bbt {
   /* Auto layout */
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 8px;
   width: 199px;
   height: 45px;
   justify-content: center;
   background: radial-gradient(140.16% 200% at -10.1% 18.89%, #DE642B 0%, #E54270 100%)
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */
   ;
   border-radius: 32px;

   /* Inside auto layout */
   flex: none;
   order: 1;
   flex-grow: 0;

}

.red {
   border: 1px solid #e45226 !important;
}

.error {
   font-size: 13px;
   color: #e45226;
}

.nicnameshow {
   display: block !important;
}

.dropdown-menu button:hover {
   background: #444;
}

.dropdown-menu button {
   border-radius: revert;
}

.dropdown-menu a svg {
   margin-right: 5px;
}

.dropdown-menu hr {
   border-color: #C9C9CB;
}

.dropdown-menu a {
   display: flex;
   align-items: center;
   color: #C9C9CB;
   margin-bottom: 5px;
}

.dropdown-menu {
   position: absolute;
   top: 20px;
   right: 10px;
   background: #333335;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
   flex-direction: column;
   min-width: 120px;
   z-index: 10000;
   display: none;
   border-radius: 24px;
   padding: 10px;
   min-width: 250px;
}


.recreatesong,
.recreatesongindex {
   /* Button S */
   background: none;
   box-sizing: border-box;

   /* Auto layout */
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: 8px;

   width: 135px;
   height: 35px;

   border: 1px solid rgba(255, 255, 255, 0.15);
   border-radius: 32px;

   /* Inside auto layout */
   flex: none;
   order: 1;
   flex-grow: 0;

}

.center {
   flex-grow: 1;
   padding: 10px;
}

.content {
   display: flex;
   width: 100%;
   height: 100%;
   justify-content: flex-start;
}

.fisrstblock {
   padding: 10px;
   display: flex;
   width: 100%;
   justify-content: flex-start;
   flex-direction: column;
}

.leftside_top {
   display: flex;
}

.leftside {
   display: flex;
   width: 200px;
   border-right: 1px solid #333335;
   flex-direction: column;
}

.leftside_top {
   padding: 24px;
   padding-top: 40px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   background: #101012;
}

.logo svg {
   width: 96px;
   box-sizing: border-box;
   border: 0 solid;
   margin: 0;
   padding: 0;
   color: rgb(247, 244, 239);
   height: 23px;

}

.avatar .img {
   width: 25px;
   border-radius: 45px;
}

.inn {
   width: 69px;
   height: 32px;
   font-family: 'Segoe UI';
   font-style: normal;
   font-weight: 600;
   font-size: 24px;
   line-height: 32px;
   color: #FFFFFF;
   padding-bottom: 20px;

}

.avatar {
   display: flex;
   flex-direction: row;
   padding-top: 27px;
   cursor: pointer;
   align-items: center;
   justify-content: flex-start;
}

.white:hover,
.menu_item:hover {
   color: rgb(255, 255, 255);
   text-decoration: underline;
}

.menu_item {
   cursor: pointer;
   display: flex;
   align-items: normal;
   padding-bottom: 20px;
   color: #6a6a72;
}

.leftmenu,
.leftsubmenu {
   cursor: pointer;
   display: flex;
   align-items: center;
   color: #6a6a72;
}

.menu_item_sel {
   color: rgb(255, 255, 255);
}

.white {
   color: rgb(194, 194, 193);
   font-size: 14px;
}

.mainmenu,
.submainmenu {
   padding-left: 27px;
   padding-top: 30px;
}

.bott_t {
   display: flex;
   flex-direction: column;
   justify-content: center;
   flex-grow: 1;
   align-items: center;
}

.uppball a {
   color: white !important;
}

.uppball {
   margin: 20px;
   background-image: linear-gradient(138.36deg, rgba(16, 16, 18, 0) 0%, rgb(16, 16, 18) 76.47%),
      url('/img/image29.png');
   border-radius: 31px;
   width: 150px;
   height: 170px;
   background-position: 50%;
   background-size: cover;
   color: white !important;

}

.uppball_h {
   font-size: 14px;
   margin-left: 16px;
   margin-top: 10px;
}

.uppball .uppball_t {
   font-size: 12px;
   margin-left: 16px;
   color: rgb(194, 194, 193);
   padding-top: 10px;
}

.bbt a {
   color: white !important;
}

.innbtn {
   /* Button mini */

   /* Auto layout */
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   height: 37px;
   color: #fff;
   margin-top: 20px;
   background: rgba(255, 255, 255, 0.15);
   border-radius: 32px;
   cursor: pointer;

}

.uppball_p {
   border-radius: 12px;

   border-radius: 32px;
   line-height: 24px;
   padding-bottom: 8px;
   text-align: center;
   margin: 12px;
   font-size: 15px;
   display: flex;
   flex-direction: column;
}

.social {
   height: 55px !important;
   border-top: 1px solid #333335;
   width: 100%;
}

.form_center .pref {
   border-radius: 12px;
   background-color: rgb(16, 16, 18);
   padding: 8px;
   display: flex;
   align-items: center;
   align-content: initial;
   border: 1px solid #49494A;
   font-size: 14px
}

.slider .sel {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   padding: 2px;
   gap: 8px;
   height: 28px;
   color: white;
   background: #333335;
   border-radius: 24px;
   flex: none;
   order: 0;
   flex-grow: 0;

}

.slider {
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 0px;
   gap: 8px;
   width: 190px;
   height: 34px;
   background: #101012;
   border: 1px solid #49494A;
   border-radius: 24px;
   color: white;

}

.form_center .pref-type {
   border-radius: 12px;
   background-color: #101012;
   border: 1px solid #49494A;
   display: flex;
   align-items: center;
   align-content: initial;
   width: 180px;
   justify-content: space-between;
   font-size: 14px;
   padding: 3px;
}

.form_center {
   padding: 10px;
   max-width: 450px;
   min-width: 360px;
   border-right: 1px solid #333335;
   display: flex;
   flex-direction: column;
   overflow-y: none;
}

.form_center-top_block {
   border-bottom: 1px solid #333335;
   padding-bottom: 10px;

   display: flex;
   justify-content: space-between;
}

.pref {
   color: white;
}

.pref-type div {
   padding: 10px;
   color: white;
   cursor: pointer;
}

.selpref {
   border-radius: 9px;
   background-color: #333335;
}


.graybtn:hover,
.graybtn:hover .selectbtbn {
   background-color: #54545c !important;
   border: 1px solid #5c5c61
}

.graybtn svg {
   margin-top: 2px;
}

.remixbtn {
   background-color: #333335 !important;
}

.graybtn {
   border-radius: 15px;
   background-color: #252529;
   font-size: 14px;
   color: white;
   padding: 7px;
   display: flex;
   text-wrap: nowrap;
   margin: 3px;
   border: 1px solid #2c2c2f;
   cursor: pointer;
   min-width: 94px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.item .graybtn {
   margin-right: 36px;
   display: none;
}

.graybtnsmal:hover {

   background-color: 1px solid #2c2c2f;
}

.graybtnsmal {
   border-radius: 15px;
   background-color: #252529;
   font-size: 13px;
   color: white;
   padding: 3px;
   display: flex;
   text-wrap: nowrap;
   margin: 3px;
   border: none;
   cursor: pointer;
   margin-bottom: 10px;
   justify-content: center;
}

.form_block {
   background-color: #1F1F21;
   border: 1px solid #1F1F21;
   margin-top: 16px;
   border-radius: 24px;
   padding: 10px;
   display: flex;
   flex-direction: column;
   position: relative;
}

#fileInput {
   display: none;
}

.form_block .title {
   color: white;
   color: white;
   font-size: 14px;
   display: flex;
   justify-content: space-between;
   align-items: center
}

.form_block_input {
   color: white;
   border: none;
   outline: none;
   font-size: 14px;
   width: 100%;
   background-color: #1F1F21;
   color: #969698;
}

select {
   outline: none;
}

.form_input {
   color: white;
   border: none;
   outline: none;
   font-size: 14px;
   width: 100%;
   background-color: #4D4D4D;
   color: #969698;
   border-radius: 12px;
   border: 1px solid #4D4D4D;
   padding: 5px;
   margin: 5px;
}

.form_block_row_smallbtn {
   padding: 8px;
   width: 32px;
   height: 32px;
   background: #333335;
   border-radius: 100px;
   display: flex;
   align-items: center;
}

.red {
   color: red;
}

.stext {
   min-height: 150px;
   margin-top: 10px;
}

.overflowy {
   overflow-y: auto;
}

.form_block_row {
   display: flex;
   justify-content: space-around;

}

.form_block_row_blank {
   display: flex;
   justify-content: space-around;

}

hr {
   border: 1px solid;
   border-top: 0px;
   margin-bottom: 20px;
   margin-top: 10px;
   width: 100%;
}

.stext {
   outline: none;
}

.createbtn,
.createbtnvideo,
.createphoto {
   background-image: url("/img/aura_horizontal.jpg");
   background-position-x: 50%;
   background-position-y: 50%;
   background-size: cover;

   flex-direction: row;
   justify-content: space-between;
   font-size: 16px
}

.form_block_row_blank .graybtn {
   background-color: #101012 !important
}

.cetnter_title {
   margin-left: 5px;
   margin-bottom: 30px;
   margin-top: 10px;
   color: white;
   font-size: 20px;
}

.coverimage {
   min-width: 60px;
   min-height: 80px;
   width: 60px;
   height: 80px;
   background-size: cover;
   margin-right: 5px;
   border-radius: 5px;
   border: 1px solid;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   position: relative;
   background-image: url("/img/logo.png");
}

.songtitle span {
   color: white;
}

.imagetimer {
   position: absolute;
   bottom: 2px;
   background-color: oklab(0.173941 0.00112605 -0.00393561 / 0.7);
   border-radius: 4px;
   padding: 2px;
   font-size: 11px;
   right: 5px;
   color: white;
}

.items {
   margin-top: 30px;
   margin-left: 30px;
   margin-bottom: 200px;
}

.item:hover .coverimage .playhover,
.item:hover .songnameedit {
   visibility: visible;
}

.item:hover .coverimage {
   color: white;
}

.songtitle .modelname {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   height: 19px;
   background: #333335;
   border-radius: 24px;
   flex: none;
   flex-grow: 0;
   flex-grow: 0;
   margin-left: 24px;
   font-size: 10px;
   color: white;
   padding-left: 3px;
   padding-right: 3px;
   flex-wrap: nowrap;
}

.songnameedit {
   visibility: hidden;
   margin-left: 5px;
}

.item:hover .remixbtn {
   display: flex;
}

.item:hover {
   background-color: #1F1F21;
   border-radius: 12px;
}


.item {
   display: flex;
   border-radius: 12px;
   width: 100%;
   justify-content: space-around;
   align-items: center;
   margin-bottom: 10px;
   cursor: pointer;
   position: relative;
   padding: 10px;
}

.itemvideo,
.itemphoto {
   display: flex;
   justify-content: space-around;
   align-items: center;
   margin-bottom: 10px;
   cursor: pointer;
   margin: 10px;
}

.figurecenter span {
   text-align: center;
   font-size: 11px;
   color: red;
}

.figurecenter {
   display: flex;
   align-items: center;
   justify-content: unsafe;
   width: 100%;
   justify-content: center;
   color: white;
}

.itemphoto img {
   max-width: 200px;
}

a {

   text-decoration: none;
}

a {
   color: white;
   text-decoration: none;
}

.player_nav {
   display: flex;
   justify-content: flex-end;
   flex-grow: 1
}

a:hover {
   text-decoration: underline;
}

.songtitle {
   display: flex;
   flex-direction: row;
   align-items: baseline;
   justify-content: space-between;
   position: relative;
   align-items: baseline;
}

.dropdown-menu.show {
   display: flex;
}

.songtitle small {
   flex-grow: 1;
   margin-left: 16px;
   font-size: 10px;
   color: white;
}

.titlename {
   background: none;
   border: none;
   outline: none;
}

.songtitle a,
.titlename {
   font-size: 18px;
   font-family: "OpenSansSemiBold";
   color: white;
}

.songstyle {
   font-size: 12px;
   color: white;
   text-decoration: none;
   display: flex;
   flex-wrap: wrap;
}

.songicons {
   display: flex;
   padding-right: 10px;
}

.titlegroup {
   display: flex;
   flex-grow: 1;
   flex-direction: column;
   padding-left: 16px;
}

.flex_row {
   display: flex;
   flex-direction: row;
   margin: 10px;
}

.flex_col {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.form {
   justify-content: center;
   max-width: 400px;
   margin-left: 20px;
   margin-top: 20px;
}

div,
button,
a {
   -webkit-tap-highlight-color: transparent;
   /* Убирает подсветку */
}

.likedmusicbutton {
   font-size: 20px;
}

.musicbar {
   margin-left: 30px;
   margin-top: 22px;
   padding-right: 10px;
   display: flex;
   align-items: center
}

.searchmusic {
   flex-grow: 1;
   margin-left: 10px;
   border-radius: 15px;
   border: 1px solid;
   display: flex;
   align-items: center;
   padding-left: 10px;
   background-color: #1F1F21;
   padding-right: 19px;
   height: 28px;
}

.findmusic:focus,
.findmusic:active {
   border: none;
}

.findmusic {
   margin-left: 10px;
   background-color: #1F1F21;
   border: none;
   height: 95%;
   flex-grow: 1;
   outline: none;
   color: white;
}

.hide {
   display: none !important;
}

#repeat,
#shrink {
   padding: 5px !important;
}

.shrinksel {
   color: white;
   background-color: #e46120;
}

.repeatsel {
   color: white;
   background-color: #e46120;
}

.repeatsel {
   color: white;
}

.form .button {
   border-radius: 12px;
   background-color: #4D4D4D;
   padding: 5px;
   display: flex;
   margin: 5px;
   -moz-box-align: center;
   align-items: center;
   -moz-box-pack: center;
   justify-content: center;
   border: 1px solid #424242;
   color: white;
   cursor: pointer;
   min-width: 50px
}

.shake {
   margin-left: 2px !important;

}

.buttonyandex {
   font-size: 12px;
   background: red;
   display: flex;
   align-content: flex-end;
   border-radius: 12px;
   max-width: 150px;
   align-items: center;
   margin-bottom: 10px;
   padding: 0px 8px;
   font-size: 11px;
}

.topform {
   position: fixed;
   z-index: 25000;
   left: 0px;
   top: 0px;
   display: flex;
   background-color: rgba(16, 15, 15, 0.6);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   width: 100%;
   height: 100%;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.form_block2 {
   background-color: #101012;
   padding: 0px;
   margin-right: 20px;
}

.topform .form_block {
   background-color: #1F1F21;
   padding: 10px;
}

.topform2 {
   z-index: 20002;
   border-radius: 24px;
   background-color: #1F1F21 !important;
   padding: 20px !important;
}

.player {
   background: #222;
   padding: 20px;
   border-radius: 10px;
   width: 400px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.controls {
   display: flex;
   justify-content: space-around;
   margin-bottom: 15px;
}

button {
   background: none;
   color: white;
   border: none;
   margin: 5px;
   padding: 10px 15px;
   border-radius: 5px;
   cursor: pointer;
   transition: background 0.3s;
}


.progress-container {
   width: 100%;
   height: 10px;
   background: #444;
   border-radius: 3px;
   cursor: pointer;
   position: relative;
}

.progress-filled {
   height: 100%;
   background: #e45226;
   width: 0%;
   border-radius: 3px;
}

.musicplay {
   background-color: #333;
}

.nomp3 .progress {
   background-image: url("/img/aura_horizontal.jpg");
   width: 100%;
   background-size: cover;
   white-space: nowrap;
   height: 100%;
   align-content: center;
   color: white;
   font-size: 12px;
}

.progressparent .progress {
   background-image: url("/img/aura_horizontal.jpg");
   width: 100%;
   background-size: cover;
   white-space: nowrap;
   height: 8px;
   align-content: center;
   color: white;
   font-size: 12px;
   background: radial-gradient(133.33% 1036.06% at -15.52% 84.62%, #7516FF 2.96%, #BE21FF 32.69%, #FF5245 55.65%, #FF5245 80.13%, #FF6D2B 100%)
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */
   ;
}

.nomp3 {
   background-color: #333;
   height: 30px;
   display: flex;
   justify-content: flex-start;
}

.sunoerror {
   padding: 20px;
}

.musicabout img {
   border-radius: 12px;
}

.musicabout {
   color: white;
   font-size: 12px;
   padding: 10px;
}

.vocalGendersel,
.musiconlysel,
.aspectsel,
.btnselorange {
   background-color: #e45226 !important;
   border: 1px solid #e45226;
}

.contentover {
   position: relative;
   width: 100%;
}

.musicplayer {
   opacity: 0.95;
   display: flex;
   position: fixed;
   z-index: 2000;
   bottom: 20px;
   min-height: 90px;
   background-color: #101012;
   border: 1px solid #868686;
   border-radius: 5px;
   margin-left: 6px;
   align-items: center;
   flex-direction: column;
}

.randprompt {
   cursor: pointer;
}

.playerimage {
   min-width: 60px;
   min-height: 80px;
   width: 60px;
   height: 80px;
   background-size: cover;
   margin-right: 5px;
   border-radius: 5px;
   border: 1px solid;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   position: relative;
   margin: 5px;

}

.playertitlename {
   color: white;
   font-size: 16px;
   margin-left: 10px;
}

.VkIdSdk_oauth_link_text {
   font-size: 11px !important;
}

.VkIdSdk_oauth_item {
   padding: 0px;
}

.playertitletags {
   margin-left: 10px;
   color: white;
   font-size: 12px;
   max-width: 200px;
   overflow: hidden;
   max-height: 17px;
}

.musicplayer_row {
   width: 100%;
   display: flex;
   align-items: center;
}

.smbutton {
   display: flex;
}

.controls {
   flex-grow: 1;
   display: flex;
   align-items: center;
   justify-content: center;
}

.videoframe {
   display: flex;
   flex-wrap: wrap;
}

.mobilemenu {
   display: none;
}

.nicname {
   display: flex;
   padding-left: 27px;
   padding-top: 30px;
   flex-direction: column;
}

.playanimation {
   display: none;
}

.coverimage .pause,
.coverimage .play {
   display: none;
}

.coverimage:hover .play {
   display: block;
}

.playtrack:hover .pause {
   display: block;
}

.playtrack:hover .play,
.playtrack:hover .playanimation {
   display: none !important;
}

.playtrack .playanimation {
   display: block;
}

.playanimation {
   color: white;
}

.loaderseparate {
   display: flex;
   flex-direction: column;
   align-items: anchor-center;
   margin: 24px;
}

.audio-player {
   width: 100%;
   background-color: #1F1F21;
   border-radius: 6px;
}

/* Панель управления (WebKit-браузеры) */
.audio-player::-webkit-media-controls-panel {
   background-color: #1F1F21;
}

.musictext {
   display: flex;
   flex-direction: column;
   padding: 20px;
   min-width: 300px;
}

.music_aboutprompt {
   font-size: 16px;
   color: #C9C9CB;
   margin-top: 30px;
   margin-bottom: 30px;
}

.music_abouttitle {
   font-size: 18px;
   margin-bottom: 10px;
}

.musicpromtptexttitle a:hover {
   color: #427BE5
}

.musicpromtptexttitle a {
   color: #427BE5;
}

.liriktext {
   margin: 10px;
}

.parentclose:hover {

   background: #1F1F21;
}

.banner {
   background-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 1)), url("/img/header_gallery1.png");
   background-color: #1F1F21;
   padding: 30px;
   min-height: 300px;
   background-size: cover;
   background-repeat: no-repeat;
   border-radius: 24px;
}

.banner {
   background-position: center;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   min-height: 330px;
}

.gallery_1 {
   background-image: linear-gradient(to right,
         rgba(0, 0, 0, 1),
         rgba(255, 255, 255, 0.05),
         rgba(255, 255, 255, 0.05),
         rgba(0, 0, 0, 1)),
      url("http://veosuno.ru/img/ban1.png");
}

.gallery_2 {
   background-image: linear-gradient(to right,
         rgba(0, 0, 0, 1),
         rgba(255, 255, 255, 0.05),
         rgba(255, 255, 255, 0.05),
         rgba(0, 0, 0, 1)),
      url("img/header_gallery2.png");
}

.gallery_3 {
   background-image: linear-gradient(to right,
         rgba(0, 0, 0, 1),
         rgba(255, 255, 255, 0.05),
         rgba(255, 255, 255, 0.05),
         rgba(0, 0, 0, 1)),
      url("img/header_gallery3.png");
}

.firsttoptitle {
   height: 100px;
}

.first_block {
   display: flex;
   justify-content: space-around;
   padding-top: 15px;
}

.f_block_title button {
   background: #8f2d8e;
   padding: 5px;
   height: 27px;
}

.f_block_title {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
}

.first_rows {
   display: flex;
   flex-wrap: wrap;
}

.f_block_title h2 {
   color: white;
   font-size: 20px;
   padding-bottom: 10px;
   flex-grow: 1;
}

.f_blockimage_coll {
   gap: 10px;
   /* Опционально: добавляем отступ между элементами */
   column-count: 4;
}

.itemphoto_first img {
   border-radius: 24px;
}

.itemphoto_first video {
   border-radius: 24px;
   width: 100%;
}

.itemphoto_first {
   position: relative;
   padding: 0px;
   margin: 0px;
   display: flex;
   overflow: hidden;
   min-height: 120px;
   margin: 5px;
}

.itemphoto_first .progressparent {
   background-color: #333;
   height: 30px;
   display: flex;
   justify-content: flex-start;
   position: absolute;
   bottom: -21px;
   width: 100%;
}

.soundtag {
   color: #C9C9CB;
   font-size: 12px;
}

figcaption span {

   position: absolute;
   left: 10px;
   top: 10px;
   color: white;
}

figcaption {
   display: none;
   position: absolute;
   top: 0px;
   width: 100%;
   height: 100%;
   z-index: 1000;
   cursor: pointer;
   background-color: rgba(0, 0, 0, .6);
}

.figurebuttons a:hover {}

.figurebuttons {
   display: flex;
   justify-content: space-evenly;
   align-items: baseline;
   height: 100%;
   padding: 10px;
   flex-direction: column;
}

.figurebuttons a {
   color: #ffffff;
   border-radius: 16px;
   background: none;
   margin-bottom: 10px;
}

.recreateimagevideo {
   position: absolute;
   bottom: 20px;
   background: white;
   color: #444;
   right: 20px;
}

figure:hover figcaption {
   display: block;
}

.f_block_coll {
   flex: 1;
   margin: 5px;
   padding: 5px;
}

.f_block_coll:hover {
   background: #222;
}

.itemphoto_first img {
   width: 100%;
}

.b_title {
   font-size: 36px;
   color: white;
   margin-bottom: 6px;
   max-width: 400px;
   padding-top: 70px;
}

.b_content {
   font-size: 16px;
   color: white;
   margin-bottom: 20px;
   max-width: 400px;
}

.clearimage {
   padding: 0px !important;
}

.rightside {
   position: relative;
   border-left: 1px solid #333335;
   overflow-y: auto;
   max-width: 457px;
   min-width: 350px;
}

#volumeSlider {
   accent-color: #333333;
}

.volume-control {
   padding: 18px;
   display: flex;
   align-items: center;
}

.b_button {
   background-color: white;
   color: black;
   border-radius: 15px;
   display: flex;
   align-items: center;
   padding: 10px;
   width: 130px;
}

.parentclose {
   position: absolute;
   right: 10px;
   background: #101012;
   border: 1px solid #737375;
   border-radius: 18px;
}

.removeimg {
   position: relative;
   margin: 10px;
}

.removeimg span {
   position: absolute;
   right: 3px;
   top: 3px;
   color: red;
   cursor: pointer;
}

.imagesbananas img {
   width: 120px;
   border-radius: 8px;
}

.imagesbananas {
   display: flex;
}

.imagebanana {
   width: 200px;
}

.pref select,
.form_block_row select,
.form_block select {
   background: #101012;
   border: none;
   color: white;
}

select {
   font-size: 14px;
   /* Example: set to 16 pixels */
}

/* To set the font size of the options within the select element */
select option {
   font-size: 14px;
   /* Example: set to 14 pixels */
}

.form_block textarea {
   max-width: 400px !important;
}

.closehint {
   color: red;
   cursor: pointer;
}

.playertitletime {
   color: white;
   margin: 10px;
}

.nextfs3,
.nextfs2,
.nextfs1 {
   display: none;
}

.selectedliked,
.selbtn svg {
   background-color: #7a28ba;
   border-radius: 16px
}

.selectedbasket,
.selbtn svg {
   background-color: #7a28ba;
   border-radius: 16px
}

@media screen and (max-width: 950px) {
   .f_blockimage_coll {
      gap: 10px;
      /* Опционально: добавляем отступ между элементами */
      column-count: 2;
   }
}

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

   html,
   body {
      overflow-x: visible;
   }

   .rightside {
      border: 1px solid #1F1F21;
      border-radius: 24px;
      background: #151517;
      position: fixed;
      margin: 0px !important;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      z-index: 30000;
   }

   .b_title {
      font-size: 24px;
      text-align: center;
      padding-top: 115px
   }

   .logo.desktop {
      display: none;
   }

   .b_content {
      font-size: 16px;
      text-align: center;
      margin-top: 84px;
   }

   figcaption {
      display: flex;
      background: none;
   }

   .items {
      margin-left: 1px;
      max-width: 429px;

   }

   .f_blockimage_coll {
      gap: 0px;
      column-count: 1;
   }

   .item button {
      font-size: 22px
   }

   .balancepc {
      display: none;
   }

   .uppball {
      width: 100%;
   }

   .uppball_p {
      box-sizing: border-box;
      color: white;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 6px 16px 8px;
      gap: 8px;
      width: 70% !important;
      height: 45px;
      background: radial-gradient(140.16% 200% at -10.1% 18.89%, #DE642B 0%, #E54270 100%);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 32px;
      cursor: pointer;
   }

   .songnameedit {
      display: none !important;
   }

   .balancediv {
      padding-top: 30px;
   }

   .form_block_row .promo,
   .form_block_row .paybtn {
      width: 300px !important;
   }

   .nextfs3,
   .nextfs2,
   .nextfs1 {
      display: block;
   }

   .f_blockimage_coll {
      grid-template-columns: repeat(2, 1fr);

   }

   .songtitle .modelname {
      display: none;
   }

   .remixbtn {
      font-size: 12px;
      visibility: hidden !important;
      display: none !important;
   }

   .songstyle {
      font-size: 11px;
   }

   .songtitle small {
      display: none;
   }

   .songtitle a {
      font-size: 14px;
   }

   .fs2,
   .fs3 {
      display: none;
   }

   .volume-control {
      display: none;
   }

   .playertitletime {
      display: none;
   }

   .videoclipwindow .modal-body {
      flex-direction: column;

   }

   .videoclipwindow .modalclose {
      right: 33px;
   }

   .videoclipwindow .videoclipwindow_modalwindow_video_block {
      width: 100% !important;
   }

   .videoclipwindow .modal-info {
      padding: 20px;
      width: 100% !important;
      background: #d7582d;
   }

   body,
   .contentover,
   .content {
      flex-direction: column;
   }

   .progress-container {
      height: 30px;
   }

   .playertitletags,
   .playerimage {
      display: none;
   }

   .musicbar {
      margin-left: 0px;
   }

   .player_nav {
      flex-direction: column;
      padding-top: 10px;
   }

   .leftside {
      width: 99%;
   }

   /* start new code */
   .leftside {
      width: 100%;
      box-sizing: border-box;
   }

   .fisrstblock {
      box-sizing: border-box;
   }

   /* end new code */

   .form_center {
      padding: 0px;
      min-width: 360px;
   }

   .promt_select {
      font-size: 12px !important;
   }

   .mobilemenu {
      display: block;
   }

   .nicname,
   .mainmenu,
   .bott_t,
   .submainmenu {
      display: none;
   }

   .smbutton {
      flex-direction: column;
   }

   .titlegroup {
      padding-left: 3px;
      flex-grow: 1;
   }

   .pref select,
   .form_block_row select {
      width: 120px;
      max-width: 360px;
   }

   .uppball_p {
      display: flex;
      flex-direction: inherit;
      justify-content: space-around;
   }

   .recreateimage {
      position: absolute;
      bottom: 19px;
      background: white;
      color: #444;
      left: 1px;
      font-size: 10px;
   }

   .recreateimagevideo {
      position: absolute;
      bottom: 20px;
      font-size: 10px;
      background: white;
      color: #444;
      right: 0px;
   }

   figcaption span {
      font-size: 10px;
   }
}

.graybtnbig {
   /* Buttons M */

   box-sizing: border-box;

   /* Auto layout */
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   padding: 8px 16px;
   width: 100%;

   background: rgba(255, 255, 255, 0.15);
   border-radius: 32px;

   /* Inside auto layout */
   flex: none;
   align-self: stretch;

}

.createbtn2 {
   /* Buttons M */

   box-sizing: border-box;
   color: white;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   padding: 6px 16px 8px;
   gap: 8px;
   width: 100%;
   height: 45px;
   /* Main */
   background: radial-gradient(140.16% 200% at -10.1% 18.89%, #DE642B 0%, #E54270 100%)
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */
   ;
   border: 1px solid rgba(255, 255, 255, 0.15);
   border-radius: 32px;
   cursor: pointer;
}

.createbtn2:hover {
   /* Main */
   background: radial-gradient(140.16% 200% at -10.1% 18.89%, #DE642B 0%, #E54270 100%)
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */
   ;
   border: 1px solid rgba(255, 255, 255, 0.15);
   box-shadow: 0px 0px 24.6492px #97364B;
   border-radius: 32px;
}

.createbtn {
   /* Buttons M */

   box-sizing: border-box;
   color: white;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   padding: 6px 16px 8px;
   gap: 8px;
   width: 340px;
   height: 45px;
   /* Main */
   background: radial-gradient(140.16% 200% at -10.1% 18.89%, #DE642B 0%, #E54270 100%)
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */
   ;
   border: 1px solid rgba(255, 255, 255, 0.15);
   border-radius: 32px;
   cursor: pointer;
}

.createbtn:hover {
   /* Main */
   background: radial-gradient(140.16% 200% at -10.1% 18.89%, #DE642B 0%, #E54270 100%)
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */
   ;
   border: 1px solid rgba(255, 255, 255, 0.15);
   box-shadow: 0px 0px 24.6492px #97364B;
   border-radius: 32px;
}

.iconright {
   cursor: pointer;
}

.textblock {
   padding: 10px;
}

.textblock {
   color: white;
}

.mw580px {
   max-width: 580px;
}

.form_block_row {
   color: #C9C9CB;
   display: flex;

   align-items: stretch;
}

.round {
   border-radius: 50%;
}

.form_block_row .promo {
   box-sizing: border-box;
   width: 422px;
   height: 80px;
   border: 1px solid #333335;
   border-radius: 16px;
   margin: 30px;
   color: #C9C9CB;
   font-size: 16px;
}

.form_block_row .paysumm {
   border: none;
   color: white;
   font-size: 56px;
   width: 120px;
}

.form_block_row .text {
   background: none;
   outline: none;
   text-align: center;
}

.form_block_row button.round {
   width: 56px;
   height: 56px;
   font-size: 30px;
}

.form_block_row span {
   color: #8D8D8F;
}

.mb10 {
   margin-bottom: 10px;
}

::-webkit-input-placeholder {
   /* Chrome */
   color: #49494A;
   font-size: 14px;
}

:-ms-input-placeholder {
   /* IE 10+ */
   color: #49494A;
   font-size: 14px;
}

::-moz-placeholder {
   /* Firefox 19+ */
   color: #49494A;
   opacity: 1;
   font-size: 14px;
}

:-moz-placeholder {
   /* Firefox 4 - 18 */
   color: #49494A;
   opacity: 1;
   font-size: 14px;
}

.paybtn {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: 8px;
   width: 422px;
   height: 80px;
   background: radial-gradient(140.16% 200% at -10.1% 18.89%, #DE642B 0%, #E54270 100%)
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */
   ;
   border-radius: 16px;
   color: #FFFFFF;
   font-size: 20px;
}

.blockcenter {
   display: flex;
   align-items: center;
   justify-content: center;
}

.avatarmenu {
   display: none;
}

.overlay {
   position: fixed;
   overflow: scroll;
   left: 0px;
   top: 0px;
   display: none;
   z-index: 24100;
   background-color: rgba(16, 15, 15, 0.6);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   width: 100%;
   height: 100%;
   flex-direction: column;
   align-items: center;
   justify-content: center
}

.overlayclosed {
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0px;
   top: 0px;
   z-index: 1011;
}

.overlaycontainer {
   z-index: 25000;
}

.mobilemenu_btn_container {
   display: flex;
   align-items: center;
   gap: 8px;
}

.mobilemenu_btn_container>img {
   width: 24px;
   height: 24px;
}

.bbt.login {
   padding: 8px 16px;
   width: auto;
   height: auto;
   font-size: 16px;
}

.create_music_mobile {
   display: none;

   @media screen and (max-width: 500px) {
      display: flex;
      order: unset;
      width: 100%;
   }
}

@media screen and (max-width: 500px) {
   .mobilemenu.mobile_header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
   }

   .create_music_desktop {
      display: none;
   }
}

.mobile {
   display: none;

   @media screen and (max-width: 500px) {
      display: unset;
   }
}

.mobile_container {
   display: none;

   @media screen and (max-width: 500px) {
      display: flex;
   }
}

.gallery_button {
   background-color: white;
   flex: 1;
   height: 2px;
   cursor: pointer;
   opacity: 0.3;
}

.chosen_gallery {
   opacity: 1;
}

.gallery_buttons {
   display: flex;
   width: 100%;
   gap: 13px;
}

.gallery_buttons_desktop {
   align-self: flex-end;
   width: 128px;
   margin-top: 35px;

   @media screen and (max-width: 500px) {
      display: none;
   }
}

.create_music_desktop {
   order: unset;
}

/* start new code 38 */
.close_button {
   width: 24px;
   height: 24px;
   position: absolute;
   top: 28px;
   right: 24px;
   fill: white;
}

.authform2 {
   display: flex;
   flex-direction: column;
   gap: 40px;
   margin: 0;
   padding: 0 16px;
}

.firstblock {
   box-sizing: border-box;
}

.auth_buttons {
   display: flex;
   flex-direction: column;
   gap: 15px;
   align-items: center;
}

.auth_block {
   background-color: #1f1f21;
   display: flex;
   align-items: center;
   gap: 8px;
   max-width: unset;
   align-items: center;
   justify-content: center;
   font-size: 12px;
   border-radius: 12px;
   padding: 0 8px;
   margin-bottom: 0;
}

.logomobile {
   display: none;
}

@media screen and (max-width: 500px) {
   .nicname2 {
      display: none !important;
   }

   .profile_block {
      right: 10px !important;
      top: 34px !important;
      left: auto !important;
      height: 43px !important;
      width: 140px !important;
      display: flex !important;
   }

   .profile_menu {
      transform: none !important;
      left: 0px !important;
      top: 90px !important;
      border: 0px !important;
      border-radius: 0px !important;
      height: 100% !important;
      width: 100% !important;
   }

   .profile_name,
   .shavmen {
      display: none;
   }

   .profile svg {
      order: 1;
   }

   .profile {
      width: 100%;
      justify-content: space-around;
   }

   .nicname.nicnameshow {
      display: unset !important;
   }

   .logomobile {
      display: unset;
   }
}

.VkIdSdk_oauth_item {
   background-color: #1f1f21 !important;
}

.VkIdSdk_oauth_list {
   height: unset !important;
}

.authname h2 {
   margin: 0;
}

.formblock {
   background-color: unset;
}

.nicname {
   padding: 0;
   margin-bottom: 10px;
}

.bbt.login {
   display: flex;
   align-items: center;
   /* color: #de2b2b; */
   color: #2bde90;
   background: unset;
   border: 1px solid #ffffff26;
}

.fixed {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 23999;
   width: 87%;
}

.playerclose {
   position: absolute;
   right: 20px;
   top: 10px;
}

/* start new code 92 */
.fisrstblock {
   overflow-y: scroll;
}

.faq {
   padding-left: 10px;
   display: flex;
   flex-direction: column;
   gap: 24px;
   color: white;
   max-width: 1156px;
}

.faq_title {
   margin: 0;
}

.faq_questions {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.faq_question {
   display: flex;
   flex-direction: column;
   gap: 20px;
   padding: 28px;
   border-radius: 24px;
   border: 1px solid #333335;
   cursor: pointer;
}

.faq_question:hover {
   background: #333335;
   border-color: #333335;
}

.faq_question_block {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 16px;
}

.faq_question_text {
   font-size: 18px;
   font-weight: 600;
}

.faq_question_icon {
   min-width: 24px;
   height: 24px;
   fill: white;
}

.faq_question_answer {
   padding: 16px;
   border-radius: 16px;
   background-color: #1f1f21;
}

/*  end new code 92 */
.flex_c {
   display: flex;
   flex-direction: column;
}

.textarea_counter {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 400;
   font-size: 14px;
   line-height: 130%;
   text-align: right;
   letter-spacing: -0.03em;
   color: #49494A;

}

.inserttemplate {
   display: none;
}

textarea {
   background: #1c1c1f;
   outline: none;
   border: none;
   color: #fff;
   flex-grow: 1;
   resize: vertical;
}

.mt10 {
   margin-top: 10px;
}

.selectbtbn:hover {
   background-color: #54545c !important;
   background: #54545c !important;
   border: none !important;

}

.selectbtbn {
   background-color: #252529 !important;
   background: #252529 !important;
   border: none !important;

}

.createcover {
   position: absolute;
   right: 5px;
   bottom: 3px;
}

.musicabout img {
   max-width: 280px;
   max-width: 100%;
}

.musicabout figure {
   position: relative;
   border-radius: 12px;
   padding: 0px;
   margin: 0px;
}

.coverreplace {
   position: absolute;
   bottom: 10px;
}

.coverreplace_ok {
   display: none;
   position: absolute;
   bottom: 10px;
}

.alertblock {
   position: fixed;
   bottom: 20px;
   z-index: 20000;
   color: #fff;
   left: 45%;
   display: none;
   font-size: 14px;
   color: #151517;
   padding: 10px;
   background: #2BDE90;
   border-radius: 24px;



}

.itemnumber {
   font-size: 50px;
   position: absolute;
   color: #eb7730;
   font-weight: bold;
   left: 10px;
}

.fixedcenter {
   position: fixed;
   bottom: 10px;
   align-items: center;
   z-index: 19000;
   width: -moz-available
}

.videclip_content {
   display: none !important;
}

.clippreloader {
   display: flex;
   width: 360px;
   height: 200px;
   justify-content: center;
   align-items: center;
}

.videoclipwindow_modalwindow_video_block {
   display: flex;
   justify-content: center;
   align-items: center;
}

/* start new code 95 */
.leftside_footer {
   display: flex;
   flex-direction: column;
   gap: 50px;
   padding: 32px;
   margin-bottom: 95px;

   @media screen and (max-width: 550px) {
      display: none;
   }
}

.bonus_block {
   display: flex;
   flex-direction: column;
   gap: 35px;
   background-image: url(/img/bonus.png);
   background-size: cover;
   padding: 16px;
   border-radius: 32px;
}

.bonus_block_text {
   display: flex;
   flex-direction: column;
   gap: 9px;
}

.leftside {
   min-width: 242px;
}

.bonus_subscribe_btn {
   color: #c9c9cb;
   background-color: #ffffff26;
   border: 1px solid #ffffff26;
   padding: 8px 16px;
   border-radius: 32px;
}

.support {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.leftside {
   justify-content: space-between;
}

.profile_block {
   padding: 8px;
   border: 1px solid #ffffff26;
   border-radius: 56px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   text-align: start;
   cursor: pointer;
   margin: 0;
   position: fixed;
   z-index: 24000;
   left: 10px;
   bottom: 10px;
   width: 212px;
}

.profile {
   display: flex;
   align-items: center;
   gap: 8px;
}

.profile_menu_out {
   display: flex;
   color: #6a6a72;
   cursor: pointer;
   align-items: normal;
   gap: 8px;
   white-space: nowrap;
}

.profile_menu_item {
   display: flex;
   color: #6a6a72;
   cursor: pointer;
   align-items: normal;
   gap: 8px;
   white-space: nowrap;
}

.profile_menu_item img {
   width: 16px;
}

.profile_name {
   color: white;
   font-size: 16px;
}

.profile_balance {
   color: #de762b;
   font-size: 14px;
}

.profile_menu {
   position: absolute;
   bottom: 7px;
   left: -16px;
   transform: translateX(100%);
   background-color: #1f1f21;
   display: flex;
   flex-direction: column;
   gap: 20px;
   height: fit-content;
   padding: 20px;
   border-radius: 24px;
   font-size: 16px;
   z-index: 1;
   width: 258px;
   box-sizing: border-box;
}

.profile_menu_balance_block {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
   gap: 12px;
   padding: 12px;
   border-radius: 12px;
   background-color: #333335;
   box-sizing: border-box;
}

.profile_menu_balance_row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
}

.profile_menu_balance_btn {
   background: #e54270;
   background: radial-gradient(140.16% 200% at -10.1% 18.89%,
         #de642b 0%,
         #e54270 100%);
   padding: 8px 16px;
   border-radius: 32px;
   color: white;
   width: 100%;
   box-sizing: border-box;
   text-align: center;
}

.profile_menu_user_block {
   display: flex;
   flex-direction: column;
   gap: 8px;
   color: #c9c9cb;
}

.divider {
   height: 1px;
   width: 100%;
   background-color: #333335;
}

/* end new code 95 */
/* start new code 97 */
.ref {
   display: flex;
   flex-direction: column;
   gap: 80px;
   padding: 16px;
   max-width: 1166px;
}

.ref_title {
   font-size: 48px;
   font-weight: 700;
   color: #ffffff;
   margin: 0;
}

.ref_container {
   display: flex;
   flex-direction: column;
   gap: 24px;
}

.ref_header_block {
   display: flex;
   align-items: center;
   background-color: #000000;
}

.ref_banner {
   flex: 1;
   height: 240px;
   background-image: linear-gradient(to right,
         rgba(0, 0, 0, 1),
         rgba(255, 255, 255, 0.05),
         rgba(255, 255, 255, 0.05),
         rgba(0, 0, 0, 1)),
      url("/img/ref_banner.png");
   background-size: cover;
}

.ref_header {
   display: flex;
   flex-direction: column;
   gap: 9px;
   padding: 72px 24px 88px 24px;
}

.ref_header_title {
   font-size: 36px;
   font-weight: 700;
   color: #ffffff;
   margin: 0;
}

.ref_header_desc {
   margin: 0;
   color: #8d8d8f;
   font-size: 16px;
}

.ref_block {
   display: flex;
   flex-direction: column;
   background-color: #1f1f21;
   border-radius: 24px;
   max-width: 574px;
   width: 279px;
   height: 258px;
   padding: 16px;
   box-sizing: border-box;
}

.ref_block_title {
   margin: 0;
   font-size: 20px;
   font-weight: 600;
   color: #ffffff;
}

.ref_big_text {
   font-size: 60px;
   font-weight: 700;
   color: #ffffff;
   margin: 0;
}

.ref_block_centered {
   justify-content: space-between;
   align-items: center;
   text-align: center;
}

.ref_withdraw_button {
   margin: 0;
   background: #e54270;
   background: radial-gradient(140.16% 200% at -10.1% 18.89%,
         #de642b 0%,
         #e54270 100%);
   padding: 8px 16px;
   border-radius: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
   gap: 8px;
   width: 100%;
   height: 36px;
}

.ref_block_desc {
   margin: 0;
   font-size: 16px;
   color: #8d8d8f;
}

.ref_link {
   background-color: #333335;
   padding: 8.5px 16px 10.5px 16px;
   border-radius: 8px;
   color: #ffffff;
   font-size: 16px;
   width: fit-content;
   margin: 0;
}

.ref_link_btn {
   background-color: #e54270;
   background: radial-gradient(140.16% 200% at -10.1% 18.89%,
         #de642b 0%,
         #e54270 100%);
   padding: 8px 16px;
   border-radius: 32px;
   color: #ffffff;
   font-size: 16px;
   width: fit-content;
   display: flex;
   align-items: center;
   gap: 8px;
   justify-content: center;
   margin: 0;
}

.ref_content {
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
}

.ref_level_text {
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.ref_level {
   width: 100%;
   height: 4px;
   background-color: #49494a;
}

.ref_level_line {
   width: 67%;
   height: 100%;
   background: #e54270;
   background: radial-gradient(140.16% 200% at -10.1% 18.89%,
         #de642b 0%,
         #e54270 100%);
}

.ref_tutorial {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.ref_tutorial_step {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 16px;
   color: #ffffff;
}

.step_number {
   background-color: #49494a;
   border-radius: 50%;
   padding: 1px 6px;
   line-height: 130%;
   font-size: 14px;
}

/* end new code 97 */
/* start new code 103 */
.rightside {
   margin: 16px;
   border: 1px solid #1F1F21;
   border-radius: 24px;
   background: #151517;
}

.musicabout {
   display: flex;
   flex-direction: column;
   gap: 44px;
   align-items: center;
   padding: 16px;
   position: relative;
}

.music_header {
   display: flex;
   flex-direction: column;
   gap: 20px;
   width: 211px;
   align-items: center;
}

.music_header_buttons {
   display: flex;
   justify-content: space-between;
   gap: 12px;
}

.music_header_like_btn {
   margin: 0;
   padding: 0 8px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   border-radius: 24px;
   border: none;
   background-color: #333335;
   box-sizing: border-box;
   font-size: 14px;
}

.music_header_like_btn:hover {
   background: #444;
}

.music_header_share_btn {
   border: 1px solid #FFFFFF26;
   border-radius: 32px;
   padding: 8px 16px;
   box-sizing: border-box;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   margin: 0;
   font-size: 16px;
}

.music_header_share_btn:hover {
   background: #444;
}

.musictext {
   padding: 0;
   margin: 0;
}

.music_aboutprompt {
   margin: 0;
}

.music_title_block {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 28px;
}

.music_about_desc {
   font-size: 16px;
   color: #C9C9CB;
}

.music_abouttitle {
   margin-bottom: 8px;
}

.music_remix_btn {
   font-size: 16px;
   gap: 8px;
   padding: 8px 16px;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: #333335;
   border-radius: 15px;
}

.music_remix_btn:hover {
   background-color: #54545c;
}

.music_songs_block {
   display: flex;
   flex-direction: column;
   gap: 8px;
   width: 100%;
}

.music_songs_input {
   padding: 0;
   border: none;
   font-size: 16px;
   width: 100%;
   height: 100%;
   color: white;
   background-color: #333335;
   outline: none;
}

.music_songs_input_wrapper {
   box-sizing: border-box;
   width: 100%;
   position: relative;
   display: flex;
   padding: 7px 8px;
   border-radius: 24px;
   background-color: #333335;
   gap: 8px;
}

.music_song {
   display: flex;
   flex-direction: column;
   background-color: #1F1F21;
   border-radius: 16px;
   padding: 12px;
   width: 100%;
   box-sizing: border-box;

}

.music_song_header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 8px;
}

.music_song_header_speak {
   display: flex;
   align-items: center;
   gap: 8px;
}

.music_song_download_btn {
   background-color: #333335;
   width: 32px;
   height: 32px;
   padding: 8px;
   border-radius: 50%;
}

.music_song_download_btn:hover {
   background-color: #54545c;
}

.music_song_footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
}

.music_song_footer_play_line {
   background-color: #333335;
   width: 158px;
   height: 8px;
}

.music_song_footer_played_line {
   background-color: white;
   width: 50%;
   height: 100%;
}

.music_song_footer_play {
   display: flex;
   align-items: center;
   gap: 8px;
}

.music_song_footer_play_img {
   height: 24px;
}

.music_song_footer_volume {
   display: flex;
   align-items: center;
   gap: 4px;
}

.music_song_footer_volume_full_line {
   background-color: #FFFFFF40;
   width: 45px;
   height: 4px;
}

.music_song_footer_volume_line {
   background-color: white;
   width: 50%;
   height: 100%;
   display: flex;
   justify-content: flex-end;
}

.music_song_footer_volume_btn {
   width: 8px;
   height: 8px;
   background-color: white;
   border-radius: 50%;
   position: relative;
   top: -50%;
}

/* end new code 103 */

figure:hover .massimg {
   display: none;
}

figure:hover video {
   display: block !important;
}

.massimg {
   width: 100%;
   border-radius: 15px;
}

.secsel,
.orientationsel {
   background-color: #e45226 !important;
}

.rotate-90 {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   --tw-rotate: 90deg;
}


.prompt_form {
   margin-top: 40px;
   margin-left: 12px;
   display: flex;
   justify-content: center;
   flex-direction: column;
}

.prompt_row {}

.promt_select {
   border-radius: 24px;
   border: 1px solid #49494A;
   padding-left: 11px;
   padding-right: 11px;
   display: flex;
   justify-content: flex-start;
   align-items: center;
   height: 34px;
   font-size: 14px;
   color: #fff;
   cursor: pointer;
}

red {
   color: #E25250
}

green {
   color: green;
}

.promt_select_name {
   margin-left: 10px;
   flex-grow: 1;
}

.promt_select_subname {
   margin-right: 10px;
   white-space: nowrap;

}

.prompt_textarea {
   border-radius: 24px;
   background: #1c1c1f;
   border: 1px solid #1c1c1f;
   display: flex;
   justify-content: baseline;
   flex-direction: row;
   padding: 10px;
   margin-top: 10px;
}

.prompt_textarea textarea {
   background: #1c1c1f;
   outline: none;
   border: none;
   color: #fff;
   flex-grow: 1;
   resize: vertical;
}

.red {
   border: 1px solid red;
}

.error {
   font-size: 13px;
   color: red;
}

.prompt_textarea_buttons button {
   padding: 0px !important;
}

.prompt_textarea_buttons {
   display: flex;
   flex-direction: column;
}

.flexrow {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}

.w45 {
   width: 43%;
}

.promt_imageload span {
   text-align: center;
   color: #fff;
}

.promt_imageload {
   min-height: 120px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   font-size: 12px;
   position: relative;
   overflow: hidden;
}

.prompt_row_row {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}

.mt10 {
   margin-top: 10px;
}

.p0 {
   padding: 0px;
}

.prompt_textarea .img {
   width: 100%;
}

.promt_imageload .clearimage {
   position: absolute;
   right: 1px;
   top: 1px;
   display: none;
}

.createbtn span {
   color: #fff;
}

.figureload {
   background: #1c1c1f;
   border-radius: 24px;
}

.f_blockimage_coll .progress {
   font-size: 1px;
}

.deleteicon {
   position: absolute;
   right: 5px;
   top: 3px;
}

.sound {
   position: absolute;
   left: 5px;
   top: 3px;
}

.copylink {
   position: absolute;
   left: 3px;
   bottom: 3px;
}

.playdbtn {
   position: absolute;
   left: 3px;
   top: 3px;
}

.downloadbtn {
   position: absolute;
   left: 40px;
   bottom: 3px;
}

.recreate {
   position: absolute;
   right: 5px;
   bottom: 3px;
}

.modalwindow {
   position: fixed;
   left: 0px;
   top: 0px;
   display: none;
   z-index: 1010;
   background-color: rgba(16, 15, 15, 0.6);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   width: 100%;
   height: 100%;
   flex-direction: column;
   align-items: center;
   justify-content: center;

}

.modal-body {
   background: #1F1F21;
   border-radius: 24px;
   padding: 10px;
   display: flex;
   flex-direction: row;
   position: relative;
   z-index: 1021;
}

.modal-body video {
   border-radius: 24px;
}

.modal-info {
   width: 300px;
   padding: 10px;
   display: flex;
   flex-direction: column;
   justify-content: start;
   align-items: baseline;
}

.modal-info_row h3 {
   padding-right: 5px;
   font-size: 18px;
   margin: 0px
}

.modal-info_row img {
   width: 64px;
   border-radius: 12px;
}

.modal-info_row {
   color: #fff;
   justify-content: start;
   display: flex;
   align-items: baseline;
}

.textprompt {
   color: #fff;
   font-size: 14px;
}

.modalclose {
   position: absolute;
   right: 9px;
   top: 9px;
   cursor: pointer;
}

.modal-closed {
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0px;
   top: 0px;
   z-index: 1011;
}

#modalwindow_video {
   max-height: 600px;
}

.copyprompt {
   cursor: pointer;
}

.roundbg {
   /* Tags */

   /* Auto layout */
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   padding: 0px 8px 0px;
   gap: 8px;
   margin-right: 5px;
   height: 28px;

   /* Gray 4 */
   background: #333335;
   border-radius: 24px;

   /* Text 14 */
   font-family: 'Segoe UI';
   font-style: normal;
   font-weight: 400;
   font-size: 14px;
   line-height: 130%;
   color: #FFFFFF;


   /* Inside auto layout */
   flex: none;
   order: 0;
   flex-grow: 0;

}

.round1 {
   /* Auto layout */
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   padding: 6px 16px 8px;
   gap: 8px;
   color: #fff;
   height: 32px;
   border: 1px solid rgba(255, 255, 255, 0.15);
   border-radius: 32px;

}

.round2 {
   background: #414142;
}

.alertblock {
   position: fixed;
   bottom: 20px;
   z-index: 20000;
   background: #101012;
   color: #fff;
   left: 45%;
   display: none;
}

.selectmodal {
   position: absolute;
   /* DropList */

   box-sizing: border-box;

   /* Auto layout */
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;

   position: absolute;
   left: 482px;
   top: 343px;
   width: 200px;
   /* Gray 5 */
   background: #1F1F21;
   border: 1px solid rgba(255, 255, 255, 0.15);
   border-radius: 16px;
   z-index: 12000;
   display: flex;
   flex-direction: column;
   align-items: normal;
   justify-content: flex-start
}

.modalitem {
   color: #fff;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   padding: 6px 15px 8px;
   cursor: pointer;
}

.modalitem:hover {

   color: #fff;
   background: rgba(255, 255, 255, 0.1);

}

.modalitem.sel {
   background: url('/img/okitem.png') no-repeat;
   color: #E54270;
   background-position-x: 95%;
   background-position-y: 50%;

}

.selectmodal {
   display: none;
}

.newcreate {
   position: absolute;
   right: 5px;
   bottom: 3px;

}

.subbtn {
   display: none;
   position: absolute;

   width: 159px;
   bottom: 1px !important;
   height: 36px;
   background: radial-gradient(140.16% 200% at -10.1% 18.89%, #DE642B 0%, #E54270 100%);
   border: 1px solid rgba(255, 255, 255, 0.15);
   border-radius: 32px;
}

.videoclipwindow {
   position: fixed;
   left: 0px;
   top: 0px;
   display: none;
   z-index: 240000;
   background-color: rgba(16, 15, 15, 0.6);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   width: 100%;
   height: 100%;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

#masonry figure {
   position: absolute;
   box-sizing: border-box;
   display: inline-block;
   position: absolute;
   color: white;
   border-radius: 8px;
   box-sizing: border-box;
   font-size: 18px;
   margin: 0px;
}

#masonry {
   position: relative;
   max-width: 1200px;
   margin: 0 auto;
   z-index: 0;
}