body {margin: 0; padding: 0; line-height: 1.6; font-family:Roboto, verdana;font-size: 14px;overflow-x: hidden;background-color: #ffe1e1;overflow-y: scroll;}
a { text-decoration: none; color: #000000; transition: all 0.4s ease 0s; display: contents; }
a:hover { text-decoration: none; color: red !important; cursor: pointer; }


video {width: 100%; height: 200px;background-color: #000;margin-bottom: -10px;}


.block {padding:10px 30px;}
@media screen and (max-width:660px){  .block {padding:10px 20px;}} }

.uppercase {text-transform: uppercase;}
.select_block {overflow: hidden; cursor: pointer; background-color: #f45d5d; border-radius: 5px; width: max-content; max-width: fit-content; min-width: 82px; padding: 0 10px 0 0; box-sizing: border-box;}
select {padding: 12px; border: none; font-weight: bold; background-color: #f45d5d; color: #fff; width: 100%; outline: none;}

.button {width: 100%;     font-weight: bold;max-width: 300px; box-sizing: border-box; text-align: center; background: #0eb638; color: #fff; padding: 10px; vertical-align: middle; border-radius: 5px; cursor: pointer; border:none;}
.button_loading {pointer-events: none; user-select: none;background-color:#b9b9b9;}

.button_loading_line {pointer-events: none; transition: none !important; background-image: url(loading_line.gif) !important; background-position: center  !important;background-color: #eaeaea  !important; background-size: 10vh  !important; background-repeat: no-repeat  !important; color: transparent !important;}
.button_loading_line img {display: none;}

.anim {position:relative;opacity:0.9;cursor:pointer;}
.anim:active {top:1px;}
.anim_right:active {top:unset;right:2px !important;}
.anim_left:active {top:unset;left:2px !important;}
.anim:hover {opacity:1;}

.play_bt,.pause_bt,.reset_bt {padding:0 !important;opacity: 1;}
.play_bt:hover,.pause_bt:hover,.reset_bt:hover {background-color:#effff9;}
.reset_bt {width: 45px;min-width: 45px;}
.reset_bt::before{ content: "\21BA";font-size: 27px; top: -1px; position: relative;font-family: "Segoe UI Symbol", "Noto Sans Symbols", "DejaVu Sans", monospace; }
.play_bt::before{ content: "\25B6";font-size: 27px; top: -2px; position: relative;font-family: "Segoe UI Symbol", "Noto Sans Symbols", "DejaVu Sans", monospace; }
.pause_bt::before{content: "\23F8"; font-size: 27px; top: -4px; position: relative;font-family: "Segoe UI Symbol", "Noto Sans Symbols", "DejaVu Sans", monospace; }  
@media screen and (max-width:660px){  .play_butom_custom { }} }

.tx_bold {font-weight:bold;}
.bg_green {background: #f5fff6 !important;}
.bg_green .posts_title::after {background-image: linear-gradient(to right, #29caff, transparent) !important;}

#upload_files {display:none;}
.upload_box_drop { position: fixed; display:none; z-index: 999999999; width: 100%; height: 100vh; border: 3px dashed #007BFF; background-color: #fcfcff; top: 0; left: 0; overflow: hidden; box-sizing: border-box; background-image: url(upload_icon.gif); background-repeat: no-repeat; background-position: center; background-size: contain; }
.upload_box_drop:hover {background-color: #fcfcff;}
.upload_box_drop_selected {background-color: #fcfcff;display:block !important;}
 
 
.upload_button { position: relative; justify-content: flex-start; width: 100%; box-sizing: border-box; text-align: center; cursor: pointer; display:flex; max-width: 400px; border-radius:10px; color: #fff; }
.mini .upload_button_file {padding: 10px 15px; font-size: 14px;}
.mini .upload_button_url {padding: 10px; }
.mini .upload_button_url img{width:20px;height:20px;}
.upload_button_load { position: absolute; top: 0; left: 0; width: 0%; height: 100%; background-color: #21ff006e; z-index: 1; }
@media screen and (max-width:660px) { .mini .upload_button  { width:100%; } }
@media screen and (max-width:660px){ .mini .upload_button_file  { width:100%; } }

.button_loading_line .upload_button_url {opacity:0;}
.button_loading_line .upload_button_file {background:unset;}

.upload_button_file {white-space: nowrap;padding:20px 40px;background: #1f58f8;border-top-left-radius: 10px; border-bottom-left-radius: 10px; font-size: 20px; font-weight: 500;}
.upload_button_url {display:flex;width: 25px;background: #1f58f8;align-items: center;border-left: 1px solid #fff;padding: 20px;border-top-right-radius: 10px; border-bottom-right-radius: 10px;}
.upload_button_url img {filter:invert(1);}

.upload_title {text-align: center; margin: auto; display: flex ; flex-direction: column; align-items: center;margin-bottom:20px;}

.social_drops {display: flex ; width: 100%; max-width: 400px; justify-content: space-between; flex-direction: row; box-sizing: border-box;}
.social_drops div{padding:20px 10px;}
.social_drops img{width:25px;height:25px;}

.header {position: fixed; z-index: 999999998; width: 100%; top: 0; left: 0; box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 12px; background: #fff;}
.header ul {margin: auto;justify-content: space-between;box-sizing: border-box; max-width: 1200px; width: 100%; display: flex ; align-items: center; padding: 5px 10px;}
.header ul img{height: 45px;}
.logo {}
.menu {cursor:pointer;transition:all 0.4s ease;}


.main {display: flex ; flex-wrap: wrap; max-width: 1200px; margin: auto;border-radius:20px;overflow: hidden;margin: 0 10px;margin-bottom:10px;}

.left {position: relative; z-index:1;transition:all 0.4s ease;width: 0px !important;min-width: 270px;max-width: 270px;flex:1;background: linear-gradient(to right, #d1172d, #ff4b4b);min-width:unset;}
.left p {box-sizing: border-box;    text-align: left;min-width: 270px;color:#fff;cursor:pointer;margin: 0; padding: 20px; border-bottom: 1px solid #ffffff2e; display: flex ; gap: 20px; align-items: center;}
.left p img{width:15px;height:15px;filter:invert(1);}
.left_next {visibility: hidden;margin-left:auto;opacity: 0.5;}
.left p:hover {background-color: #ffffff;color:#000;}
.left p:hover img{filter:unset;}
.left .this_url {background:#fff;color:#000;}
.left .this_url img{filter:unset;}
.left .this_url  .left_next{visibility: visible;}
.left::-webkit-scrollbar {width: 0;background: transparent;}

@media screen and (max-width:900px){ .left {position: fixed; left: -1000px;min-width: 270px; display: block; height: 100%;top: 55px;} }

.left_hidden {transition:all 0.4s ease;flex:unset;overflow-y: scroll;}
@media screen and (max-width:900px){ .left_hidden {left:0;z-index:3;} }

.right {position: relative; z-index: 2;transition:all 0.4s ease; flex:1; text-align: left; background-color: #fff;width: 100%;box-sizing: border-box;}
 @media screen and (max-width:900px){ .right_hidden {opacity:0.5;} }
 
.status {overflow-wrap: break-word;color: #000;}
.status img {width:12px;height:12px;}	
.status div {padding:10px 20px;background: #ededed;text-align: left;display:flex;gap:20px;align-items: center; line-break: anywhere;}	
.status div:first-child {padding-top: 20px;}
.status div:last-child {padding-bottom: 20px;}	
.vertical_block {display:flex;gap:10px;flex-direction: column;}

.editor_panel {display:none;background: linear-gradient(to right, #050607, #0f674e);color: #fff;padding-bottom: 20px;}	

.horizontal_block {display:flex;align-items: center;gap:20px;}
.max {width:100%;max-width:100%;}
.bg_white {background-color:#fff;color:#000;}
.bg_indigo {background-color:#842395;}
.bg_red {background-color:#da4d4d;}
.bg_blue{background-color:#4c9df9;}

.page_title {margin-top: 10px; margin-bottom: -15px;}
.page_description {font-weight: normal;text-align: center;}

label {display: flex ; align-items: center; gap: 10px;cursor:pointer;}
input[type="checkbox"] {cursor:pointer; transform: scale(1.2);}

#waveform {position: relative;margin: 0 15px;padding: 0 15px;}
@media screen and (max-width:660px){ #waveform {padding:unset;} }

.waveform {cursor: grab;  z-index: 1; opacity:0.5; position: relative; margin-top: 60px;margin-bottom: 80px;background: #e7e7e7; border-radius: 10px;border-radius: 5px;}
.waveform_selected {background:#fff;z-index: 2; overflow: visible; opacity:1; }
.waveform_selected .region-time {opacity:1;}
.waveform_selected .cursor-time {opacity:1;}
.waveform_selected div::part(region) {opacity:1;}
.waveform_selected div::part(region-content) {opacity:1;}
.waveform_selected div::part(hover) {opacity:1;}
.waveform_selected div::part(cursor) {opacity:1;}


.yes_mobile{display:none}
@media screen and (max-width:660px){ .no_mobile{display:none !important;} }
@media screen and (max-width:660px){ .yes_mobile{display:inline-block} }

.position {height:35px; font-weight:600; outline: none;text-align: center;font-size:18px;width:100%;}
.plus_minus_block {display:flex;    width: 100%;}
.plus_minus {border-radius: 4px; padding: 8px; width: 20px; text-align: center; background: #f45d5d;cursor:pointer;color: #fff; font-weight: bold;}
.plus_minus_right {border-top-right-radius: 0;border-bottom-right-radius: 0;}
.plus_minus_left {border-top-left-radius: 0;border-bottom-left-radius: 0;}
.plus_minus_title {color: #accdff; margin-bottom: 10px;justify-content: space-around;}

.range_bar {width:100%;cursor: pointer;outline: none;}
.no_wrap {white-space: nowrap;}

.posts {display: grid;grid-template-columns: repeat(2, 1fr);gap:20px;padding-top: 20px; padding-bottom: 40px;}
.posts_item {width: 100%;    border: 1px solid #ffdddd;text-align: left;padding: 15px;background: #fefff5; box-sizing: border-box; border-radius: 10px;}
.posts_title {font-weight: 500; font-size: 18px; padding-bottom: 10px;margin-bottom: 10px;position: relative; display: flex ; align-items: center;}
.posts_description {color: #607D8B; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.posts_title::after { content: ""; position: absolute;  bottom: 0; display: block; width: 100%; height: 4px; background-image: linear-gradient(to right, #ffb829, transparent); margin-top: 10px; }
@media screen and (max-width:660px){ .posts{grid-template-columns: 1fr;} }

.post_body {line-height:1.8;font-size: 16px;}

.footer {width: 100%; flex-wrap: wrap;background: linear-gradient(to right, #412d2d, #c35252); color: #fff; padding: 20px; flex-basis: 100%;display: flex ; gap:30px; align-items: center; justify-content: center;box-sizing: border-box; }
.footer div {color: #fff;}


/* SWITCH BLOCK */
.checkbox-switch { cursor: pointer;display: inline-block; overflow: hidden; position: relative; text-align: left; width: 140px; min-width: 140px; height: 35px; -webkit-border-radius: 30px; border-radius: 30px; line-height: 1.2; }
.checkbox-switch input.input-checkbox { position: absolute; left: 0; top: 0; width: 140px; min-width: 140px;height: 35px; padding: 0; margin: 0; opacity: 0; z-index: 2; cursor: pointer; }
.checkbox-switch .checkbox-animate { position: relative; width: 140px; min-width: 140px; height: 35px; background-color: #e49d9d; -webkit-transition: background 0.25s ease-out 0s; transition: background 0.25s ease-out 0s; }
.checkbox-switch .checkbox-animate:before { content: ""; display: block; position: absolute; width: 23px; height: 23px; border-radius: 40%; -webkit-border-radius: 40%; background-color: #fff; top: 6px; left: 5px; -webkit-transition: left 0.3s ease-out 0s; transition: left 0.3s ease-out 0s; z-index: 10; pointer-events: none; user-select: none; box-shadow: 1px 1px 5px rgba(0, 0, 0, .2); background: radial-gradient(ellipse at top, #fff 40%, #dadada); }

.checkbox-switch input.input-checkbox:checked + .checkbox-animate { background-color: #4c9df9; }
.checkbox-switch input.input-checkbox:checked + .checkbox-animate:before { left: 110px; }
.checkbox-switch .checkbox-off { float: right; color: #fff; padding-top: 8px; padding-right: 20px; font-size:14px; -webkit-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; opacity: 1; }
.checkbox-switch .checkbox-on { display: none; float: left; opacity: 0; color: #fff; padding-top: 8px; padding-left: 12px; font-size:14px; -webkit-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; }
.checkbox-switch input.input-checkbox:checked + .checkbox-animate .checkbox-off { display: none; opacity: 0; }
.checkbox-switch input.input-checkbox:checked + .checkbox-animate .checkbox-on { display: block; opacity: 1; }

/* WAVESURF STYLES */
div::part(hover-label) { padding:0 6px; background-color:#77ec67; border-radius: 3px; font-size: 12px; margin-top: 14px; z-index:9; }
div::part(region-content) { text-align: center !important; opacity:0; left: 0; width:100%; position: absolute; bottom: 12px; z-index: 9999999; color:#ff00ae; font-size: 12px; text-wrap-mode: nowrap; line-height: 1.2; }
div::part(region) {opacity:0; }
div::part(region-handle-left)  { position: absolute; z-index: 9999999; width: 15px; height: 100%; top: 0px; cursor: ew-resize; word-break: keep-all; left: -15px; background: #77ec67; border-radius: 5px 0px 0px 5px  !important; border-left:unset; background: radial-gradient(circle, #8fff7f, #37d121); }
div::part(region-handle-left):before { background-repeat: no-repeat; background-position: 50%; content: " "; width: 5px; height: 22px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 3 15' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM1.5 15a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd' fill-rule='evenodd'/%3E%3C/svg%3E"); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); margin-top:0; filter: invert(1); }

div::part(region-handle-right)  { position: absolute; z-index: 9999999; width: 15px; height: 100%; top: 0px; cursor: ew-resize; word-break: keep-all; right: -15px; background: #77ec67; border-radius: 0px 5px 5px 0px !important; border-right: unset !important; background: radial-gradient(circle, #8fff7f, #37d121); }
div::part(region-handle-right):before { background-repeat: no-repeat; background-position: 50%; content: " "; width: 5px; height: 22px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 3 15' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM1.5 15a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd' fill-rule='evenodd'/%3E%3C/svg%3E"); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); margin-top:0; filter: invert(1); }

div::part(wrapper) {}
div::part(scroll) { overflow-x: unset; overflow-y: unset;}
div::part(cursor) {z-index:6;opacity:0;}
div::part(hover) {opacity:0;}
.cursor-time {position: absolute; opacity:0; cursor:pointer; width: 70px; height: 9px; bottom: 188px; content: attr(data-value); color: #ffffff; font-size: 12px; display: flex; align-items: center; padding: 5px 0; justify-content: center; z-index: 4; left: -34px; background: #ff5c5c; border-radius: 4px; }
.region-time {position: absolute; opacity:0; width: 70px; height: 12px; bottom: -12px; content: attr(data-value); color: #ffffff; font-size: 12px; display: flex; align-items: center; padding: 5px 0; justify-content: center; z-index: 4; background: #3ed428; border-radius: 4px; }

.block_form { display: flex;  align-items: center; justify-content: space-between;max-height: 50px; overflow: hidden; position: absolute; top: -44px; margin: auto; text-align: left; width: 100%;}
.name_form {font-size: 16px; text-align: center; font-weight:500; color: #fff; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;width: 90%;}
.close_form {    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' fill='none'%3E%3Cpath d='M13 26c7.2 0 13-5.8 13-13S20.2 0 13 0 0 5.8 0 13s5.8 13 13 13Z' fill='%23fff'/%3E%3Cpath d='M17.7 9.5c.4-.3.4-.9 0-1.2-.3-.4-.9-.4-1.2 0L13 11.7 9.5 8.3c-.3-.4-.9-.4-1.2 0-.4.3-.4.9 0 1.2l3.4 3.5-3.4 3.5c-.4.3-.4.9 0 1.2.3.4.9.4 1.2 0l3.5-3.4 3.5 3.4c.3.4.9.4 1.2 0 .4-.3.4-.9 0-1.2L14.3 13l3.4-3.5Z' fill='%231A1E26'/%3E%3C/svg%3E");padding-right: 0; width: 26px; height: 23px; background-size: 26px;background-size: contain; background-repeat: no-repeat;}

.move_form {
    cursor: move;
    user-select: none;
    padding: 5px 10px;   
    display: flex;
    align-items: center;
}

.move_form::before {
    content: "⠿";
    margin-right: 8px;
    font-size: 18px;
    line-height: 1;
}

.region-time-left {left: -42px;}
.region-time-right {right: -42px;}


.modal_block {display:none;background-color: #0000004d; width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 999999999999999;}
.modal_content {box-shadow: 0 5px 40px rgba(0, 0, 0, .2);position: absolute;box-sizing: border-box; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; width: 100%; max-width: 650px; border-radius: 20px;overflow: hidden;}
.modal_title {background: linear-gradient(to right, #d1172d, #ff4b4b);padding:10px 20px;color:#fff;text-align: left;font-size:16px;}
.modal_body { background-color: #fff; padding: 20px;}
@media screen and (max-width:660px){ .modal_content {width:94%;} }

.grid_block {display:flex;flex-wrap: wrap;}
.grid_block div {flex: 1 0 50%; box-sizing: border-box; padding: 10px;border-radius:10px;}
.grid_block div:hover {background: #f2f2f2;}

.play_butom_custom {position: fixed; left: 0; bottom: 0; display:none; width: 100%; box-sizing: border-box; z-index: 999999;}
.play_butom_custom_content {background: linear-gradient(to right, #050607, #0f674e);position: relative; width: 100%; display: flex ; justify-content: flex-end;padding: 9px 20px 10px 20px;}
.play_butom_custom_play {box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 12px; cursor:pointer;background: linear-gradient(to right, #d1172d, #ff4b4b); width: 80px; height: 80px; position: absolute; top: -28px; border-radius: 38%; left: 15px;}
.play_butom_custom_right {margin-right: 33px;display: flex ; gap: 10px;}
.play_butom_custom_content .reset_bt::before{ position: absolute !important; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.play_butom_custom_content .play_bt::before{ position: absolute !important; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.play_butom_custom_content .pause_bt::before{ position: absolute !important; top: 48%; left: 50%; transform: translate(-50%, -50%);}
.play_butom_custom_play:active {top:-27px;}
@media screen and (max-width:660px){ .play_butom_custom {display:block;} }

.keyword {display: inline-block; cursor:pointer; border-radius: 13px; border: 1px solid #ff928b; margin: 5px; color: #0a6079; padding: 3px 10px;}
.keyword:hover {background-color: #f2f2f2;}