body {
    background-color: rgb(248, 248, 248);
    overflow-x: hidden;
    box-sizing: border-box;
}
html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

.visible {
    display: block;
}
.expanded {
    width: 250px;
}

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100%;
    background: white;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    font-size: 36px;
    font-weight: bold;
    overflow: hidden;
}
  
  .logo {
    display: none;
  }
  
  .letter {
    opacity: 0;
    transform: translateY(20px);
    animation: jumpIn 0.6s forwards;
  }
  
  @keyframes jumpIn {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    50% {
      opacity: 1;
      transform: translateY(-10px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .liked {
    background-image: url('heart-filled.svg');
  }
  .not-liked {
    background-image: url('heart-outline.svg');
  }
  
  
  

/*--- --- --- --- --- меню навігації --- --- --- --- ---*/
@media screen and (min-width: 1100px) {
#nav-menu {
    position: fixed;
    top: 30px;
    left: 20px;
    display: block;
    height: 90vh;
    width: 80px;
    background-color: white;
    border-radius: 20px;
    box-shadow: 0px 0px 10px rgb(189, 189, 189);
    transition: 0.45s;
    z-index: 5;
}
#nav-menu:hover {
    width: 250px;
}
a {
    text-decoration: none;
}
.text-href {
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    position: relative;
    top: -50px;
    left: 50px;
}
#text-href-4 {
    position: relative;
    top: -55px;
    width: 150px;
}
#text-href-5 {
    position: relative;
    top: -60px;
}
#text-href-6 {
    position: relative;
    top: -65px;
}
#text-href-7 {
    position: relative;
    top: -45px;
}
#text-href-8 {
    position: relative;
    top: -55px;
}
#text-href-9 {
    position: relative;
    top: -50px;
}
#line-nav-1 {
    position: relative;
    left: -40px;
    display: block;
    height: 1px;
    width: 80px;
    background-color: rgb(219, 219, 219);
    transition: 0.45s;
}
#line-nav-2 {
    position: relative;
    left: -40px;
    display: block;
    height: 1px;
    width: 80px;
    background-color: rgb(219, 219, 219);
    transition: 0.45s;
}
#img-href-5 {
    position: relative;
    top: -2px;
}
#img-href-6 {
    position: relative;
    left: 6px;
}
#history-of-payment-img {
    position: relative;
    left: -5px;
    top: -5px;
}
#img-href-7 {
    position: relative;
    left: 6px;
    top: 5px;
}
#nav-menu li {
    position: relative;
    right: 25px;
    display: block;
    height: 50px;
    width: 120px;
    cursor: pointer;
    transition: 0.45s;
} 
#nav-menu li a {
    display: block;
    height: 100%;
    width: 100%;
}
#nav-menu li a p:hover {
    color: gray;
}
#nav-menu li:hover {
    background-color: rgb(226, 225, 225);
    width: 200px;
    height: 50px;
    z-index: 2;
}
/*--- --- --- --- --- фільтер контейнер --- --- --- --- ---*/
#filter-conteiner {
    position: relative;
    padding: 0px 15px 0px 15px;
    display: block;
    height: 620px;
    width: 20%;
    background-color: white;
    box-shadow: 0px 0px 10px rgb(189, 189, 189);
    border-radius: 20px;
}
.custom-placeholder {
    color: rgb(169, 169, 169)    ;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position: relative;
    top: 6px;
}
#text-filter {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    text-align: center;
    color: gray;
}
.text-filter {
    position: relative;
    top: 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
}
.input-filter {
    font-size: 15px;
    width: calc(100% - 12px);
    height: 20px;
    border: solid 1px gray;
    border-radius: 5px;
    padding: 5px;
}
.input-filter-number {
    font-size: 15px;
    height: 20px;
    width: 60px;
    border: solid 1px gray;
    border-radius: 5px;
    padding: 5px;
}
.btn-searth-inf {
    position: absolute;
    bottom: 20px;
    display: flex;
    height: 30px;
    width: calc(100% - 30px);
    background-color: rgb(69, 69, 255);
    border-radius: 10px;
    justify-content: center;
    cursor: pointer;
}
.btn-searth-inf img {
    position: relative;
    top: 5px;
}
.btn-searth-inf p {
    position: relative;
    top: -10px;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
}

/*--- --- --- --- --- меню міні навігації --- --- --- --- ---*/
#conteiner-of-functions-ads {
    display: block;
    height: 100%;
    width: 78%;
}
#menu-of-chanels-options {
    display: block;
    height: 70px;
    width: 100%;
    background-color: white;
    border-radius: 20px 20px 0px 0px;
    box-shadow: 0px 0px 10px rgb(189, 189, 189);
}

#burger-btn {
    display: none;
}
#nav-menu-in-burger {
    display: none;
}
#nav-menu-in-burger p{
    display: none;
}
#nav-menu-in-burger ul{
    display: none;
}
#wallet-balance-m {
    display: none;
}
#wallet-balance-m img {
    display: none;
}
#wallet-balance-m p {
    display: none;
}
.bottom-section-informaton {
    display: block;
    height: 180px;
    width: 100%;
    position: relative;
    left: 0px;
}
.information-for-user {
    position: absolute;
    right: 10px;
    bottom: 5px;
    display: flex;
    gap: 10px;
}
.information-for-user a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: black;
    margin: 10px;
}
#empty-menu h1 {
    position: relative;
    top: 5px;
    left: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
}
.custom-placeholder {
    position: absolute;
    top: 7px;
    left: 5px;
    color: #aaa;
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
    pointer-events: none;
    z-index: 2;
}
.select2-container--default .select2-selection--multiple {
    font-size: 15px;
}
.select2-container .select2-dropdown {
    font-size: 15px;
}
.select2-container .select2-results__option {
    font-size: 15px;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    font-size: 15px;
}
}
.dropdown-filter {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 500px;
    margin-right: 20px;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
}
.dropdown-list-filter {
    display: none;
    position: absolute;
    width: 100%;
    background: white;
    border: solid 1px rgb(188, 188, 188);
    max-height: 150px;
    overflow-y: auto;
    z-index: 10;
}
.dropdown-list-filter div {
    padding: 8px;
    cursor: pointer;
}
.dropdown-list-filter div:hover {
    background: #f0f0f0;
}
.select2-container .select2-dropdown {
    font-family: 'Arial', sans-serif;
}
.select2-container .select2-results__option {
    font-family: 'Arial', sans-serif;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    font-family: 'Arial', sans-serif;
}
/*--- меню навігації + фільтер контейнер + меню міні навігації (max 1100px) ---*/
@media screen and (max-width: 1100px) {
    .custom-placeholder {
        opacity: 0;
        position: absolute;
        top: 10px;
        left: 13px;
        color: #aaa;
        font-size: 17px;
        font-family: Arial, Helvetica, sans-serif;
        pointer-events: none;
        z-index: 2;
      }
    .select2-container--default .select2-selection--multiple {
        min-height: 40px !important;
        border: 1px solid gray !important;
        overflow-y: auto; /* Додатково, якщо буде багато тегів */
        padding: 4px 8px;
        display: flex;
        align-items: center;
    }
    .btn-searth-inf {
        margin-top: 18px;
        display: flex;
        height: 30px;
        width: 150px;
        background-color: rgb(69, 69, 255);
        border-radius: 10px;
        justify-content: center;
        padding: 10px 30px 10px 30px;
        cursor: pointer;
    }
    .btn-searth-inf img {
        position: relative;
        top: 5px;
    }
    .btn-searth-inf p {
        position: relative;
        top: -18px;
        color: white;
        font-family: Arial, Helvetica, sans-serif;
    }
    #filter-conteiner {
        display: none;
    }
    #text-filter {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        text-align: center;
        color: gray;
    }
    .text-filter {
        position: relative;
        top: 12px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 17px;
    }
    .input-filter {
        font-size: 15px;
        width: 100%;
        height: 20px;
        padding-left: 10px;
    }
    .input-filter-number {
        font-size: 15px;
        height: 20px;
        width: 60px;
        padding-left: 10px;
    }
    
    #conteiner-of-functions-ads {
        display: block;
        height: 500px;
        width: 70%;
        position: absolute;
        top: 20px;
    }
    #menu-of-chanels-options {
        display: block;
        height: 80px;
        width: 100%;
        background-color: white;
        border-radius: 20px 20px 0px 0px;
        box-shadow: 0px 0px 10px rgb(189, 189, 189);
    }
    #nav-menu {
        display: none;
    }
    #burger-btn {
        display: block;
        width: 30px;
        position: relative;
        top: 20px;
        left: 5%;
    }
    .line-burger-btn {
        border-radius: 10px;
        margin-top: 5px;
        display: block;
        height: 4px;
        width: 30px;
        background-color: black;
    }
    #nav-menu-in-burger {
        position: fixed;
        top: 0;
        left: -100%;
        display: block;
        height: 100%;
        width: 75%;
        background-color: white;
        border-radius: 0px 20px 20px 0px;
        box-shadow: 0px 0px 10px rgb(189, 189, 189);
        transition: 0.45s;
        z-index: 5;
        transition: 0.5s;
        
    }
    #nav-menu-in-burger ul {
        position: relative;
        top: 50px;
        left: 10px;
    }
    #nav-menu-in-burger li {
        position: relative;
        right: 25px;
        display: block;
        height: 50px;
        width: 120px;
        cursor: pointer;
        transition: 0.45s;
    }
    #nav-menu-in-burger li a {
        display: block;
        width: 100%;
        height: 100%;
    }
    .text-href {
        font-family: Arial, Helvetica, sans-serif;
        color: black;
        position: relative;
        top: -50px;
        left: 50px;
    }
    #text-href-4 {
        position: relative;
        top: -55px;
        width: 150px;
    }
    a {
        text-decoration: none;
    }
    #text-href-5 {
        position: relative;
        top: -56px;
    }
    #text-href-6 {
        position: relative;
        top: -65px;
    }
    #text-href-7 {
        position: relative;
        top: -45px;
    }
    #text-href-8 {
        position: relative;
        top: -55px;
    }
    #text-href-9 {
        position: relative;
        top: -50px;
    }
    #history-of-payment-img {
        position: relative;
        left: -5px;
        top: -5px;
    }
    #img-href-7 {
        position: relative;
        top: 5px;
        left: 6px;
    }
    #line-nav-1 {
        position: relative;
        left: -30px;
        display: block;
        height: 1px;
        width: 100%;
        background-color: rgb(219, 219, 219);
        transition: 0.45s;
    }
    #line-nav-2 {
        position: relative;
        left: -30px;
        display: block;
        height: 1px;
        width: 100%;
        background-color: rgb(219, 219, 219);
        transition: 0.45s;
    }
    #text-name-brend {
        font-size: 25px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        position: relative;
        top: 20px;
        text-align: center;
    }
    #close-burger-btn {
        display: block;
        height: 30px;
        width: 30px;
        position: absolute;
        top: 20px;
        right: 20px;
        border: solid 2px rgb(103, 102, 102);
        border-radius: 8px;
    }
    #line-close-b-1 {
        display: block;
        position: relative;
        left: 14px;
        height: 30px;
        rotate: 135deg;
        width: 3px;
        background-color: rgb(103, 102, 102);
    }
    #line-close-b-2 {
        position: relative;
        top: -30px;
        left: 14px;
        rotate: 45deg;
        display: block;
        height: 30px;
        width: 3px;
        background-color: rgb(103, 102, 102);
    }
    .bottom-section-informaton {
        display: block;
        height: 150px;
        width: 100%;
        position: relative;
        right: 0;
        top: 10px;
        font-family: Arial, Helvetica, sans-serif;
    }
    .reserved-text {
        display: block;
        width: calc(100% - 15px);
        text-align: center;
        font-size: 14px;
        padding-top: 15px;
    }
    .information-for-user {
        display: flex;
        width: 100%;
        flex-direction: column;
        text-align: center;
    }
    .information-for-user a {
        font-size: 14px;
        color: black;
        margin: 10px;
    }
    #empty-menu h1 {
        display: none;
    }
}
/*--- --- --- --- --- меню міні навігації --- --- --- --- ---*/
.reserved-text {
    position: absolute;
    right: 10px;
    display: block;
    height: 40px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding-bottom: 30px;
}

#empty-menu {
    display: flex;
    position: relative;
    left: 0px;
    height: 70px;
    width: 70%;
    box-shadow: 0px 0px 10px rgb(189, 189, 189);
    border-radius: 20px;
    background-color: white;
}
#half-nav-menu li {
    display: inline;
    margin-left: 10px;
    cursor: pointer;
}
#element-half-menu {
    display: none;
}
#btn-wallet-half-m {
    position: relative;
    top: -5px;
}
.conteiner-wallet-inf {
    position: relative;
    top: 5px;
    display: flex;
    border: solid 1px gray;
    border-radius: 7px;
}
#btn-profil-half-m,
#btn-wallet-half-m {
    position: relative;
    right: 38px;
}
@media screen and (min-width: 1100px) {
#conteiner-of-menus {
    display: flex;
    height: 70px;
    width: 90%;
    position: absolute;
    top: 17px;
    left: 10%;;
}
#conteiner-of-menus.notAutorirate-format {
    width: 98%;
    position: absolute;
    top: 17px;
    left: 1%;;
}
#conteiner-balance-user-n {
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    top: 0px;
    display: block;
    height: 40px;
    min-width: 50px;
    border-radius: 10px;
    padding-right: 5px;
    line-height: 8px;
    text-align: center;
}
}
/*--- --- --- --- --- контейнер оголошень --- --- --- --- ---*/
@media screen and (max-width: 1100px) {
    #conteiner-of-menus {
        display: flex;
        height: 70px;
        width: 96%;
        position: absolute;
        top: 17px;
        margin-left: 2%;
        margin-right: 2%;
    }
}

@media screen and (min-width: 1100px) {
#conteiner-of-ads{
    position: absolute;
    top: 140px;
    left: 10%;
    display: flex;
    gap: 20px;
    width: 88%;
    height: 100%;
}
#conteiner-of-ads.notAutorirate-format{
    left: calc(3% + 10px);
    width: 92%;
}
.conteiner-channel-inf-ad.notAutorirate-format {
    left: 7%;
    margin-right: 0%
}
#btns-complete-filter,
#filter-conteiner-in-btn {
    display: none;
}
}
@media screen and (max-width: 1100px) {
    #conteiner-of-ads{
        position: absolute;
        top: 100px;
        display: block;
        width: 96%;
        height: 100%;
        margin-left: 2%;
        margin-right: 2%;
    }
}
@media screen and (max-width: 1300px) {
#all-ads {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(3, 34.5%);
    height: 100%;
    width: 100%;
}
}
@media screen and (max-width: 1100px) {
    #all-ads {
        margin-top: 10px;
        display: grid;
        grid-template-columns: repeat(3, 34.5%);
        height: 100%;
        width: 100%;
    }
}
@media screen and (min-width: 1300px) {
    #all-ads {
        margin-top: 10px;
        display: grid;
        grid-template-columns: repeat(4, 25.6%);
        height: 100%;
        width: 100%;
    }
}
@media screen and (max-width: 680px) {
    #all-ads {
        margin-top: 10px;
        display: grid;
        grid-template-columns: repeat(2, 52.6%);
        height: 100%;
        width: 100%;
    }
    #conteiner-of-functions-ads {
        position: relative;
        left: 1%
    }
}
@media screen and (min-width: 960px) {
#half-nav-menu {
    display: flex;
    position: relative;
    left: 1%;
    height: 70px;
    width: 27%;
    box-shadow: 0px 0px 10px rgb(189, 189, 189);
    border-radius: 20px;
    background-color: white;
}
#half-nav-menu.notAutorirate-format {
    width: 29%;
}
#Open-filter-btn {
    display: none;
}
#conteiner-of-massege {
    position: fixed;
    top: 0;
    right: -200%;
    background-color: white;
    box-shadow: 0px 2px 10px rgb(163, 163, 163);
    height: 100%;
    width: 400px;
    transition: 0.45s;
    z-index: 6;
}
#conteiner-fnc-m,
#btn-message-empty-m {
    display: none;
}
}
@media screen and (max-width: 1100px) {
    #conteiner-of-ads {
        position: relative;
        top: 130px;
    }
    #filter-conteiner {
        display: none;
    }
    #conteiner-of-functions-ads {
        display: block;
        width: 98%;
    }
    #half-nav-menu {
        display: none;
    }
    #menu-of-chanels-options {
        height: 65px;
    }
    #menu-of-chanels-options #conteiner-of-search{
        position: relative;
        top: -14px;
    }
    #empty-menu {
        position: fixed;
        margin-left: 2%;
        margin-right: 2%;
        display: block;
        width: 96%;
        z-index: 6;
    }
    #conteiner-fnc-m {
        display: flex;
        position: absolute;
        right: 10%;
        top: 18px;
    }
    #wallet-balance-m {
        margin-left: 8px;
        display: flex;
        height: 35px;
        padding-right: 5px;
        min-width: 80px;
        max-width: 250px;
        border: 1px solid gray;
        border-radius: 5px;
    }
    #wallet-balance-m img {
        display: block;
        height: 45px;
        position: relative;
        top: -5px;
    }
    #wallet-balance-m p {
        display: block;
        font-size: 15px;
        font-family: Arial, Helvetica, sans-serif;
        position: relative;
        top: -5px;
    }
    #Open-filter-btn {
        position: relative;
        top: 130px;
        display: flex;
        height: 60px;
        width: 96%;
        margin-left: 2%;
        margin-right: 2%;
        box-shadow: 0px 0px 10px rgb(189, 189, 189);
        border-radius: 20px;
        background-color: white;
    }
    #filter-text-in-btn {
        font-size: 20px;
        font-family: Arial, Helvetica, sans-serif;
        margin-left: 20px;
    }
    #Open-filter-btn img {
        position: absolute;
        top: 14px;
        right: 6%;
    }
    #Opened-menu-filter {
        position: fixed;
        padding: 5%;
        top: -150%;
        left: 0;
        display: block;
        height: 85%;
        width: 90%;
        box-shadow: 0px 0px 10px rgb(189, 189, 189);
        border-radius: 0px 0px 20px 20px;
        background-color: white;
        z-index: 7;
        transition: 0.45s;
    }
    .input-filter-opened {
        font-size: 17px;
        display: block;
        height: 30px;
        width: calc(100% - 10px);
        border-radius: 5px;
        border: solid 1px gray;
        padding: 5px;
    }
    .input-filter-number-opened {
        font-size: 17px;
        height: 30px;
        width: 80px;
        border-radius: 5px;
        border: solid 1px gray;
        padding: 5px;
    }
    #filter-conteiner-in-btn {
        overflow-y: auto;
        padding: 10px 30px 0px 30px;
        display: block;
        height: 630px;
        width: calc(100% - 60px);
        background-color: white;
        box-shadow: 0px 0px 10px rgb(189, 189, 189);
        border-radius: 20px;
        position: relative;
    }
    #element-filter-opened {
        display: block;
        height: 300px;
        width: 100%;
        background-color: gray;
    }
    #btns-complete-filter {
        position: relative;
        left: calc((90% - 250px)/ 2);
        display: flex;
        width: 250px;
        gap: 25%;
    }
    #btns-complete-filter p{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
    }
    #close-filter-menu {
        padding: 10px;
        display: block;
        height: 20px;
        width: 150px;
        cursor: pointer;
    }
    #btn-message-empty-m {
        position: relative;
        top: 15px;
        margin-left: 12%;
    }
}
@media screen and (max-width: 960px) {
    #Opened-menu-filter {
        height: 100%;
    }
    #btns-complete-filter{
        position: relative;
        top: -105px;
        display: flex;
    }
    #apply-filter-menu {
        position: relative;
        top: 8px;
        line-height: 20px;
        padding: 5px;
    }
    #close-burger-btn {
        position: absolute;
        top: 8px;
        right: 8px;
    }
    #conteiner-of-massege {
        position: fixed;
        top: 0;
        right: -200%;
        background-color: white;
        box-shadow: 0px 2px 10px rgb(163, 163, 163);
        height: 100%;
        width: 90%;
        transition: 0.45s;
        z-index: 6;
    }
}
#line-close-m-1 {
    display: block;
    position: relative;
    left: 14px;
    height: 30px;
    rotate: 135deg;
    width: 3px;
    background-color: rgb(103, 102, 102);
}
#line-close-m-2 {
    position: relative;
    top: -30px;
    left: 14px;
    rotate: 45deg;
    display: block;
    height: 30px;
    width: 3px;
    background-color: rgb(103, 102, 102);
}

#all-messege {
    display: block;
    height: calc(90% - 210px);
    width: 95%;
    position: absolute;
    right: 10px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-bottom: 100px;
}
#all-messege.Connect {
    height: 90%;
}
.conteiner-connect-tg-msg {
    display: block;
    height: 120px;
    width: 100%;
    position: absolute;
    bottom: 0px;
    border: solid 1px gray;
    border-width: 1px 0px 0px 0px;
    background-color: white;
}
@media screen and (min-width: 500px) {
    .text-tg-conn-btn {
        padding: 15px;
    }
}
@media screen and (max-width: 500px) {
    .text-tg-conn-btn {
        padding: 8px;
    }
}
.btn-connect-tg-msg {
    display: flex;
    width: 90%;
    height: 50px;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #0056b3;
    position: relative;
    top: 20px;
    left: 5%;
    color: white;
    border-radius: 10px;
    cursor: pointer;
}
.menu-connect-tg {
    display: flex;
    gap: 5px;
    width: 100%;
    justify-content: center;
}
#cont-img-tg-btn {
    position: relative;
    top: 5px;
    display: block;
    height: 40px;
    width: 40px;
}
#cont-img-tg-btn img {
    height: 100%;
    width: 100%;
}
#messege-main-text{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    position: relative;
    left: 60px;
}
#close-messege-menu {
    display: block;
    height: 30px;
    width: 30px;
    position: absolute;
    top: 10px;
    left: 10px;
    border: solid 2px rgb(103, 102, 102);
    border-radius: 8px;
}
#conteiner-of-main-btn-empl {
    position: absolute;
    right: 5%;
    top: 0px;
    display: flex;
    height: 50px;
    width: 50%;
}


.conteiner-msg {
    display: block;
    min-height: 80px;
    width: 95%;
    background-color: white;
    border: solid 1px gray;
    border-radius: 5px;
    margin-top: 5px;
}
.conteiner-img-msg {
    width: 20%;
}
.menu-msg {
    display: flex;
}
.btn-msg {
    margin-top: 5px;
    display: block;
    height: 25px;
    text-align: center;
    justify-content: center;
    color: blue;
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    bottom: 15px;
    cursor: pointer;
}
.btn-delete-msg {
    position: absolute;
    right: 30px;
    font-size: 25px;
    cursor: pointer;
    color: gray;
}
@media screen and (min-width: 520px) {
    .conteiner-img-msg img {
        height: 50px;
        border-radius: 50%;
        position: relative;
        top: 10px;
        left: 10px;
        border: solid 1px gray;
    }
}
@media screen and (max-width: 520px) {
    .conteiner-img-msg img {
        height: 30px;
        border-radius: 50%;
        position: relative;
        top: 10px;
        left: 10px;
        border: solid 1px gray;
    }
}
.conteiner-inf-msg {
    font-family: Arial, Helvetica, sans-serif;
    display: block;
    width: 80%;
}
.conteiner-inf-msg h2 {
    font-size: 16px;
    position: relative;
    top: -5px;
}
.conteiner-inf-msg p {
    font-size: 17px;
    position: relative;
}
.title-msg {
    min-height: 20px;
    position: relative;
    top: -10px;
}
.title-msg a {
    color: #007bff;
}
.conteiner-delete-msg {
    display: none;
    position: absolute;
    top: 20px;
    right: 40px;
    width: 80px;
    height: 18px;
    padding: 5px;
    background-color: white;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0px 0px 5px gray;
}
.text-no-messege {
    position: relative;
    top: 100px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    text-align: center;
}

@media screen and (min-width: 1100px) {
#conteiner-menu-profil {
    display: block;
    width: 87%;
    height: 100vh;
    position: relative;
    left: 150px;
    top: 120px;
}
#finance-menu {
    display: block;
    width: 51%;
    height: 200px;
    position: relative;
    left: 10px;
    top: 10px;
    background-color: white;
    border-radius: 20px;
    box-shadow: 0px 0px 10px rgb(189, 189, 189);
}
#add-company-menu {
    display: block;
    width: 45%;
    height: 200px;
    position: relative;
    left: 10px;
    top: 10px;
    background-color: white;
    border-radius: 20px;
    box-shadow: 0px 0px 10px rgb(189, 189, 189);
}
#curenty-hold,
#curenty-balance {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
}
#text-hold, 
#text-balance {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    color: rgb(169, 168, 168);
}
#text-balance {
    position: relative;
    top: -36px;
}
#text-hold {
    position: relative;
    top: -18px;
}
#balance-conteiner {
    position: relative;
    top: 0px;
    left: 30px
}
#add-btn-m {
    position: relative;
    top: 30px;
    left: 8px;
    color: gray;
    display: block;
    height: 15px;
    width: 15px;
    border: solid 1px gray;
    border-radius: 50%;
    line-height: 15px;
    text-align: center;
    cursor: pointer;
}
#hold-conteiner {
    position: relative;
    top: 0px;
    left: 300px
}
#btn-add-balance {
    position: relative;
    left: 30px;
    top: 0px;
    color: gray;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    display: block;
    height: 40px;
    width: 200px;
    line-height: 5px;
    text-align: center;
    background-color: white;
    border-radius: 10px;
    border: solid 1px rgb(220, 219, 219);
    cursor: pointer;

}
#btn-withDraw {
    position: relative;
    left: 30px;
    top: 0px;
    color: gray;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    display: block;
    height: 40px;
    width: 200px;
    line-height: 5px;
    text-align: center;
    background-color: white;
    border-radius: 10px;
    border: solid 1px rgb(220, 219, 219);
    cursor: pointer;
}
#btns-cont-m-c {
    display: flex;
    gap: 10px;
}
#conteiner-of-inform-pr {
    display: flex;
    gap: 1.5%;
}
#ads-campaign-conteiner {
    display: block;
    width: 97.5%;
    position: relative;
    left: 10px;
    top: 40px;
}
#conteiner-add-menu-f {
    display: block;
    width: 160px;
    cursor: default;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    left: 20px;
}
#conteiner-add-menu-f a {
    color: black;
}
#conteiner-add-menu-f p:hover {
    text-decoration: underline;
}
#conteiner-add-menu-f a:hover {
    text-decoration: underline;
}
#ads-nav-text {
    display: block;
    height: 60px;
    border: solid 1px rgb(190, 189, 189);
    background-color: white;
    border-width: 0px 0px 1px 0px;
    box-shadow: 0px 0px 10px rgb(189, 189, 189);
    border-radius: 20px;
}
#conteiner-text-ads-campaign {
    position: relative;
    top: 20px;
    left: 20px;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
}
#conteiner-text-ads-campaign span {
    margin-left: 10px;
}
}
@media screen and (max-width: 1100px) {
    #conteiner-menu-profil {
        display: block;
        width: 100%;
        position: relative;
        left: 0px;
        top: 100px;
    }
    #finance-menu {
        display: block;
        width: 97.5%;
        height: 250px;
        position: relative;
        left: calc(2.5% / 2);
        top: 10px;
        background-color: white;
        border-radius: 20px;
        box-shadow: 0px 0px 10px rgb(189, 189, 189);
    }
    #add-company-menu {
        padding-top: 5px;
        display: block;
        width: 97.5%;
        height: 200px;
        position: relative;
        left: calc(2.5% / 2);
        top: 20px;
        background-color: white;
        border-radius: 20px;
        box-shadow: 0px 0px 10px rgb(189, 189, 189);
    }
    #curenty-hold,
    #curenty-balance {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 25px;
    }
    #text-hold, 
    #text-balance {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 17px;
        color: rgb(169, 168, 168);
    }
    #text-balance {
        position: relative;
        top: -36px;
    }
    #text-hold {
        position: relative;
        top: -18px;
    }
    #balance-conteiner {
        position: relative;
        top: 0px;
        left: 20px
    }
    #add-btn-m {
        position: relative;
        top: 30px;
        left: 8px;
        color: gray;
        display: block;
        height: 15px;
        width: 15px;
        border: solid 1px gray;
        border-radius: 50%;
        line-height: 15px;
        text-align: center;
        cursor: pointer;
    }
    #hold-conteiner {
        position: relative;
        top: 0px;
        left: 28%;
    }
    #btn-withDraw,
    #btn-add-balance {
        position: relative;
        left: 30px;
        top: 0px;
        color: gray;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        display: block;
        height: 40px;
        width: calc(100% - 60px);
        line-height: 5px;
        text-align: center;
        background-color: white;
        border-radius: 10px;
        border: solid 1px rgb(171, 171, 171);
        cursor: pointer;
    
    }
    #btn-withDraw {
        margin-top: 10px;
    }
    #ads-campaign-conteiner {
        display: block;
        width: 97.5%;
        height: 70px;
        position: relative;
        left: calc(2.5% / 2);
        top: 40px;
        background-color: white;
        border-radius: 20px;
        box-shadow: 0px 0px 10px rgb(189, 189, 189);
    }
    #conteiner-add-menu-f {
        display: block;
        width: 160px;
        cursor: default;
        font-size: 18px;
        font-family: Arial, Helvetica, sans-serif;
        position: relative;
        left: 20px;
    }
    #conteiner-add-menu-f a {
        color: black;
    }
    #conteiner-add-menu-f p:hover {
        text-decoration: underline;
    }
    #conteiner-add-menu-f a:hover {
        text-decoration: underline;
    }
    #ads-nav-text {
        display: block;
        height: 60px;
    }
    #conteiner-text-ads-campaign {
        position: relative;
        top: 20px;
        text-align: center;
        font-size: 20px;
        font-family: Arial, Helvetica, sans-serif;
    }
    #conteiner-text-ads-campaign span {
        margin-left: 10px;
    }
}
@media screen and (min-width: 1100px) {
    #conteiner-manage-profil {
        display: block;
        width: 87%;
        height: 85vh;
        position: relative;
        left: 150px;
        top: 100px;
    }
    #conteiner-photo-profil {
        position: relative;
        display: block;
        width: 52%;
        height: 350px;
        background-color: white;
        border-radius: 20px;
        box-shadow: 0px 0px 10px rgb(189, 189, 189);
    }
    #conteiner-inform-about-usr {
        position: relative;
        display: block;
        width: 47%;
        height: 350px;
        background-color: white;
        border-radius: 20px;
        box-shadow: 0px 0px 10px rgb(189, 189, 189);
    }
    #flex-conteiner-usr {
        display: flex;
        gap: 20px;
    }
    #bottom-section-information-profl {
       display: block;
       height: 50px;
       width: 100%;
       position: relative;
       right: 40px;
       top: 250px;
       text-align: center;
    }
    .img-user {
        height: 200px;
        width: 200px;
        border-radius: 50%;
        box-shadow: 0px 0px 10px gray;
    }
    #conteiner-photo-profil span{
        display: block;
        width: 200px;
        position: relative;
        left: calc((100% - 200px)/2);
    }
    #text-photo-profil {
        width: 200px;
        color: gray;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        position: relative;
        left: 20px;
    }
    #user-information {
        padding: 25px;
    }
    .part-bef-inf {
        position: relative;
        top: 5px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
        color: gray;
    }
}
@media screen and (max-width: 1100px) {
    #conteiner-manage-profil {
        display: block;
        width: 97%;
        height: 85vh;
        position: relative;
        left: 1.5%;
        top: 100px;
    }
    #conteiner-photo-profil {
        padding-top: 5px;
        position: relative;
        display: block;
        width: 100%;
        height: 320px;
        background-color: white;
        border-radius: 20px;
        box-shadow: 0px 0px 10px rgb(189, 189, 189);
    }
    #conteiner-inform-about-usr {
        margin-top: 15px;
        position: relative;
        display: block;
        width: 100%;
        height: 350px;
        background-color: white;
        border-radius: 20px;
        box-shadow: 0px 0px 10px rgb(189, 189, 189);
    }
    #bottom-section-information-profl {
       display: block;
       height: 50px;
       width: 100%;
       position: relative;
       top: 100px;
       text-align: center;
    }
    .img-user {
        height: 200px;
        width: 200px;
        border-radius: 50%;
        box-shadow: 0px 0px 10px gray;
    }
    #conteiner-photo-profil span{
        display: block;
        width: 200px;
        position: relative;
        left: calc((100% - 200px)/2);
    }
    #text-photo-profil {
        width: 150px;
        color: gray;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        position: relative;
        left: 20px;
    }
    #user-information {
        padding: 25px;
    }
    .part-bef-inf {
        position: relative;
        top: 5px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
        color: gray;
    }
    #btn-more-ab-channel {
        position: relative;
        top: 15px;
        text-align: center;
        margin-top: 5px;
        display: block;
        height: 35px;
        width: 90%;
        border: solid 2px gray;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        border-radius: 10px;
        cursor: pointer;
    }
}
#btns-inf-prof {
    position: absolute;
    bottom: 20px;
}
.btn-in-inf-profl {
    margin-top: 10px;
    display: block;
    height: 40px;
    width: 200px;
    background-color: white;
    border: solid 1px gray;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 10px;
    cursor: pointer;
}
@media screen and (min-width: 1100px){
    #container-img-ad img{
        margin-top: 10px;
        height: 125px;
        width: 125px;
        border-radius: 50%;
        border: solid 1px gray;
    }
    .ad-in-container {
        display: flex;
        flex-direction: column; 
        align-items: center;   
        margin-top: 20px;
        height: 360px;
        width: 90%;
        background-color: white;
        box-shadow: 0px 0px 3px gray;
        border-radius: 10px;
    }
    .btn-in-basket {
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 17px;
        color: white;
        display: flex;
        gap: 10%;
        background-color: green;
        align-items: center;
        width: 100%;
        height: 40px;
        border-radius: 10px;
        cursor: pointer;
    }
    .btn-in-basket p {
        position: relative;
        top: 0px;
        text-align: center;
    }
    .btn-move-to-liked {
        display: block;
        padding: 5px;
        background-color: #ddd;
        border-radius: 10px;
        cursor: pointer;
    }
    .btn-move-to-liked img {
        filter: drop-shadow(0px 0px 1px gray);
        position: relative;
    }
    .cont-btns-b-l {
        margin-top: 30px;
        display: flex;
        gap: 5px;
        width: 90%;
    }
    #btn-more-ab-channel {
        text-align: center;
        margin-top: 5px;
        display: block;
        height: 35px;
        width: 90%;
        border: solid 2px gray;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        border-radius: 10px;
        cursor: pointer;
    }
}
#about-subscriber-cont {
    margin-top: 12px;
    display: flex;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    height: 60px;
    gap: 20px;
}
.category-ad {
    color: gray;
    position: absolute;
    top: -5px;
    left: calc(50% - 75px);
    width: 150px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-align: center;
}
#btn-more-ab-channel p {
    position: relative;
    top: -10px;
}
#cont-follower,
#cont-follow {
    text-align: center;
}
.text-f {
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(173, 172, 172);
    position: relative;
    top: -18px;
}
.text-v {
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(173, 172, 172);
    position: relative;
    top: -28px;
    right: 30px;
}
#nik-inst-user {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: rgb(44, 43, 43);
}
#about-user-statistic-cont {
    display: flex;
    gap: 10px;
}
#line-in-ad {
    display: block;
    height: 1px;
    width: 100%;
    background-color: rgb(195, 193, 193);
}
#line-in-ad {
    position: relative;
    top: 5px;
}
@media screen and (max-width: 1100px){
    #container-img-ad img{
        margin-top: 10px;
        height: 120px;
        width: 120px;
        border-radius: 50%;
        border: solid 1px gray;
    }
    .ad-in-container {
        display: flex;
        flex-direction: column; 
        align-items: center;   
        margin-top: 20px;
        height: 340px;
        width: 90%;
        background-color: white;
        box-shadow: 0px 0px 3px gray;
        border-radius: 10px;
    }
    .btn-in-basket {
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 17px;
        color: white;
        display: flex;
        gap: 30px;
        height: 40px;
        line-height: 0px;
        background-color: green;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 40px;
        border-radius: 10px;
    }
    .btn-in-basket img {
        position: absolute;
        left: 40px;
    }
    .btn-in-basket p {
        position: relative;
        left: 10px;
    }
    .btn-move-to-liked {
        display: block;
        height: 40px;
        width: 40px;
        background-color: #ddd;
        border-radius: 10px;
    }
    .btn-move-to-liked img {
        filter: drop-shadow(0px 0px 1px gray);
        padding: 5px;
    }
    .cont-btns-b-l {
        position: relative;
        top: 15px;
        display: flex;
        gap: 5px;
        width: 90%;
    }
}
@media screen and (min-width: 1100px) {
    #bottom-section-information-liked {
       display: block;
       height: 50px;
       width: 88%;
       position: relative;
       left: 10%;
       top: 190px;
       text-align: center;
    }
    #bottom-section-information-cabinet {
       display: block;
       height: 50px;
       width: 88%;
       position: relative;
       left: 10%;
       top: 150px;
       text-align: center;
    }
    #bottom-section-informaton-addChannel {
       display: block;
       height: 50px;
       width: 88%;
       position: relative;
       left: 10%;
       top: 380px;
       text-align: center;
    }
    .conteiner-page {
        display: block;
        width: 88.5%;
        min-height: 500px;
        height: 100%;
        padding-bottom: 20px;
        position: relative;
        left: 9.5%;
        top: 110px;
        background-color: white;
        border-radius: 20px;
        box-shadow: 0px 0px 10px rgb(189, 189, 189);
    }
    #menu-liked-ads-in-c {
        margin-left: 20px;
        display: grid;
        grid-template-columns: repeat(5, 20%);
        
    }
}
@media screen and (max-width: 1350px){
    #menu-liked-ads-in-c {
        margin-left: 20px;
        display: grid;
        grid-template-columns: repeat(4, 25%);
        
    }
}
@media screen and (max-width: 1100px) {
    #menu-liked-ads-in-c {
        margin-left: 20px;
        display: grid;
        grid-template-columns: repeat(3, 33.3%);
        
    }
    #bottom-section-information-liked {
        display: block;
        height: 50px;
        width: 100%;
        position: relative;
        top: 190px;
        text-align: center;
     }
    #bottom-section-information-cabinet {
        display: block;
        height: 50px;
        width: 100%;
        position: relative;
        top: 400px;
        text-align: center;
    }
    #bottom-section-informaton-addChannel {
        display: block;
        height: 50px;
        width: 100%;
        position: relative;
        top: 150px;
        text-align: center;
     }
    .conteiner-page {
        display: block;
        width: 99.5%;
        height: 100%;
        padding-bottom: 20px;
        position: relative;
        left: 0.5%;
        top: 110px;
        background-color: white;
        border-radius: 20px;
        box-shadow: 0px 0px 10px rgb(189, 189, 189);
    }  
}
@media screen and (min-width: 1100px) {
    #conteiner-chose-data {
        background-color: rgb(220, 220, 220);
        font-family: Arial, Helvetica, sans-serif;
        display: flex;
        width: 300px;
        padding: 0px 30px 0px 30px;
        position: relative;
        left: 20px;
        gap: 20px;
        border: 1px solid gray;
        border-radius: 10px;
    }
    #menu-history-payment {
        background-color: rgb(220, 220, 220);
        font-family: Arial, Helvetica, sans-serif;
        position: relative;
        display: flex;
        width: 100%;
        border: 1px solid gray;
        border-radius: 10px;
    }
    #main-menu-history-payment {
        margin: 2% 2% 0% 2%;
        width: 96%;
    }
    #menu-history-payment p {
        text-align: center;
        width: 32%;
    }
    #payment-metod-cont p{
        font-size: 17px;
        font-family: Arial, Helvetica, sans-serif;
        width: 150px;
        height: 100%;
        text-align: center;
        border: solid 1px rgb(30, 30, 244);
        border-radius: 10px;
        cursor: pointer;
    }
    #conteiner-chose-data span {
        line-height: 40px;
        text-align: center;
        display: flex;
        gap: 10px;
    }
}
@media screen and (max-width: 1100px) {
    #conteiner-chose-data {
        background-color: rgb(220, 220, 220);
        font-family: Arial, Helvetica, sans-serif;
        display: flex;
        width: 96%;
        margin: 0% 2% 0% 2%;
        height: 40px;
        line-height: 30px;
        position: relative;
        gap: 20px;
        border: 1px solid gray;
        border-radius: 10px;
    }
    #conteiner-chose-data span {
        line-height: 40px;
        text-align: center;
        width: calc(48% - 50px);
        display: flex;
        gap: 10px;
        position: relative;
        left: 50px;
    }
    #menu-history-payment {
        background-color: rgb(220, 220, 220);
        font-family: Arial, Helvetica, sans-serif;
        position: relative;
        display: flex;
        width: 100%;
        border: 1px solid gray;
        border-radius: 10px;
    }
    #main-menu-history-payment {
        margin: 2% 2% 0% 2%;
        width: 96%;
    }
    #menu-history-payment p {
        text-align: center;
        width: 32%;
    }
    #conteiner-history-payment-in {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    #payment-metod-cont p{
        font-size: 18px;
        font-family: Arial, Helvetica, sans-serif;
        width: 32%;
        height: 100%;
        text-align: center;
        border: solid 1px rgb(30, 30, 244);
        border-radius: 10px;
    }
}
@media screen and (max-width: 680px){
    #menu-liked-ads-in-c {
        margin-left: 20px;
        display: grid;
        grid-template-columns: repeat(2, 50%);
        
    }
}
.conteiner-data-calendar {
    display: block;
    height: 20px;
    width: 80px;
    text-align: center;
    cursor: pointer;
    background-color: white;
    padding: 5px 10px 5px 10px;
    border-radius: 5px;
    border: none;
    margin-top: 5px;
    color: #333;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
}
#menu-liked-ads-in-c {
    min-height: 500px;
}
.emty-payment-cont {
    position: relative;
    top: 60px;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    cursor: default;
}
#all-messege-payment-add,
#all-messege-payment-withdraw {
    min-height: 260px;
    margin-bottom: 20px;
}
#all-messege-payment-withdraw {
    display: none;
}
#payment-metod-cont {
    display: flex;
    width: 96%;
    margin: 0% 2% 0% 2%;
    height: 35px;
    margin-bottom: 40px;
    line-height: 35px;
    gap: 5%;
}
#all-messege-payment {
    display: block;
    height: 100%;
    margin-bottom: 10px;
}
.payment-msg {
    margin: 1% 2% 0% 2%;
    width: 96%;
}
.inf-payment-msg {
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    display: flex;
    text-align: center;
    width: 100%;
    height: 50px;
    border: 1px solid rgb(199, 198, 198);
    border-radius: 10px;
    line-height: 50px;
}
.inf-payment-msg span {
    position: relative;
    top: 20px;
    line-height: 12px;
    width: 32%;
}
#arrow-rigth-ch {
    position: relative;
    top: -38px;
    left: 85%;
    display: block;
    height: 50px;
    width: 50px;
}
#arrow-r-part-2,
#arrow-r-part-1 {
    position: relative;
    left: 20px;
    display: block;
    height: 30px;
    width: 5px;
    background-color: rgb(0, 149, 255);
}
#arrow-r-part-1 {
    position: relative;
    top: 3px;
    rotate: 135deg;
}
#arrow-r-part-2 {
    position: relative;
    top: -8px;
    rotate: 45deg;
}

@media screen and (max-width: 480px){
    #input-price-in-list {
        display: flex;
        width: 50%;
    }
    #input-price-in-list input {
        position: relative;
        width: 55%;
        text-align: center;
    }
}
@media screen and (min-width: 900px) {
    #img-link-copy-1 {
        position: relative;
        top: 0px;
        left: 75px;
        cursor: pointer;
    }
    #text-aply-in-aply {
        font-size: 18px;
        text-align: center;
    }
    .line-conteiner-aplication {
        display: block;
        height: 1px;
        width: 100%;
        background-color: rgb(199, 199, 199);
    }
    #text-inf-about-aply {
        position: relative;
        left: 20px;
    }
    #btn-reject {
        border-radius: 10px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        color: white;
        display: block;
        height: 40px;
        width: 44%;
        background-color: brown;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
    }
    #btn-accept {
        border-radius: 10px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        color: white;
        display: block;
        height: 40px;
        width: 44%;
        background-color: green;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
    }
    #conteiner-btns-aplication {
        display: flex; 
        gap: 5%; 
        position: relative; 
        top: -10px;
    }
    .conteiner-types-aply {
        font-family: Arial, Helvetica, sans-serif;
        width: 250px;
        position: relative;
        left: calc((100% - 250px) / 2);
        display: flex;
        gap: 50px;
    }
    .conteiner-types-aply p:hover {
        text-decoration: underline;
        cursor: pointer;
    }
}
#conteiner-img-like {
    position: relative;
    top: 5px;
    right: 50px;
    display: block;
    height: 40px;
    width: 40px;
    background-color: blue;
}
#show-more-btn {
    display: block;
    background-color: white;
    height: 40px;
    width: 150px;
    border: solid 1px gray;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
}
@media screen and (max-width: 900px) {
    .conteiner-types-aply {
        font-family: Arial, Helvetica, sans-serif;
        width: 250px;
        position: relative;
        left: calc((100% - 250px) / 2);
        display: flex;
        gap: 50px;
    }
    .conteiner-types-aply p:hover {
        text-decoration: underline;
        cursor: pointer;
    }
}
#img-link-aply {
    position: relative;
    top: 12px;
    height: 25px;
}
#arial-comment-in-aply {
    text-align: start;
}
/*dsfsdgdfhdfhnfgd*/
    .conteiner-channel-inf-ad {
        display: flex;
        width: 88%;
        position: relative;
        top: 100px;
        left: 10%;
        margin-right: 2%;
    }
    #conteiner-channel-inf {
        display: flex;
    }
    #conteiner-inf-profil-ad {
        position: relative;
        display: block;
        width: 100%;
        height: 150px;
        padding-bottom: 10%;
        background-color: white;
        border-radius: 20px;
        box-shadow: 0px 0px 10px rgb(189, 189, 189);
    }
    #conteiner-statistic-ch-ad {
        display: block;
        width: 100%;
        height: 370px;
        padding-bottom: 10%;
        background-color: white;
        border-radius: 20px;
        box-shadow: 0px 0px 10px rgb(189, 189, 189);
    }
    #conteiner-statistic-ch-ad p {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
    }
    #subscribersChart {
        position: relative;
        top: 50px;
    }
    #conteiner-b-ad-ch {
        margin-top: 20px;
        display: block;
        width: 100%;
        height: 30px;
        padding-bottom: 10%;
        background-color: white;
        border-radius: 20px;
        box-shadow: 0px 0px 10px rgb(189, 189, 189);
    }
    #cont-img-channel-in-ad-st {
        position: relative;
        left: 20px;
        top: 20px;
        font-family: Arial, Helvetica, sans-serif;
        display: flex;
        width: calc(98% - 20px);
        gap: 2%;
    }
    #cont-img-channel-in-ad-st img{
        border-radius: 50%;
    }
    #cont-inf-ab-ch-subsc {
        font-family: Arial, Helvetica, sans-serif;
        display: block;
        width: calc(100% - 20px);
        position: relative;
        left: 20px;
        top: 40px;
    }
    .part-inf-c-ch {
        margin-left: 20px;
        display: flex;
        gap: 4%;
    }
    #conteiner-gender-ch {
        margin-top: 20px;
        display: block;
        width: 100%;
        height: 300px;
        padding-bottom: 10%;
        background-color: white;
        border-radius: 20px;
        box-shadow: 0px 0px 10px rgb(189, 189, 189);
    }
    #conteiner-gender-ch div {
        top: 50px;
    }
    #conteiner-views-ch {
        margin-top: 20px;
        display: block;
        width: 100%;
        height: 200px;
        padding-bottom: 10%;
        background-color: white;
        border-radius: 20px;
        box-shadow: 0px 0px 10px rgb(189, 189, 189);
    }
    #text-averadge-v {
        position: relative;
        top: 20px;
        text-align: center;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 20px;
        color: gray;
        cursor: default;
    }
    #conteiner-views-ch-all-inf {
        display: block;
        width: 80%;
        position: relative;
        top: 20px;
        left: 50px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 19px;
    }
    .format-views {
        display: flex;
        height: 40px;
        width: 90%;
        gap: 20px;
        font-size: 16px;
    }
    #dropdown-in-ch-st {
        position: relative;
        top: 40px;
        margin: 0% 10% 0% 10%;
    }
    #name-channel a{
        position: relative;
        top: 18px;
        color: blue;
    }
    .container {
        width: 300px;
        height: 350px;
        background: white;
        border-radius: 10px;
        padding: 25px 10px 10px 10px;
        overflow: hidden;
    }

    h2 {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 16px;
        margin-bottom: 25px;
        color: #333;
    }

    .category {
        margin-top: 11px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 15px;
        font-family: Arial, Helvetica, sans-serif;
    }

    .bar {
        width: 100%;
        height: 10px;
        background: #e0e0e0;
        position: relative;
        border-radius: 5px;
        margin-top: 5px;
    }

    .bar-fill {
        height: 100%;
        background: #d400ff;
        border-radius: 5px;
    }
    .flex-conteiners-aud {
        display: flex;
        gap: 10%;
        margin: 0% 10% 0% 10%;
    }

    #bottom-section-information-ad {
        margin-top: 280px;
        display: block;
        height: 50px;
        width: 88%;
        position: relative;
        left: 10%;
        text-align: center;
     }
     .part-channel-inf-1 {
        width: 35%;
     }
     .part-channel-inf-2 {
        padding-left: 2%;
        padding-right: 2%;
        width: 65%;
     }
     #conteiner-client-section {
        margin-top: 20px;
        display: flex;
        width: 100%;
        height: 150px;
        padding-bottom: 10%;
        background-color: white;
        border-radius: 20px;
        box-shadow: 0px 0px 10px rgb(189, 189, 189);
     }
     #dropdown-ad-inf {
        display: block;
        width: 50%;
        height: 100%;
        position: relative;
        top: 30px;
     }
     #dropdown-ad-inf-conteiner {
        font-family: Arial, Helvetica, sans-serif;
        width: 70%;
        position: relative;
        margin-left: 12%;
     }
     .dropdown-ad-basket-conteiner {
        position: relative;
        font-family: Arial, Helvetica, sans-serif;
        width: 100%;
     }
     #dropdown-ad-inf-btn {
        position: relative;
        left: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: calc(100% - 20px);
        padding: 5px;
        padding-left: 12px;
        border: 1px solid #ccc;
        border-radius: 8px;
        background: #fff;
        cursor: pointer;
        font-size: 16px;
    }
    #dropdown-ad-inf-menu {
        font-size: 16px;
        margin-top: 5px;
        position: absolute;
        top: 100%;
        left: 10px;
        width: calc(100% - 20px);
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        display: none;
        flex-direction: column;
        padding: 9px;
        z-index: 1000;
    }
     .format-text {
        font-family: Arial, Helvetica, sans-serif;
        color: gray;
        position: relative;
        margin-left: 15%;
     }
     #menu-add-to-basket {
        display: block;
        width: 50%;
        height: 100%;
        position: relative;
        top: 30px;
     }
     .btn-add-to-basket {
        text-align: center;
        position: relative;
        top: 50px;
        display: block;
        height: 30px;
        width: 200px;
        background-color: #348337;
        padding: 5px;
        border-radius: 10px;
        margin: auto;
        cursor: pointer;
     }
     .btn-add-to-basket p {
        position: relative;
        top: -12px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: white;
     }
     .vertical-line {
        position: relative;
        top: 30px;
        display: block;
        height: 150px;
        width: 1px;
        background-color: #c3c2c2;
     }
@media screen and (max-width: 1100px) {
    .conteiner-channel-inf-ad {
        display: flex;
        width: 98%;
        position: relative;
        left: 2%;
        margin-right: 2%;
    }
}
@media screen and (max-width: 760px) {
    .conteiner-channel-inf-ad {
        display: block;
        width: 96%;
        position: relative;
        left: 2%;
        margin-right: 2%;
    }
    .part-channel-inf-1 {
        width: 100%;
     }
     .part-channel-inf-2 {
        padding-left: 0%;
        padding-right: 0%;
        width: 100%;
     }
    .flex-conteiners-aud {
        margin-top: 20px;
    }
    .btn-add-to-basket {
        margin: auto;
    }
}
@media screen and (max-width: 560px) {
    .conteiner-channel-inf-ad {
        display: block;
        width: 96%;
        position: relative;
        left: 2%;
        margin-right: 2%;
    }
    .part-channel-inf-1 {
        width: 100%;
     }
     .part-channel-inf-2 {
        padding-left: 0%;
        padding-right: 0%;
        width: 100%;
     }
    .flex-conteiners-aud {
        display: block;
        height: 100%;
        margin-top: 20px;
    }
    #conteiner-statistic-ch-ad {
        display: block;
        height: 100%;
    }
    .container {
        margin-top: 10px;
        width: 100%;
        height: 100%;
        background: white;
        border-radius: 10px;
        padding: 20px 0px 0px 0px;
        overflow: hidden;
    }
    .vertical-line {
        display: none;
    }
    #conteiner-client-section {
        display: block;
    }
    .format-text {
        display: none;
    }
    #menu-add-to-basket {
        display: block;
        width: 100%;
        position: relative;
        top: 20px;
    }
    .btn-add-to-basket {
        position: relative;
        top: -50px;
        margin: auto;
        display: block;
        height: 30px;
        width: 80%;
    }
    #dropdown-ad-inf {
        width: 100%;
    }
    #dropdown-ad-inf-conteiner {
        font-family: Arial, Helvetica, sans-serif;
        position: relative;
        left: 10%;
        display: inline-block;
        width: calc(80% - 18px);
        margin: 0;
        font-size: 20px;
    }
    #dropdown-ad-inf-btn {
        position: relative;
        left: 0px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 5px;
        padding-left: 12px;
        border: 1px solid #ccc;
        border-radius: 8px;
        background: #fff;
        cursor: pointer;
        font-size: 16px;
    }
    #dropdown-ad-inf-menu {
        font-size: 16px;
        margin-top: 5px;
        position: absolute;
        top: 100%;
        left: 10px;
        width: calc(100% - 20px);
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        display: none;
        flex-direction: column;
        padding: 9px;
        z-index: 1000;
    }
    #conteiner-gender-ch {
        margin-top: 20px;
        display: block;
        width: 100%;
        height: 200px;
        padding-bottom: 10%;
        background-color: white;
        border-radius: 20px;
        box-shadow: 0px 0px 10px rgb(189, 189, 189);
    }
    #conteiner-gender-ch div {
        top: 12px;
    }
}


@media screen and (min-width: 1080px) {
    .dropdown-button {
        position: relative;
        left: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: calc(100% - 20px);
        padding: 5px;
        padding-left: 12px;
        border: 1px solid #ccc;
        border-radius: 8px;
        background: #fff;
        cursor: pointer;
        font-size: 16px;
    }
    .dropdown-menu {
        font-size: 16px;
        margin-top: 5px;
        position: absolute;
        top: 100%;
        left: 0;
        width: calc(100% - 20px);
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        display: none;
        flex-direction: column;
        padding: 9px;
        z-index: 10;
    }
}
@media screen and (max-width: 1080px) {
    .dropdown-button {
        position: relative;
        left: 12%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 76%;
        padding: 5px;
        padding-left: 12px;
        border: 1px solid #ccc;
        border-radius: 8px;
        background: #fff;
        cursor: pointer;
        font-size: 14px;
    }
    .dropdown-menu {
        font-size: 14px;
        margin-top: 5px;
        position: absolute;
        top: 100%;
        left: 0%;
        width: calc(100% - 20px);
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        display: none;
        flex-direction: column;
        padding: 9px;
        z-index: 1000;
    }
}
@media screen and (max-width: 560px) {
    .dropdown-button {
        position: relative;
        left: 15%;
        width: calc(100% - 30%);
    }
    .dropdown-menu {
        margin-top: 5px;
        position: absolute;
        top: 100%;
        left: 0;
        width: calc(100% - 20px);
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        display: none;
        flex-direction: column;
        padding: 9px;
        z-index: 1000;
    }
}
/* */
.dropdown {
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 10px;
    position: relative;
    width: 80%;
}

.arrow {
    position: relative;
    top: 0px; 
    left: -5px;
    transition: transform 0.3s ease;
}
.line-ar-ad-1 {
    position: relative;
    top: 3px;
    rotate: 135deg;
    display: block;
    height: 13px;
    width: 2px;
    background-color: #666;
}
.line-ar-ad-2 {
    rotate: 45deg;
    position: relative;
    top: -10px;
    left: -9px;
    display: block;
    height: 13px;
    width: 2px;
    background-color: #666;
}

.option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    transition: background 0.2s;
}

.option:hover {
    background: #f0f0f0;
}

.option input {
    display: none;
}

.info {
    padding: 8px;
    font-size: 14px;
    color: #666;
    text-align: center;
    border-top: 1px solid #ddd;
}


@keyframes bubble {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    60% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
    }
}
#btn-open-basket {
    display: block;
    background-color: #348337;
    border-radius: 50%;
    box-shadow: 0px 0px 10px #348337;
    transform: scale(1);
    transition: transform 0.2s ease;
}
#conteiner-btn-basket-open.animate-bubble {
    animation: bubble 0.4s ease forwards;
}
@media screen and (min-width: 960px) {
    #btn-open-basket img {
        padding: 15px;
        height: 40px;
        width: 40px;
    }
    #conteiner-btn-basket-open {
        display: none;
        position: fixed;
        bottom: 10%;
        right: 10%;
        cursor: pointer;
    }
}
@media screen and (max-width: 960px) {
    #btn-open-basket img{
        padding: 10px;
        height: 40px;
        width: 40px;
    }
    #conteiner-btn-basket-open {
        display: none;
        position: fixed;
        bottom: 5%;
        right: 10%;
        cursor: pointer;
    }
}
#btn-open-basket img {
    position: relative;
    top: 3px;
}
#number-ads-in-basket {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position: relative;
    left: 45px;
    top: 20px;
    display: block;
    height: 20px;
    width: 20px;
    text-align: center;
    border-radius: 50%;
    background-color: rgb(75, 75, 253);
    color: white;
    z-index: 5;
}
.black-shadow {
    display: none;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #55555544;
    z-index: 10;
}
@media screen and (min-width: 720px) {
    #conteiner-basket-view {
        position: fixed;
        bottom: 0;
        right: 0;
        display: block;
        height: 100%;
        width: 35%;
        background-color: white;
    }
}
@media screen and (max-width: 720px) {
    #conteiner-basket-view {
        position: fixed;
        bottom: 0;
        right: 0;
        display: block;
        height: 100%;
        width: 50%;
        background-color: white;
    }
}
@media screen and (max-width: 720px) {
    #conteiner-basket-view {
        position: fixed;
        bottom: 0;
        right: 0;
        display: block;
        height: 100%;
        width: 90%;
        background-color: white;
    }
}
.conteiner-text-basket-view {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    height: 60px;
    border: solid 1px rgb(204, 204, 204);
    border-width: 0px 0px 1px 0px;
    
}
.conteiner-text-basket-view p {
    position: relative;
    top: 8px;
    left: 50px;
}
#close-basket-view {
    position: relative;
    top: 20px;
    left: 10px;
    display: block;
    height: 30px;
    width: 30px;
    cursor: pointer;
}
.line-cross-1-b-v {
    position: relative;
    left: 14px;
    display: block;
    height: 30px;
    width: 2px;
    background-color: #333;
    rotate: 45deg;
}
.line-cross-2-b-v {
    position: relative;
    top: -30px;
    left: 14px;
    display: block;
    height: 30px;
    width: 2px;
    background-color: #333;
    rotate: 135deg;
}
#all-ad-inbasket-view {
    padding: 0px 0px 20px 0px;
    display: block;
    height: 70%;
    width: 100%;
    overflow-y: scroll;
    position: relative;
}
.functions-basket-view {
    display: block;
    height: 25%;
    width: 100%;
    border: solid 1px rgb(204, 204, 204);
    border-width: 1px 0px 0px 0px;
}
#btn-go-to-do-aply {
    color: white;
    border-radius: 10px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 35px;
    text-align: center;
    display: block;
    height: 40px;
    width: 300px;
    background-color: #4caf50;
    position: relative;
    left: calc((100% - 300px)/ 2);
    top: 20px;
    cursor: pointer;
}
#ad-in-basket-view {
    margin-top: 10px;
    display: block;
    height: 100px;
    width: 85%;
    margin: 4% 8% 0% 7%;
    border: solid 2px gray;
    border-radius: 10px;
}
#ad-in-basket-view img {
    position: relative;
    top: 5px;
    left: 5px;
    border-radius: 50%;
}
#cont-ad-bask-v-ac {
    display: flex;
    position: relative;
    left: 10px;
    font-family: Arial, Helvetica, sans-serif;
}
#conteiner-format-in-b-v {
    display: block;
    width: 80%;
    margin: 2% 10% 0% 10%;
}
.btn-delete-from-basket-v {
    position: absolute;
    top: -15px;
    right: 20px;
    display: block;
    height: 20px;
    width: 20px;
    background-color: #bc2522;
    border-radius: 50%;
    text-align: center;
    color: white;
    font-size: 20px;
    line-height: 17px;
    cursor: pointer;
}
.count-sybc-in-b {
    width: 100px;
    position: relative;
    left: 120px;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    color: gray;
}
.part-inf-b-v {
    display: flex;
    gap: 10px;
    width: 80%;
    height: 50px;
}
.part-inf-b-v img {
    border: solid 1px gray;
}
.part-to-remove-f-b-v {
    display: flex;
    height: 50px;
    width: 15%;
}
.name-chosen-channel {
    font-size: 17px;
    position: relative;
    top: 20px;
    left: 20px;
}
.dropdown-ad-basket-btn {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    padding-left: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 16px;
}

@media screen and (min-width: 1100px) {
    #conteiner-conteiners-basket {
        display: flex;
        width: 89%;
        gap: 1%;
        padding-bottom: 20px;
        position: relative;
        left: 9.5%;
        top: 120px;
    }
}
@media screen and (max-width: 1100px) {
    #conteiner-conteiners-basket {
        display: flex;
        width: 96%;
        gap: 1%;
        padding-bottom: 20px;
        position: relative;
        left: 2%;
        top: 120px;
    }
}
@media screen and (min-width: 950px) {
    #conteiner-btns-confirm-basket {
        display: flex;
        flex-direction: column;
        width: 40%;
        height: 100%;
    }
    #conteiner-conficm-basket {
        display: block;
        width: 60%;
        height: 100%;
        min-height: 500px;
        padding-bottom: 20px;
        background-color: white;
        border-radius: 20px;
        box-shadow: 0px 0px 10px rgb(189, 189, 189);
    }
    #conteiner-sum-and-send {
        margin-top: 20px;
        padding: 50px 20px 20px 20px;
        display: block;
        height: 100px;
        background-color: white;
        border-radius: 20px;
        box-shadow: 0px 0px 10px rgb(189, 189, 189);
    }
}
@media screen and (max-width: 950px) {
    #conteiner-conteiners-basket {
        display: flex;
        flex-direction: column;
        width: 96%;
        padding-bottom: 20px;
        position: relative;
        left: 2%;
        top: 120px;
    }
    #conteiner-btns-confirm-basket {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
        top: 20px;
        order: 2;
    }
    #conteiner-conficm-basket {
        display: block;
        width: 100%;
        min-height: 200px;
        max-height: 100%;
        padding-bottom: 20px;
        position: relative;
        top: 0px;
        background-color: white;
        border-radius: 20px;
        box-shadow: 0px 0px 10px rgb(189, 189, 189);
        order: 1;
    }
    #conteiner-sum-and-send {
        margin-top: 20px;
        padding: 50px 20px 20px 20px;
        display: block;
        height: 100px;
        background-color: white;
        border-radius: 20px;
        box-shadow: 0px 0px 10px rgb(189, 189, 189);
    }
}
@media screen and (min-width: 650px) {
    .btns-apli-ch {
        width: 80%;
        display: flex;
        gap: 20%;
    }
    .apli-conteiner {
        display: flex;
        gap: 10%;
    }
    .apli-c-name-and-img {
        display: block;
        height: 100%;
        width: 20%;
        text-align: center;
        border-radius: 18px;
    }
    .apli-in-b-menu {
        font-family: Arial, Helvetica, sans-serif;
        margin-top: 15px;
        display: block;
        height: 110px;
        width: 100%;
        background-color: rgb(225, 224, 224);
        border-radius: 20px;
        box-shadow: 0px 0px 3px gray;
    }
    .conteiner-price-output {
        padding: 5px;
        display: block;
        gap: 20px;
        height: 25px;
        width: 145px;
        border: solid 1px #ccc;
        background-color: #fff;
        line-height: 25px;
        border-radius: 8px;
        text-align: center;
        cursor: pointer;
    }
    .dropdown-ad-basket-btn {
        width: 140px;
    }
}
@media screen and (max-width: 650px) {
    .btns-apli-ch {
        display: flex;
        width: 90%;
        gap: 2%;
        position: relative;
        left: 5%;
    }
    .apli-conteiner {
        display: block;
    }
    .dropdown-ad-basket-btn {
        width: calc(100% - 20px);
    }
    .apli-c-name-and-img {
        display: flex;
        gap: 20px;
        height: 60px;
        width: calc(100% - 10px);
        text-align: center;
        border-radius: 18px;
        padding-left: 10px;
    }
    .apli-in-b-menu {
        font-family: Arial, Helvetica, sans-serif;
        margin-top: 15px;
        display: block;
        height: 150px;
        width: 100%;
        background-color: rgb(225, 224, 224);
        border-radius: 10px;
        box-shadow: 0px 0px 3px gray;
    }
    .conteiner-price-output {
        padding: 5px;
        display: block;
        gap: 20px;
        height: 25px;
        width: calc(100% - 10px);
        border: solid 1px #ccc;
        background-color: #fff;
        line-height: 25px;
        border-radius: 8px;
        text-align: center;
        cursor: pointer;
    }
    .conteiner-price-ad {
        width: 39%;
    }
    .conteiner-price-ad p {
        height: 10px;
        font-size: 14px;
    }
    .conteiner-format-ad {
        width: 59%;
    }
    .conteiner-format-ad p {
        height: 10px;
        font-size: 14px;
    }
}
#coment-in-b {
    display: none;
    margin: 20px 8% 0% 8%;
    width: calc(84% - 16px);
    max-width: calc(84% - 16px);
    min-width: calc(84% - 16px);
    min-height: 50px;
    height: 50px;
    max-height: 100px;
    border-radius: 5px;
    border: solid 1px gray;
    font-size: 15px;
    padding: 8px;
}
.opacity0 {
    opacity: 0;
}
#conteiner-ab-ad {
    position: relative;
    min-height: 180px;
    max-height: 100%;
    width: 100%;
    background-color: white;
    border-radius: 20px;
    box-shadow: 0px 0px 10px rgb(189, 189, 189);
    padding-bottom: 30px;
}
.apli-c-name-and-img img {
    position: relative;
    top: 10px;
    border-radius: 50%;
}

/*--- --- --- --- --- сторінка додати канал --- --- --- --- ---*/
#add-channel-conteiner-4 {
    text-align: center;
}
#add-channel-conteiner-5 {
    text-align: center;
    padding-bottom: 30px;
}
#text-accepted-channel {
    position: relative;
    left: calc(50% - 150px);
    width: 300px;
    font-size: 14px;
    text-align: center;
}
#btn-go-to-change-data {
    border: solid 1px gray;
    width: 280px;
    padding: 10px;
    position: relative;
    left: calc(50% - 150px);
    border-radius: 10px;
    cursor: pointer;
}
@media screen and (min-width: 1100px) {
    #btn-go-to-mannage-channel {
        margin-top: 40px;
        border: solid 1px gray;
        width: 300px;
        padding: 10px;
        position: relative;
        left: calc(50% - 160px);
        border-radius: 10px;
        cursor: pointer;
        color: black;
    }
}
@media screen and (max-width: 1100px) {
    #btn-go-to-mannage-channel {
        margin-top: 40px;
        border: solid 1px gray;
        width: 60%;
        padding: 10px;
        position: relative;
        left: calc(20%);
        border-radius: 10px;
        cursor: pointer;
        color: black;
    }
}
@media screen and (max-width: 650px) {
    #btn-go-to-mannage-channel {
        margin-top: 40px;
        border: solid 1px gray;
        width: 90%;
        padding: 10px;
        position: relative;
        left: calc(5% - 10px);
        border-radius: 10px;
        cursor: pointer;
        color: black;
    }
}

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

  .rotate-once {
    animation: rotateOnce 1s ease-in-out;
}
.user-info {
    position: relative;
    display: inline-block;
    margin-top: 20px;
}

.user-info img {
    border-radius: 50%;
    width: 80px;
    height: 80px;
    position: relative;
    z-index: 2;
}

.user-info p {
    margin: 10px 0 0;
    z-index: 2;
    position: relative;
    font-weight: bold;
}

.confetti-piece {
    position: absolute;
    top: 40px;
    left: 30px;
    width: 8px;
    height: 8px;
    background-color: red;
    border-radius: 50%;
    opacity: 1;
    animation: explode 1s ease-out forwards;
}

@keyframes explode {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--x), var(--y)) scale(0.5);
        opacity: 0;
    }
}

@media screen and (min-width: 1100px) {
    #conteiner-add-channel {
        position: relative;
        top: 80px;
        left: 160px;
        width: 85%;
    }
    .conteiners-for-manage {
        position: relative;
        left: calc(10% - 20px);
        width: 80%;
        margin-top: 20px;
        display: block;
        padding: 20px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 17px;
        background-color: white;
        box-shadow: 0px 0px 10px rgb(189, 189, 189);
        border-radius: 20px;
        transition: transform 0.5s ease, opacity 0.5s ease;
    }
    #input-st-32 {
        font-size: 20px;
        margin-top: 15px;
        display: block;
        height: 35px;
        width: 500px;
        border: solid 1px rgb(188, 188, 188);
        padding-left: 10px;
        border-radius: 5px;
    }
    #all-inf-ab-n-st {
        display: block;
        margin-top: 15px;
        margin-left: 10px;
        background-color: rgb(231, 231, 231);
        padding: 20px;
        border-radius: 20px;
    }
    #list-st {
        display: flex;
        gap: 100px;
    }
    .inf-ab-n-st {
        margin-left: 20px;
    }
    #input-category {
        font-size: 20px;
        margin-top: 15px;
        display: block;
        height: 35px;
        width: 300px;
        border: solid 1px rgb(188, 188, 188);
        padding-left: 10px;
        border-radius: 5px;
    }
    #dropdownList-category {
        margin-top: 10px;
        display: block;
        border: solid 1px rgb(188, 188, 188);
        padding: 10px;
        border-radius: 10px;
    }
    .conteiner-put-st {
        display: block;
        padding: 20px;
        border-radius: 20px;
        border: solid 1px rgb(188, 188, 188);
        margin-top: 20px;
    }
    .count-statistic-n {
        text-align: center;
        position: relative;
        top: -7px;
        display: block;
        width: 70px;
        height: 30px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 17px;
        margin-left: 10px;
        border: solid 1px rgb(188, 188, 188);
    }
    .menu-st-view {
        margin-top: 20px;
        display: flex;
        gap: 20px;
    }
    .formatted-number {
        display: block;
        width: 100px;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
        font-size: 16px;
        border: solid 1px rgb(188, 188, 188);
        padding: 4px 0px 4px 0px;
    }
    .label-format {
        font-size: 14px;
    }
    .cont-st-inf-put {
        margin-top: 20px;
    }
    .imageLabel {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 320px;
        width: 200px;
        border: dashed 1px black;
        text-align: center;
    }
    .imageLabel div {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .imageLabel div p {
        font-size: 16px;
    }
    .conteiner-add-photo-confirm {
        display: flex; 
        gap: 20px;
    }
    #input-st-24 {
        display: flex;
        gap: 20px;
    }
    .conteiner-add-photo-confirm-device {
        display: none;
    }
    #top-place {
        text-align: center;
        position: relative;
        top: -7px;
        display: block;
        width: 120px;
        height: 30px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        margin-left: 10px;
        border: solid 1px rgb(188, 188, 188);
    }

}
@media screen and (min-width: 1000px) {
    #btn-moderate {
        position: absolute;
        bottom: 50px;
        right: 50px;
        display: block;
        height: 40px;
        width: 280px;
        background-color: #4caf50;
        text-align: center;
        align-content: center;
        font-size: 17px;
        font-family: Arial, Helvetica, sans-serif;
        color: white;
        border-radius: 5px;
        border: none;
        cursor: pointer;
    }
    #btn-moderate:hover {
        background-color: #257b27;
    }
    #conteiner-chonological-add {
        display: flex;
        width: 70%;
        height: 80px;
        margin-top: 40px;
        position: relative;
        left: 15%;
        cursor: default;
    }
    .step-chonologic p {
        font-size: 12px;
        text-align: center;
        position: absolute;
        top: 22px;
        left: -44px;
        width: 120px;
    }
    .conteiner-input-data-add {
        display: block;
        width: 70%;
        position: relative;
        top: 10px;
        left: 15%;
    }
    .menu-category {
        display: block;
        width: 410px;
        position: relative;
        left: calc(50% - 210px);
    }
    #add-channel-conteiner-2 {
        height: 200px;
    }
    #btn-back-form-3 {
        position: absolute;
        bottom: 50px;
        left: 50px;
        display: block;
        height: 38px;
        width: 120px;
        text-align: center;
        align-content: center;
        font-size: 17px;
        font-family: Arial, Helvetica, sans-serif;
        color: gray;
        border-radius: 5px;
        border: solid 1px gray;
        cursor: pointer;
    }
}
@media screen and (max-width: 1000px) {
    #add-channel-conteiner-2 {
        height: 300px;
    }
    .conteiner-input-data-add {
        display: block;
        width: 100%;
        position: relative;
        top: 10px;
    }
    .menu-category {
        display: block;
        width: 100%;
        position: relative;
    }
    #conteiner-chonological-add {
        display: flex;
        width: 90%;
        height: 70px;
        margin-top: 60px;
        position: relative;
        left: 5%;
        cursor: default;
    }
    .step-chonologic p {
        text-align: center;
        font-size: 10px;
        position: absolute;
        top: 27px;
        left: -29px;
        width: 95px;
    }
    #btn-back-form-3 {
        position: absolute;
        bottom: 20px;
        left: 10px;
        display: block;
        height: 38px;
        width: calc(100% - 20px);
        text-align: center;
        align-content: center;
        font-size: 17px;
        font-family: Arial, Helvetica, sans-serif;
        color: gray;
        border-radius: 5px;
        border: solid 1px gray;
        cursor: pointer;
    }
    #btn-moderate {
        position: absolute;
        bottom: 70px;
        right: 10px;
        display: block;
        height: 40px;
        width: calc(100% - 20px);
        background-color: #4caf50;
        text-align: center;
        align-content: center;
        font-size: 17px;
        font-family: Arial, Helvetica, sans-serif;
        color: white;
        border-radius: 5px;
        border: none;
        cursor: pointer;
    }
}
.step-chonologic {
    position: relative;
    display: flex;
    width: calc(25% - 8px);
    font-family: Arial, Helvetica, sans-serif;
}
.circle-chonologic {
    outline: solid #007bff 2px;
    border: none;
    display: block;
    height: 30px;
    width: 32px;
    background-color: white;
    color: #007bff;
    border-radius: 50%;
    align-content: center;
    text-align: center;
    z-index: 2;
}
.circle-chonologic.complete {
    outline: solid #007bff 2px;
    border: solid 1px white;
    background-color: #007bff;
    color: white;
    z-index: 2;
}

.line-step {
    display: block;
    width: calc(100% - 32px);
    height: 8px;
    background-color: white;
    position: relative;
    top: 9px;
    border: solid 2px #007bff;
    border-width: 2px 0px 2px 0px;
}
.line-step span {
    display: block;
    height: 100%;
    width: 0%;
    background-color: #007bff;
    transition: width 0.5s ease;
  }
@media screen and (max-width: 1100px) {
    #conteiner-add-channel {
        position: relative;
        top: 60px;
        margin-left: 2%;
        width: 96%;
    }
    .conteiners-for-manage {
        margin-top: 20px;
        display: block;
        padding: 5px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        background-color: white;
        box-shadow: 0px 0px 10px rgb(189, 189, 189);
        border-radius: 20px;
        transition: transform 0.5s ease, opacity 0.5s ease;
    }
    #input-st-32{
        font-size: 20px;
        margin-top: 15px;
        display: block;
        height: 35px;
        width: 500px;
        border: solid 1px rgb(188, 188, 188);
        padding-left: 10px;
        border-radius: 5px;
    }
    #all-inf-ab-n-st {
        display: block;
        margin-top: 15px;
        margin-left: 10px;
        background-color: rgb(231, 231, 231);
        padding: 20px;
        border-radius: 20px;
    }
    #list-st {
        display: flex;
        gap: 100px;
    }
    .inf-ab-n-st {
        margin-left: 20px;
    }
    #input-category {
        font-size: 20px;
        margin-top: 15px;
        display: block;
        height: 35px;
        width: 300px;
        border: solid 1px rgb(188, 188, 188);
        padding-left: 10px;
        border-radius: 5px;
    }
    #dropdownList-category {
        margin-top: 10px;
        display: block;
        border: solid 1px rgb(188, 188, 188);
        padding: 10px;
        border-radius: 10px;
    }
    .conteiner-put-st {
        display: block;
        padding: 20px;
        border-radius: 10px;
        border: solid 1px rgb(188, 188, 188);
        margin-top: 20px;
    }
    .count-statistic-n {
        text-align: center;
        position: relative;
        top: -7px;
        display: block;
        width: 70px;
        height: 30px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 17px;
        margin-left: 10px;
        border: solid 1px rgb(188, 188, 188);
    }
    .menu-st-view {
        margin-top: 20px;
        display: flex;
    }
    .formatted-number {
        display: block;
        width: 100px;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
        font-size: 16px;
        border: solid 1px rgb(188, 188, 188);
    }
    .cont-st-inf-put {
        margin-top: 20px;
    }
    .imageLabel {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 320px;
        width: 200px;
        border: dashed 1px black;
        text-align: center;
    }
    .imageLabel div {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .imageLabel div p {
        font-size: 16px;
    }
    .conteiner-add-photo-confirm {
        display: flex; 
        width: 100%;
        gap: 20px;
        overflow-x: scroll;
    }
    .conteiner-add-photo-confirm-device {
        display: none;
    }
    #top-place {
        text-align: center;
        position: relative;
        top: -7px;
        display: block;
        width: 120px;
        height: 30px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        margin-left: 10px;
        border: solid 1px rgb(188, 188, 188);
    }
}
@media screen and (max-width: 960px) {
    #conteiner-add-channel {
        position: relative;
        top: 60px;
        margin-left: 2%;
        width: 96%;
    }
    .conteiners-for-manage {
        margin-top: 20px;
        display: block;
        padding: 20px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        background-color: white;
        box-shadow: 0px 0px 10px rgb(189, 189, 189);
        border-radius: 20px;
    }
    #input-st-32 {
        font-size: 20px;
        margin-top: 15px;
        display: block;
        height: 35px;
        width: 92%;
        border: solid 1px rgb(188, 188, 188);
        padding-left: 10px;
        border-radius: 5px;
    }
    #all-inf-ab-n-st {
        display: block;
        margin-top: 15px;
        margin-left: 10px;
        background-color: rgb(231, 231, 231);
        padding: 20px;
        border-radius: 20px;
    }
    #list-st {
        display: flex;
        gap: 100px;
    }
    .inf-ab-n-st {
        margin-left: 20px;
    }
    #input-category {
        font-size: 20px;
        margin-top: 15px;
        display: block;
        height: 35px;
        width: 100%;
        border: solid 1px rgb(188, 188, 188);
        padding-left: 10px;
        border-radius: 5px;
    }
    #dropdownList-category {
        margin-top: 10px;
        display: block;
        border: solid 1px rgb(188, 188, 188);
        padding: 10px;
        border-radius: 10px;
    }
    .conteiner-put-st {
        display: block;
        padding: 20px;
        border-radius: 20px;
        border: solid 1px rgb(188, 188, 188);
        margin-top: 20px;
    }
    .count-statistic-n {
        text-align: center;
        position: relative;
        top: -7px;
        display: block;
        width: 70px;
        height: 30px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 17px;
        margin-left: 10px;
        border: solid 1px rgb(188, 188, 188);
    }
    .menu-st-view {
        margin-top: 20px;
        display: block;
    }
    .formatted-number {
        display: block;
        width: 100px;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
        font-size: 17px;
        border: solid 1px rgb(188, 188, 188);
        padding: 5px 0px;
    }
    .cont-st-inf-put {
        margin-top: 20px;
    }
    .imageLabel {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 320px;
        min-width: 200px;
        border: dashed 1px black;
        text-align: center;
    }
    .imageLabel div {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .imageLabel div p {
        font-size: 16px;
    }
    .conteiner-add-photo-confirm {
        display: flex; 
        width: 100%;
        gap: 20px;
        overflow-x: scroll;
    }
    .postsinput-under {
        margin-top: 15px;
    }
    #input-st-24 {
        display: block;
    }
    #input-st-24 span {
        margin-top: 10px;
    }
    #between-el {
        display: none;
    }
    .conteiner-add-photo-confirm-device {
        display: none;
    }
}

@media screen and (max-width: 720px) {
    .imageLabel {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 280px;
        min-width: 100%;
        border: dashed 1px black;
        text-align: center;
    }
    .conteiner-add-photo-confirm-device {
        display: block;
    }
    .conteiner-add-photo-confirm {
        display: none;
    }
    .photo-conteiner-device {
        display: none;
    }
}
#btn-sing-in-instagram {
    margin-top: 20px;
    display: block;
    border: solid 1px black;
    height: 35px;
    width: 250px;
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
}
#btn-sing-in-instagram span {
    display: flex;
    gap: 20px;
}
#btn-sing-in-instagram span p {
    position: relative;
    top: -15px;
}
.conteiner-input-data-add label {
    font-size: 14px;
}
#link-add-channel {
    display: block;
    width: calc(100% - 12px);
    height: 20px;
    padding: 8px;
    border: solid 1px gray;
    font-size: 17px;
    border-radius: 5px;
}
@media screen and (min-width: 1100px) {
    #name-add-channel {
        display: block;
        width: 275px;
        height: 20px;
        padding: 8px;
        border: solid 1px gray;
        font-size: 17px;
        border-radius: 5px;
        text-align: center;
    }
    .inputs-count-inf-c div{
        display: block;
        width: calc(45% - 5px);
    }
}
@media screen and (max-width: 1100px) {
    #name-add-channel {
        display: block;
        width: calc(100% - 20px);
        height: 20px;
        padding: 8px;
        border: solid 1px gray;
        font-size: 17px;
        border-radius: 5px;
        text-align: center;
    }
    .inputs-count-inf-c div{
        display: block;
        width: calc(100% - 20px);
    }
}
.inputs-count-inf-c{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}
.inputs-count-inf-c div input {
    display: block;
    height: 20px;
    width: 100%;
    padding: 8px;
    border: solid 1px gray;
    font-size: 17px;
    border-radius: 5px;
    text-align: center;
}
.btn-next-form {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: block;
    width: 150px;
    height: 25px;
    padding: 5px;
    background-color: rgb(220, 219, 219);
    text-align: center;
    border-radius: 5px;
    color: white;
    cursor: pointer;
}
.btn-next-form.complete {
    background-color: #007bff;
}
.btn-back-form {
    position: absolute;
    bottom: 20px;
    left: 20px;
    display: block;
    border: solid 1px gray;
    width: 120px;
    padding: 5px;
    border-radius: 5px;
    text-align: center;
    color: gray;
    cursor: pointer;
}
@media screen and (max-width: 1100px) {
    .btn-back-form {
        bottom: 80px;
    }
    .btn-next-form {
        bottom: 80px;
    }
}
.btns-conteiner-form {
    position: relative;
    height: 180px;
}
.hidden {
    display: none;
}
  
@media screen and (min-width: 900px) {
    .slide-out-left {
        transform: translateX(-20%);
        opacity: 0;
    }
    .slide-in-right {
        transform: translateX(20%);
        opacity: 0;
    }
}
@media screen and (max-width: 900px) {
    .slide-out-left {
        transform: translateX(-20%);
        opacity: 0;
    }
    .slide-in-right {
        transform: translateX(20%);
        opacity: 0;
    }
}
.photo-wrapper {
    margin-bottom: 20px;
}
.preview {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.photo-container {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #aaa;
    cursor: pointer;
    position: relative;
    text-align: center;
}
.photo-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dropdown {
    position: relative;
    display: inline-block;
    width: 200px;
    max-width: 300px;
    margin-right: 20px;
    font-size: 20px;
}
.dropdown input {
    font-size: 18px;
    position: relative;
    top: -8px;
    width: 100%;
    padding: 7px;
    border: solid 1px rgb(188, 188, 188);
}
.dropdown-city {
    position: relative;
    display: inline-block;
    width: 200px;
    max-width: 300px;
    margin-right: 20px;
    font-size: 17px;
}
.dropdown-city input {
    font-size: 17px;
    position: relative;
    top: -8px;
    width: 100%;
    padding: 7px;
    border: solid 1px rgb(188, 188, 188);
}
.dropdown-list-city {
    display: none;
    position: absolute;
    width: 100%;
    background: white;
    border: solid 1px rgb(188, 188, 188);
    max-height: 150px;
    overflow-y: auto;
    z-index: 10;
}
.dropdown-list-city div {
    padding: 8px;
    cursor: pointer;
}
.dropdown-list-city div:hover {
    background: #f0f0f0;
}
#username {
    padding: 20px;
}

#conteiner-accont-inst {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 50px;
    border: solid 1px gray;
    border-radius: 10px;
}
#conteiner-accont-inst img {
    border-radius: 50%;
}
#conteiner-accont-inst h2 {
    position: relative;
}

#text-sing-in {
    color: gray;
    display: block; 
    font-size: 16px;
}
#error-message-send-form {
    position: relative;
    top: 20px;
    left: 20px;
    font-family: Arial, Helvetica, sans-serif;
    color: red;
}

/*  user channel */
@media screen and (min-width: 1100px){
    #all-conteiner-channel {
        display: flex;
        height: 600px;
        width: 88%;
        position: relative;
        top: 100px;
        left: 10%;
        margin-right: 2%;
        gap: 2%;
    }
    .conteiner-channel {
        display: block;
        height: 100%;
        width: 40%;
    }
    .conteiner-calendar-inf {
        width: 60%;
    }
    .conteiners-apycations {
        display: flex;
        gap: 1.5%;
    }
    .conteiner-today-tasks {
        margin-top: 10px;
        display: block;
        height: 200px;
        width: 50%;
        background-color: white;
        box-shadow: 0px 0px 8px rgb(159, 158, 158);
        border-radius: 20px;
    }
    .conteiner-aplications {
        margin-top: 10px;
        display: block;
        height: 200px;
        width: 50%;
        background-color: white;
        box-shadow: 0px 0px 8px rgb(159, 158, 158);
        border-radius: 20px;
    }
    #bottom-section-information-myChannel {
        display: block;
        height: 50px;
        width: 80%;
        position: relative;
        left: 15%;
        top: 220px;
        text-align: center;
     }
     .popup {
        position: absolute;
        top: 60px;
        right: 150px;
        width: 320px;
        height: 200px;
        background: #fff;
        border: 1px solid #ccc;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        padding: 10px;
        z-index: 10;
        border-radius: 5px;
      }
}
@media screen and (max-width: 1100px){
    #all-conteiner-channel {
        display: flex;
        height: 600px;
        width: 92%;
        position: relative;
        top: 100px;
        left: 4%;
        margin-right: 2%;
        gap: 2%;
    }
    .conteiner-channel {
        width: 40%;
    }
    .conteiner-calendar-inf {
        width: 60%;
    }
    .conteiners-apycations {
        display: flex;
        gap: 1.5%;
    }
    .conteiner-today-tasks {
        margin-top: 10px;
        display: block;
        height: 200px;
        width: 50%;
        background-color: white;
        box-shadow: 0px 0px 8px rgb(159, 158, 158);
        border-radius: 20px;
    }
    .conteiner-aplications {
        margin-top: 10px;
        display: block;
        height: 200px;
        width: 50%;
        background-color: white;
        box-shadow: 0px 0px 8px rgb(159, 158, 158);
        border-radius: 20px;
    }
    #bottom-section-information-myChannel {
        display: block;
        height: 50px;
        width: 80%;
        position: relative;
        left: 15%;
        top: 220px;
        text-align: center;
     }
     .popup {
        position: absolute;
        top: 60px;
        right: 150px;
        width: 320px;
        height: 200px;
        background: #fff;
        border: 1px solid #ccc;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        padding: 10px;
        z-index: 10;
        border-radius: 5px;
      }
}
@media screen and (max-width: 800px){
    #all-conteiner-channel {
        display: block;
        height: 100%;
        width: 92%;
        position: relative;
        top: 100px;
        left: 4%;
        margin-right: 2%;
    }
    .conteiner-channel {
        width: 100%;
    }
    .conteiner-calendar-inf {
        position: relative;
        margin-top: 10px;
        width: 100%;
    }
    .conteiners-apycations {
        display: block;
    }
    .conteiner-today-tasks {
        width: 100%;
    }
    .conteiner-aplications {
        width: 100%;
    }
    #bottom-section-information-myChannel {
        display: block;
        height: 50px;
        width: 100%;
        position: relative;
        left: 0px;
        top: 880px;
        text-align: center;
    }
    .cont-today-text {
       position: relative;
       top: 8px;
    }
    .popup {
        position: absolute;
        top: 100px;
        right: calc(50% - 170px);
        width: 320px;
        height: 200px;
        background: #fff;
        border: 1px solid #ccc;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        padding: 10px;
        z-index: 5;
        border-radius: 5px;
      }
}
.conteiner-inf-channel {
    display: block;
    height: 45%;
    width: 100%;
    background-color: white;
    box-shadow: 0px 0px 8px rgb(159, 158, 158);
    border-radius: 20px;
    padding-bottom: 12px;
}
#nickname-channel-in-ch {
    text-align: center;
    font-size: 14px;
}
#img-channel-in-ch {
    border-radius: 50%;
    width: 110px;
    margin-left: calc(50% - 55px);
    margin-top: 20px;
    box-shadow: 0px 0px 4px gray;
}
#data-ad-ch-inf {
    display: flex;
    gap: 40px;
    width: 94%;
    margin-left: 3%;
}
#data-ad-ch-inf div {
    font-size: 14px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    width: 50%;
}
.conteiner-manage-ad-channel {
    margin-top: 10px;
    display: block;
    height: 25%;
    width: 100%;
    background-color: white;
    box-shadow: 0px 0px 8px rgb(159, 158, 158);
    border-radius: 20px;
}
.btns-manage-ad {
    padding: 10px;
}
.btns-manage-ad li {
    margin-top: 10px;
    display: flex;
    width: 230px;
    gap: 5px;
    height: 40px;
    margin-left: 7%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
}
.btns-manage-ad li span {
    color: black;
    display: flex;
    cursor: pointer;
}
.btns-manage-ad li span img{
    position: relative;
    top: 5px;
    height: 35px;
}
.conteiner-calendar {
    display: block;
    height: 420px;
    width: 100%;
    background-color: white;
    box-shadow: 0px 0px 8px rgb(159, 158, 158);
    border-radius: 20px;
}
.day-of-week {
    display: block;
    height: 50px;
    width: 100%;
}
#all-days-w {
    display: flex;
    width: 94%;
    margin-left: 3%;
}
#all-days-w p {
    width: 15%;
    text-align: center;
    font-size: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#all-days {
    display: block;
    height: 300px;
}
.menu-chnage-m {
    display: flex;
    gap: 10px;
    width: 240px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin-left: calc(50% - 100px);
}
.menu-chnage-m button {
    height: 50px;
    background-color: rgba(255, 255, 255, 0);
    border: none;
}
.week {
    display: flex;
    gap: 0.5%;
    height: 50px;
    width: 94%;
    margin-left: 3%;
    margin-top: 5px;
}
.day {
    font-size: 13px;
    width: 15%;
    text-align: center;
    align-content: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border: solid 1px rgb(199, 199, 199);
    cursor: pointer;
}
@media screen and (min-width: 900px) {
    .day:hover {
        background-color: rgb(227, 227, 227);
    }
}
#arrow-change-back-m {
    display: block;
    height: 40px;
    width: 40px;
    position: relative;
    top: 7px;
    left: 10px;
    cursor: pointer;
}
#line-ar-ch-b-m-1 {
    display: block;
    height: 6px;
    width: 50%;
    background-color: #555;
    rotate: 135deg;
    position: relative;
    top: 10px;
}
#line-ar-ch-b-m-2 {
    display: block;
    height: 6px;
    width: 50%;
    background-color: #555;
    rotate: 45deg;
    position: relative;
    top: 15px;
}
#arrow-change-front-m {
    display: block;
    height: 40px;
    width: 40px;
    position: relative;
    top: 7px;
    left: 10px;
    cursor: pointer;
}
#line-ar-ch-f-m-1 {
    display: block;
    height: 6px;
    width: 50%;
    background-color: #555;
    rotate: 45deg;
    position: relative;
    top: 10px;
}
#line-ar-ch-f-m-2 {
    display: block;
    height: 6px;
    width: 50%;
    background-color: #555;
    rotate: 135deg;
    position: relative;
    top: 15px;
}
.cont-today-text {
    color: rgb(69, 69, 69);
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.line-in-today-cont {
    display: block;
    height: 2px;
    width: 98%;
    margin-left: 1%;
    background-color: #c1c1c1;
}
#btn-show-aplications {
    display: flex;
    height: 45px;
    width: 240px;
    gap: 5px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    background-color: #4caf50;
    color: white;
    border-radius: 12px;
    margin-left: calc(50% - 120px);
    position: relative;
    top: 30px;
    cursor: pointer;
}
#aplication-text {
    position: relative;
    top: 30px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    color: gray;
}
.aplication-ch {
    position: relative;
    display: block;
    border: solid 1px gray;
    background-color: rgb(234, 234, 234);
    border-radius: 10px;
    margin: 45px 0px 45px 0px;
}
.text-aplication-ch {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding-left: 10px;
}
.all-details-apli {
    margin: 0px 10px 0px 10px;
    width: calc(100% - 20px);
}
.details-apli-conteiner {
    display: flex;
    gap: 10px;
}
.details-apli {
    padding: 5px;
    display: block;
    min-height: 20px;
    max-height: 120px;
    width: calc(50% - 25px);
    background-color: rgb(207, 206, 206);
    border-radius: 10px;
    padding: 10px;
}
.name-datail {
    position: relative;
    top: -8px;
    font-size: 12px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.status-new-apli {
    position: absolute;
    right: -2px;
    top: 0px;
    display: block;
    width: 15px;
    height: 15px;
    background-color: #d21f1c;
    border-radius: 50%;
}
.btn-copy-link {
    display: flex;
    width: 175px;
    position: relative;
    top: 5px;
    font-size: 14px;
    cursor: pointer;
}
.btns-apli {
    position: absolute;
    right: 20px;
    bottom: 10px;
    display: flex;
    gap: 10px;
    width: 100px;
}
.btns-apli div {
    cursor: pointer;
}
.btn-accept-apli {
    padding: 10px;
    display: block;
    height: 20px;
    width: 20px;
    background-color: rgb(6, 137, 6);
    border-radius: 5px;
    transition: .025s;
}
.btn-accept-apli:hover {
    background-color: rgb(4, 96, 4);
}
.btn-reject-apli {
    padding: 10px;
    display: block;
    height: 20px;
    width: 20px;
    background-color: rgba(255, 0, 0, 0.874);
    backdrop-filter: blur(4px);              
    -webkit-backdrop-filter: blur(4px);      
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    transition: .025s;
}
.btn-reject-apli:hover {
    background-color: rgba(190, 11, 11, 0.874);
}
.btn-planed-ch {
    display: block;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    height: 20px;
    min-width: 150px;
    min-width: 200px;
    background-color: white;
    border: solid 1px gray;
    padding: 8px;
    position: absolute;
    right: 10px;
    border-radius: 5px;
    cursor: default;
}
.text-category-apli {
    display: block;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.category-conteiner-apli {
    min-height: 100px;
    max-height: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
@media screen and (min-width: 1100px) {
    .conteiner-set-time-order {
        position: absolute;
        top: 200px;
        right: calc(50% - 240px);
        display: block;
        height: 260px;
        width: 440px;
        background-color: white;
        box-shadow: 0px 0px 10px gray;
        border-radius: 15px;
        padding: 20px;
        z-index: 10;
    }
    .change-date-apli {
        display: block;
        text-align: center;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        height: 20px;
        width: 125px;
        padding: 8px;
        position: absolute;
        left: 10px;
        bottom: 10px;
        border-radius: 5px;
        cursor: pointer;
    }
    .aplication-ch {
        padding-bottom: 80px;
    }
    .btn-planed-ch {
        bottom: 10px;
    }
}
@media screen and (max-width: 1100px) {
    .conteiner-set-time-order {
        position: absolute;
        top: 200px;
        right: calc(8% - 20px);
        display: block;
        height: 260px;
        width: 84%;
        background-color: white;
        box-shadow: 0px 0px 10px gray;
        border-radius: 15px;
        padding: 20px;
        z-index: 10;
    }
    .change-date-apli {
        display: block;
        text-align: center;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        height: 20px;
        width: 125px;
        padding: 8px;
        position: absolute;
        bottom: 5px;
        right: 10px;
        border-radius: 5px;
        cursor: pointer;
    }
    .aplication-ch {
        padding-bottom: 100px;
    }
    .btn-planed-ch {
        bottom: 40px;
    }
}
.text-set-time-order {
    font-size: 18px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
}
.btn-close-compl-updated,
.btn-close-conf-cancel-ad-b,
.btn-close-withDraw,
.btn-close-add-balance,
.btn-close-menu-set-new-date,
.btn-close-complete-conteiner,
.btn-close-menu-cancel-order,
.btn-close-send-complaint-order,
.btn-close-set-time-order {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
}
.set-time-menu {
    position: relative;
    top: 20px;
    display: flex;
    gap: 20px;
    justify-content: center;
}
.set-new-time-menu {
    position: relative;
    display: flex;
    gap: 20px;
    justify-content: center;
}
.set-date-order {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: block;
    height: 20px;
    width: 150px;
    padding: 5px;
    border: solid 1px gray;
    border-radius: 5px;
    cursor: pointer;
}
.text-empty-cont-orders {
    font-size: 14px;
    text-align: center;
    position: relative;
    top: 30px;
}
.options-set-date {
    display: none;
    position: relative;
    top: 5px;
    height: 100px;
    width: calc(100% - 2px);
    background-color: white;
    border: solid 1px gray;
    border-radius: 5px;
    overflow-y: scroll;
    text-align: center;
}
.option-date {
    display: block;
    height: 30px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    transition: .25s;
    cursor: pointer;
    align-content: center;
}
.option-date:hover {
    background-color: rgb(220, 219, 219);
}

.text-inf-type-set-order-date {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
.btn-accept-date-and-time {
    position: absolute;
    bottom: 20px;
    left: calc(50% - 104px);
    display: block;
    height: 20px;
    width: 200px;
    padding: 8px;
    text-align: center;
    background-color: #257b27;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    border-radius: 10px;
    cursor: pointer;
}
.text-date-and-time-buyer {
    position: relative;
    top: 10px;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: gray;
}
.date-and-time-buyer {
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: gray;
}
.set-time-order {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: block;
    height: 20px;
    width: 80px;
    padding: 5px;
    border: solid 1px gray;
    border-radius: 5px;
    cursor: pointer;
}
.input-time-set-hour,
.input-time-set-minute {
    position: relative;
    top: -2px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    text-align: center;
    width: 20px;
    padding: 2px;
}
@media screen and (max-width: 800px) {
    #btn-show-aplications {
        position: relative;
        top: 40px;
    }
    #aplication-text {
        position: relative;
        top: 40px;
    }
}
#btn-show-aplications img {
    position: relative;
    top: -5px;
    height: 50px;
}
#conteiner-aplications {
    position: fixed;
    right: -100%;
    top: 0px;
    display: block;
    height: 100%;
    width: 40%;
    background-color: white;
    box-shadow: 0px 0px 8px gray;
    transition: 0.45s;
    overflow-y: scroll;
    z-index: 10;
}
@media screen and (max-width: 950px) and (min-width: 800px) {
    #conteiner-aplications {
        width: 50%;
    }
}
@media screen and (max-width: 800px) {
    #conteiner-aplications {
        width: 100%;
    }
}
.conteiner-manu-aplications {
    background-color: rgb(109, 109, 251);
    padding: 20px;
    font-family: Arial, Helvetica, sans-serif;
}
.conteiner-manu-aplications h2 {
    color: white;
    text-align: center;
    position: relative;
    top: 25px;
}
.all-aplications {
    padding: 2px 20px 5px 20px;
    display: block;
}
.line-in-aplication-conteiner {
    display: block;
    width: 100%;
    height: 2px;
    background-color: gray;
}
#close-aplications-menu {
    position: absolute;
    left: 10px;
    font-size: 40px;
    cursor: pointer;
    display: block;
    width: 40px;
    text-align: center;
    color: white;
}

.event {
    position: relative;
    top: -10px;
    font-size: 12px;
    color: #333;
    margin-top: 4px;
    text-align: center;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: rgba(167, 3, 167, 0.418);
    color: white;
    font-size: 10px;
    padding: auto;
    border-radius: 4px;
}
  .popup-close {
    display: block;
    height: 20px;
    width: 20px;
    font-size: 22px;
    position: relative;
    top: 2px;
    left: 290px;
    cursor: pointer;
    font-weight: bold;
    color: #999;
  }
  .popup-close:hover {
    color: black;
  }
  .event-in-calndary-cont {
    margin-top: 5px;
    display: flex;
    gap: 15px;
    padding: 10px;
    background-color: rgba(5, 124, 5, 0.603);
    border-radius: 5px;
    color: white;
  }
  .text-none-event {
    position: relative;
    top: 50px;
  }
.today-planned-event {
    text-align: center;
    align-content: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    padding: 3px;
    display: block;
    height: 120px;
    overflow-y: scroll;
}
.event-today {
    display: flex;
    background-color: #c9c8c8;
    margin-top: 5px;
    padding: 10px;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
}
@media screen and (min-width: 750px){
    #conteiner-manage-format {
        padding: 0px 20px 0px 20px;
        position: absolute;
        top: 150px;
        left: 300px;
        height: 500px;
        width: 600px;
        background-color: #f0f0f0;
        box-shadow: 0px 0px 10px gray;
        border-radius: 20px;
    }
    .conteiner-format {
        position: relative;
        font-size: 14px;
        font-family: Arial, Helvetica, sans-serif;
        padding: 10px;
        margin-top: 10px;
        display: flex;
        height: 50px;
        border: 2px solid rgb(224, 224, 224);
        background-color: white;
        border-radius: 10px;
        cursor: default;
    }
    #conteiner-add-format {
        font-size: 13px;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
        padding: 10px;
        margin-top: 10px;
        display: block;
        height: 50px;
        background-color: rgb(249, 249, 249);
        border-radius: 10px;
        border: 2px dashed rgb(224, 224, 224);
        cursor: pointer;
    }
    #btn-close-menu-create-format,
    #btn-close-menu-add-format,
    #btn-close-menu-format {
       display: block;
       height: 20px;
       width: 20px;
       font-size: 32px;
       position: relative;
       top: 20px;
       left: 95%;
       cursor: pointer;
       font-weight: bold;
       color: #999;
    }
    #btn-close-menu-format:hover,
    #btn-close-menu-ad-note:hover {
       color: black;
    }
    #conteiner-add-formats {
        display: none;
        padding: 0px 20px 0px 20px;
        position: absolute;
        top: 150px;
        left: 300px;
        height: 500px;
        width: 600px;
        background-color: #f0f0f0;
        box-shadow: 0px 0px 10px gray;
        border-radius: 20px;
    }
    #all-add-formats {
        justify-content: center;
        display: grid;
        gap: 2%;
        width: 100%;
        height: 400px;
        grid-template-columns: repeat(3, 31%);
        overflow: scroll;
    }
    .conteiner-formats-user {
        display: block;
        height: 350px;
        overflow-y: scroll;
    }
    .text-format {
        text-align: center;
    }
    #conteiner-create-format {
        display: none;
        padding: 0px 20px 0px 20px;
        position: absolute;
        top: 150px;
        left: 300px;
        height: 500px;
        width: 600px;
        background-color: #f0f0f0;
        box-shadow: 0px 0px 10px gray;
        border-radius: 20px;
    }
    #input-name-new-format {
        display: block;
        height: 20px;
        width: calc(100% - 10px);
        padding: 10px;
        font-size: 17px;
        font-family: Arial, Helvetica, sans-serif;
        border-radius: 5px;
        border: none;
    }
    #input-description-new-format {
        padding: 5px;
        padding-top: 10px;
        margin-top: 20px;
        display: block;
        height: 20px;
        min-width: 100%;
        max-width: 100%;
        min-height: 120px;
        max-height: 120px;
        font-size: 17px;
        font-family: Arial, Helvetica, sans-serif;
        border-radius: 5px;
        border: none;
    }
    .conteiner-add-new-format {
        padding: 20px;
        position: relative;
        top: 30px;
    }
    #btn-save-formats {
        position: relative;
        top: 10px;
        text-align: center;
        align-content: center;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        display: block;
        height: 40px;
        width: 200px;
        background-color: #257b27;
        color: white;
        border-radius: 10px;
        cursor: pointer;
    }
}
@media screen and (max-width: 750px){
    #conteiner-manage-format {
        padding: 0px 20px 90px 20px;
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
        background-color: #f0f0f0;
        box-shadow: 0px 0px 10px gray;
        border-radius: 0px;
        overflow: scroll;
    }
    .conteiner-format {
        position: relative;
        font-size: 14px;
        font-family: Arial, Helvetica, sans-serif;
        padding: 10px;
        margin-top: 10px;
        display: flex;
        height: 50px;
        width: calc(100% - 64px);
        border: 2px solid rgb(224, 224, 224);
        background-color: white;
        border-radius: 10px;
        cursor: default;
    }
    #conteiner-add-format {
        font-size: 13px;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
        padding: 10px;
        margin-top: 10px;
        display: block;
        height: 50px;
        width: calc(100% - 64px);
        background-color: rgb(249, 249, 249);
        border-radius: 10px;
        border: 2px dashed rgb(224, 224, 224);
        cursor: pointer;
    }
    #btn-close-menu-create-format,
    #btn-close-menu-add-format,
    #btn-close-menu-format {
       display: block;
       height: 20px;
       width: 20px;
       font-size: 32px;
       position: absolute;
       top: 20px;
       right: 60px;
       cursor: pointer;
       font-weight: bold;
       color: #999;
    }
    #btn-close-menu-format:hover {
       color: black;
    }
    #conteiner-add-formats {
        display: none;
        padding: 0px 20px 0px 20px;
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
        background-color: #f0f0f0;
        box-shadow: 0px 0px 10px gray;
        overflow: scroll;
    }
    #all-add-formats {
        position: relative;
        top: 10px;
        justify-content: center;
        display: grid;
        gap: 2%;
        width: calc(100% - 40px);
        height: 100%;
        grid-template-columns: repeat(1, 100%);
    }
    .text-add-format {
        opacity: 0;
    }
    .text-format {
        position: relative;
        top: 55px;
        left: 50px;
        width: 320px;
    }
    .conteiner-formats-user {
        position: relative;
        top: 55px;
        text-align: center;
        display: block;
        height: 100%;
    }
    #btn-save-formats {
        position: fixed;
        bottom: 10px;
        left: 10px;
        text-align: center;
        align-content: center;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        display: block;
        height: 40px;
        width: calc(100% - 20px);
        background-color: #257b27;
        color: white;
        border-radius: 10px;
        cursor: pointer;
    }
    #conteiner-create-format {
        display: none;
        padding: 0px 20px 0px 20px;
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
        background-color: #f0f0f0;
        box-shadow: 0px 0px 10px gray;
        border-radius: 0px;
    }
    #input-name-new-format {
        display: block;
        height: 20px;
        min-width: calc(100% - 48px);
        max-width: calc(100% - 48px);
        padding: 10px;
        font-size: 17px;
        font-family: Arial, Helvetica, sans-serif;
        border-radius: 5px;
        border: none;
    }
    #input-description-new-format {
        padding: 5px;
        padding-top: 10px;
        margin-top: 20px;
        display: block;
        height: 20px;
        min-width: calc(100% - 40px);
        max-width: calc(100% - 40px);
        min-height: 120px;
        max-height: 120px;
        font-size: 17px;
        font-family: Arial, Helvetica, sans-serif;
        border-radius: 5px;
        border: none;
    }
    .conteiner-add-new-format {
        padding: 20px;
        position: relative;
        top: 50px;
    }
}
.conteiner-price {
    align-self: self-end;
    display: flex;
    position: absolute;
    top: 15px;
    right: 65px;
}
.conteiner-price input {
    display: block;
    height: 30px;
    width: 80px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    padding: 5px;
    border: solid 1px gray;
    border-radius: 5px;
}
.conteiner-price label {
    position: relative;
    top: 10px;
    left: 10px;
    font-size: 20px;
}
.cont-btn-remove-format {
    position: absolute;
    right: 10px;
    cursor: pointer;
}
.add-format {
    position: relative;
    display: block;
    height: 200px;
    background-color: white;
    border: 2px solid rgb(224, 224, 224);
    border-radius: 10px;
}
.add-format h3 {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}
.inf-symv {
    font-size: 12px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    position: relative;
    color: gray;
    border: solid 1px gray;
    padding: 0px 5px 0px 5px;
    border-radius: 50%;
    cursor: default;
}
.cont-inf-ab-format {
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    padding: 0px 10px 0px 10px;
}
.btn-add-format {
    margin-left: calc(50% - 50px);
    position: absolute;
    bottom: 12px;
    display: flex;
    width: 100px;
    gap: 20px;
    height: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    cursor: pointer;
}
.btn-add-format p {
    position: relative;
    top: -18px;
}
.plus-btn-add {
    font-size: 25px;
    position: relative;
    top: -7px;
    left: 10px;
    cursor: pointer;
}
.status-added {
    display: none;
    position: relative;
    top: 5px;
}
.delete-format {
    line-height: 11px;
    text-align: center;
    display: block;
    height: 15px;
    width: 15px;
    background-color: #ec6865;
    color: white;
    font-size: 18px;
    position: absolute;
    top: 5px;
    right: 5px;
    border-radius: 50%;
    cursor: pointer;
}
.confirm-delete {
    height: 120px;
    width: 300px;
    background-color: white;
    position: absolute;
    top: 200px;
    left: 155px;
    box-shadow: 0px 0px 10px gray;
    border-radius: 10px;
    padding: 10px;
}
.confirm-delete p {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}
.btns-confirm-delete {
    position: relative;
    top: 20px;
    left: calc(50% - 240px / 2);
    width: 240px;
    display: flex;
    gap: 40px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.btns-confirm-delete div {
    cursor: pointer;
}
.btn-delete-delete-format {
    text-align: center;
    font-size: 14px;
    display: block;
    height: 20px;
    width: 100px;
    background-color: #bc2522;
    color: white;
    border-radius: 5px;
}
.btn-delete-cancel-format {
    text-align: center;
    font-size: 14px;
    display: block;
    height: 20px;
    width: 100px;
    border: 1px solid gray;
    border-radius: 5px;
}
#btn-create-new-format {
    display: block;
    height: 50px;
    width: 300px;
    background-color: #4caf50;
    text-align: center;
    align-content: center;
    position: relative;
    top: 60px;
    border-radius: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: white;
    cursor: pointer;
}
#error-wh-create-format {
    color: red;
    position: relative;
    top: 60px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
}
.update-data-follower label {
    position: relative;
    top: 3px;
}
.Update-input {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    text-align: center;
    width: 120px;
    height: 25px;
    border: solid 1px rgb(206, 205, 205);
    border-radius: 4px;
    padding-left: 5px;
    color: gray;
}
.Update-input-count {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    text-align: center;
    width: 50px;
    height: 25px;
    border: solid 1px rgb(206, 205, 205);
    border-radius: 4px;
    padding-left: 5px;
    color: gray;
}
.cont-location-update {
    margin-top: 10px;
}
.Update-label {
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
}
.update-data-reels-menu {
    margin-top: 5px;
    margin-left: 20px;
}
.Update-data-menu h3 {
    position: relative;
    top: -20px;
    font-family: Arial, Helvetica, sans-serif;
}

@media screen and (min-width: 1100px) {
    .conteiner-update-data {
        padding: 30px;
        position: relative;
        left: 15%;
        top: 120px;
        display: block;
        height: 1750px;
        width: 75%;
        background-color: white;
        box-shadow: 0px 0px 10px rgb(189, 189, 189);
        border-radius: 20px;
    }
    .Update-data-menu {
        margin-top: 10px;
        border: solid 1px rgb(199, 199, 199);
        padding: 40px;
        border-radius: 10px;
        position: relative;
        top: 20px;
    }
    .update-data-follower {
        border: solid 1px rgb(199, 199, 199);
        padding: 40px;
        border-radius: 10px;
        gap: 15px;
        position: relative;
        top: 15px;
        font-family: Arial, Helvetica, sans-serif;
    }
    #all-order {
        position: relative;
        top: 50px;
        display: grid;
        grid-template-columns: repeat(5, calc(20% - 10px));
        gap: 10px;
        height: 100%;
        padding: 20px;
    }
    .order-conteiner {
        font-family: Arial, Helvetica, sans-serif;
        padding: 10px 2px 2px 2px;
        display: flex;
        flex-direction: column; 
        height: 300px;
        background-color: white;
        box-shadow: 0px 0px 10px gray;
        align-items: center;  
        border-radius: 10px;
    }
    #btn-update-data {
        margin-top: 40px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
        position: relative;
        top: 40px;
        display: none;
        height: 50px;
        width: 300px;
        background-color: #257b27;
        color: white;
        border-radius: 10px;
        padding: 10px;
        border: none;
        cursor: pointer;
    }
    .conteiner-set-new-posttime {
        position: absolute;
        top: 200px;
        right: calc(50% - 220px);
        display: block;
        height: 200px;
        width: 420px;
        background-color: white;
        box-shadow: 0px 0px 10px gray;
        border-radius: 10px;
        padding: 10px;
        z-index: 10;
    }
}
.order-conteiner {
    position: relative;
    opacity: 1;
    transition: opacity 4s ease;
}
.order-conteiner.fade-out {
    opacity: 0;
    pointer-events: none;
}
@media screen and (max-width: 1100px) {
    .conteiner-update-data {
        padding: 12px;
        position: relative;
        top: 100px;
        display: block;
        height: 100%;
        width: 100% - 60px;
        background-color: white;
        box-shadow: 0px 0px 10px rgb(189, 189, 189);
        border-radius: 20px;
    }
    .Update-data-menu {
        margin-top: 10px;
        border: solid 1px rgb(199, 199, 199);
        padding: 10px;
        border-radius: 10px;
        position: relative;
        top: 20px;
        padding-bottom: 30px;
    }
    .update-data-follower {
        display: flex;
        gap: 10px;
        border: solid 1px rgb(199, 199, 199);
        padding: 10px;
        border-radius: 10px;
        gap: 15px;
        position: relative;
        top: 15px;
        font-family: Arial, Helvetica, sans-serif;
        padding-bottom: 20px;
    }
    #btn-update-data {
        margin-top: 40px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
        position: relative;
        display: none;
        height: 50px;
        width: 100%;
        background-color: #257b27;
        color: white;
        border-radius: 10px;
        padding: 10px;
        border: none;
        cursor: pointer;
    }
    .conteiner-set-new-posttime {
        position: absolute;
        top: 200px;
        right: calc(8% - 10px);
        display: block;
        height: 200px;
        width: 84%;
        background-color: white;
        box-shadow: 0px 0px 10px gray;
        border-radius: 10px;
        padding: 10px;
        z-index: 10;
    }
}
@media screen and (max-width: 1100px) and (min-width: 800px) {
    #all-order {
        position: relative;
        top: 50px;
        display: grid;
        grid-template-columns: repeat(4, 23.5%);
        gap: 2%;
        padding: 20px;
    }
    .order-conteiner {
        font-family: Arial, Helvetica, sans-serif;
        padding: 10px 2px 2px 2px;
        display: flex;
        flex-direction: column; 
        height: 300px;
        background-color: white;
        box-shadow: 0px 0px 10px gray;
        align-items: center;  
        border-radius: 10px;
    }
}
@media screen and (max-width: 800px) and (min-width: 585px){
    #all-order {
        position: relative;
        top: 50px;
        display: grid;
        grid-template-columns: repeat(3, 32%);
        gap: 2%;
        padding: 20px;
    }
    .order-conteiner {
        font-family: Arial, Helvetica, sans-serif;
        padding: 10px 2px 2px 2px;
        display: flex;
        flex-direction: column; 
        height: 300px;
        background-color: white;
        box-shadow: 0px 0px 10px gray;
        align-items: center;  
        border-radius: 10px;
    }
}
@media screen and (max-width: 585px) and (min-width: 405px) {
    #all-order {
        position: relative;
        top: 50px;
        display: grid;
        grid-template-columns: repeat(1, 100%);
        padding: 20px;
        gap: 20px;
    }
    .order-conteiner {
        font-family: Arial, Helvetica, sans-serif;
        padding: 10px 2px 2px 2px;
        display: flex;
        flex-direction: column; 
        height: 290px;
        background-color: white;
        box-shadow: 0px 0px 10px gray;
        align-items: center;  
        border-radius: 10px;
    }
    .conteiner-inf-ab-order {
        display: flex;
        gap: 10px;
        font-size: 16px;
    }
    .counteiner-format-order {
        width: 140px;
    }
    .counteiner-format-order div {
        margin-top: 10px;
    }
}
@media screen and (max-width: 405px) {
    #all-order {
        position: relative;
        top: 50px;
        display: block;
        padding: 20px;
    }
    .order-conteiner {
        margin-bottom: 15px;
        font-family: Arial, Helvetica, sans-serif;
        padding: 10px 2px 2px 2px;
        display: flex;
        flex-direction: column; 
        height: 300px;
        width: 100%;
        background-color: white;
        box-shadow: 0px 0px 10px gray;
        align-items: center;  
        border-radius: 10px;
    }
}
#conteiner-all-ad-note {
    position: relative;
    top: 50px;
}
.text-deta-conteiner-new-date {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    text-align: center;
}
.btn-change-date-on-new {
    display: block;
    width: 210px;
    position: absolute;
    bottom: 20px;
    left: calc(50% - 115px);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-radius: 10px;
    background-color: gray;
    text-align: center;
    color: white;
    padding: 10px;
    cursor: pointer;
}
.menu-complete-order {
    position: relative;
    top: 20px;
    height: 90px;
}
.btn-complete-order {
    background-color: #257b27;
    color: white;
    display: block;
    width: 220px;
    border-radius: 5px;
    text-align: center;
    position: relative;
    left: calc(50% - 118px);
    top: 10px;
    padding: 8px;
    cursor: pointer;
}
.btn-move-back-apli {
    position: relative;
    left: calc(50% - 58px);
    top: 10px;
    display: block;
    width: 100px;
    text-align: center;
    padding: 8px;
    cursor: pointer;
}
.btn-change-date-on-new:hover {
    background-color: rgb(106, 106, 106);
}

.heart-jump {
    animation: jump 1s ease;
  }
  
  @keyframes jump {
    0% { transform: scale(1) translateY(0); }
    30% { transform: scale(1.15) translateY(-10px); }
    60% { transform: scale(0.9) translateY(5px); }
    100% { transform: scale(1) translateY(0); }
  }
  
#date-ad-channel {
    color: gray;
}
.number-date {
    width: 20px;
    text-align: center;
    border: 1px solid #ccc;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.number-date:focus{
    outline: none;
}
.conteiner-put-date {
    display: flex;
}
.conteiner-put-time {
    display: flex;
}
.conteiner-put-time span {
    position: relative;
    top: 4px;
}
.basket-menu-in-aplications {
    position: relative;
    top: 0px;
    display: flex;
    gap: 30px;
    height: 60px;
    width: 100%;
    border-radius: 10px 10px 0px 0px;
    background-color: #348337;
}
.basket-menu-in-aplications img {
    position: relative;
    top: 10px;
    left: 20px;
    height: 30px;
}
.text-aplic-b {
    color: white;
    position: relative;
    top: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
}

.conteiner-text-form-basket {
    padding: 15px;
    display: flex;
    gap: 20px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}
.conteiner-text-form-basket p {
    position: relative;
    top: -10px;
}
#conteiner-form-basket {
    display: block;
    height: 100px;
}
#basket-link input{
    font-size: 17px;
    height: 30px;
    width: 84%;
    text-align: center;
    border: solid 1px gray;
    border-radius: 5px;
    margin: 0% 8% 0% 8%;
}
#basket-contacts {
    position: relative;
}
#basket-contacts input {
    margin: 20px 8% 0% 8%;
    font-size: 17px;
    height: 30px;
    width: 84%;
    text-align: center;
    border: solid 1px gray;
    border-radius: 5px;
}
  
  .goal-options {
    margin: 0% 8% 0% 8%;
    font-family: Arial, Helvetica, sans-serif;
    display: none;
    position: absolute;
    top: 60px;
    background-color: white;
    border: 1px solid gray;
    border-radius: 5px;
    width: 84%;
    max-height: 100px;
    overflow-y: auto;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }
  
  .goal-options div {
    padding: 8px 12px;
    cursor: pointer;
  }
  
  .goal-options div:hover {
    background-color: #f0f0f0;
  }
  
#btn-send-apli {
    margin: 0% 25% 0% 25%;
    border-radius: 10px;
    width: 50%;
    height: 40px;
    background-color: #4caf50;
    border: none;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    text-align: center;
    color: white;
    cursor: pointer;
}
@media screen and (max-width: 550px) {
    #btn-send-apli {
        margin: 0% 8% 0% 8%;
        width: 84%;
    }
}
#sum-basket-ads {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}


.month-selector {
    position: relative;
    font-size: 12px;
    width: 65px;
    cursor: pointer;
    margin-left: 2px;
}

  .selected-month {
    background-color: #fff;
    padding: 5px;
    border: 1px solid #ccc;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }

  .months-list {
    display: none;
    position: absolute;
    top: 28px;
    left: 0;
    width: 100%;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    max-height: 100px;
    text-align: center;
    overflow-y: auto;
    z-index: 10;
  }

  .month-option {
    padding: 5px;
    transition: background 0.2s;
  }

  .month-option:hover {
    background-color: #f0f0f0;
  }
#btn-more-func-ad-apli {
    position: absolute;
    right: 20px;
    cursor: pointer;
}
#conteiner-more-ad-apli {
    display: none;
    height: 65px;
    width: 180px;
    position: absolute;
    top: 40px;
    right: 10px;
    background-color: white;
    box-shadow: 0px 0px 10px gray;
    border-radius: 10px;
    padding: 5px;
    z-index: 5;
}
#conteiner-more-ad-apli p {
    cursor: pointer;
}
.order-conteiner img {
    border-radius: 50%;
}
.counteiner-format-order {
    text-align: center;
    position: relative;
    margin-top: 5px;
    background-color: rgb(220, 220, 220);
    padding: 5px 10px 5px 10px;
    border-radius: 5px;
}
.counteiner-format-order div {
    text-align: center;
    position: relative;
}
.text-format-order-pr {
    font-size: 14px;
    padding: 5px;
}
.btn-open-menu-order-manage {
    display: block;
    height: 25px;
    width: 25px;
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
}
.btn-open-menu-order-manage img {
    position: relative;
    height: 100%;
    width: 100%;
}
.conteiner-order-manage {
    position: absolute;
    top: 25px;
    right: 5px;
    display: none;
    width: 125px;
    text-align: center;
    padding: 5px;
    background-color: white;
    border: solid 1px gray;
    border-radius: 5px;
    z-index: 2;
}
.conteiner-order-manage div {
    padding: 2px;
    cursor: pointer;
}
.conteiner-order-manage div:hover {
    background-color: rgb(203, 203, 203);
}
.conteiner-cancel-order {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position: absolute;
    top: 200px;
    left: calc(50% - 190px);
    display: block;
    height: 170px;
    width: 360px;
    padding: 10px;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0px 0px 10px gray;
}
.text-cancel-order {
    text-align: center;
    position: relative;
    top: 40px;
}
.btns-cancel-order {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 40px;
    position: absolute;
    bottom: 30px;
}
.confirm-cancel {
    display: block;
    width: 80px;
    text-align: center;
    border-radius: 5px;
    border: solid 1px gray;
    background-color: rgba(205, 0, 0);
    color: white;
    padding: 5px;
    cursor: pointer;
}
.cancel-cancel-order {
    display: block;
    width: 80px;
    text-align: center;
    border-radius: 5px;
    border: solid 1px gray;
    padding: 5px;
    cursor: pointer;
}
.conteiner-send-complaint-order {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position: absolute;
    top: 80px;
    left: calc(50% - 190px);
    display: block;
    height: 450px;
    width: 360px;
    padding: 10px;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0px 0px 10px gray;
    transition: 0.25s;
}
.custom-reason {
    display: none;
    border: solid 1px gray;
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
    padding: 5px;
    border-radius: 5px;
    min-height: 55px;
    max-height: 55px;
    min-width: calc(100% - 32px);
    max-width: calc(100% - 32px);
    position: absolute;
    bottom: 55px;
}
#complaint-form {
    margin-top: 10px;
    font-size: 14px;
}
#complaint-form label {
    display: block;
    margin-bottom: 5px;
} 
#complaint-form input[type="checkbox"] {
    margin-right: 8px;
}
.submit-btn {
    position: absolute;
    right: calc(50% - 85px);
    bottom: 20px;
    margin-top: 10px;
    padding: 6px 16px;
    background-color: #007bff;
    color: white;
    border: none;
    width: 170px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s;
}
.submit-btn:hover {
    background-color: #0056b3;
}

.counteiner-status-order {
    display: flex;
    position: absolute;
    bottom: 10px;
}
.counteiner-status-order img {
    position: relative;
    top: 5px;
}
@media screen and (min-width: 800px) {
    #btn-create-ad-note {
        position: relative;
        top: 20px;
        border-radius: 8px;
        padding: 10px;
        display: block;
        height: 20px;
        width: 250px;
        background-color: rgb(86, 86, 253);
        color: white;
        font-family: Arial, Helvetica, sans-serif;
        cursor: pointer;
    }
}
@media screen and (max-width: 800px) {
    #btn-create-ad-note {
        position: relative;
        top: 20px;
        left: calc(50% - 135px);
        text-align: center;
        border-radius: 8px;
        padding: 10px;
        display: block;
        height: 20px;
        width: 250px;
        background-color: rgb(86, 86, 253);
        color: white;
        font-family: Arial, Helvetica, sans-serif;
        cursor: pointer;
    }
}
#list {
    background-color: white;
}
#list option {
    background-color: white;
}
#input-text-mesage {
    border-radius: 5px;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    padding: 5px;
    margin-top: 10px;
    min-height: 40px;
    max-height: 40px;
    min-width: 300px;
    max-width: 300px;
    border: solid 1px gray;
}
#input-note-message {
    display: block;
    border-radius: 5px;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    padding: 5px;
    margin-top: 10px;
    min-height: 60px;
    max-height: 60px;
    min-width: 300px;
    max-width: 300px;
    border: solid 1px gray;
}
.btn-add-f-in-ad-note {
    display: block;
    width: 100%;
    padding: 10px 5px 10px 5px;
    border: solid 1px gray;
    text-align: center;
    border-radius: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    margin-top: 5px;
    cursor: pointer;
}

  .media-preview {
    position: relative;
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #ccc;
  }

  .media-preview img,
  .media-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .remove-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    background: red;
    color: white;
    border: none;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    cursor: pointer;
    font-size: 14px;
  }

  #btn-add-media[disabled] {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
  }

.conteiner-date-ad-basket {
    display: none;
    margin: 0% 10% 0% 10%;
    width: 80%;
}
.Btns_chose-date {
    position: relative;
    display: flex;
    gap: 30px;
}
.Btns_chose-time {
    justify-content: center;
    display: flex;
    gap: 50px;
}
.text-diapazon {
    text-align: center;
    width: 100%;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    color: gray;
    cursor: default;
}

.menu-input-date {
    position: relative;
    display: block;
    width: 48%;
    justify-content: center;
}
.menu-input-date input {
    position: relative;
    left: 0;
    width: calc(100% - 12px);
    padding: 6px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    border: solid 1px gray;
    border-radius: 5px;
}
.menu-input-time {
    display: flex;
    padding: 6px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    border: solid 1px gray;
    border-radius: 5px;
}
.menu-input-time input{
    width: 17px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    border: none;
    border-radius: 5px;
}
@media screen and (max-width: 850px) {
    .menu-input-date input,
    .menu-input-time input {
        font-size: 17px;
    }
    .menu-input-time input {
        width: 22px;
    }
}
.menu-input-time input:focus {
    outline: none;
}
.calendar-container {
    margin-top: 10px;
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #ccc;
    padding: 10px;
    display: none;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    width: 220px;
    border-radius: 5px;
}
.calendarRigth {
    right: 0;
}
.calendarLeft {
    left: 0;
}
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    font-weight: bold;
}

.calendar-nav {
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 18px;
    user-select: none;
}

.calendar-nav:hover {
    background-color: #eee;
}

.calendar-container table {
    border-collapse: collapse;
    width: 100%;
}
.calendar-container th,
.calendar-container td {
    width: 14.28%;
    text-align: center;
    padding: 5px;
    cursor: pointer;
}

  .calendar-container td.disabled {
    color: #ccc;
    pointer-events: none;
  }

  .calendar-container td:hover:not(.disabled) {
    background-color: #e0e0e0;
  }


  .time-container {
    display: flex;
    gap: 20px;
  }

  .time-input {
    display: flex;
    border: 1px solid #ccc;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    width: 120px;
  }

  .time-part {
    flex: 1;
    padding: 10px;
    text-align: center;
    background-color: #f9f9f9;
    border-right: 1px solid #ccc;
  }

  .time-part:last-child {
    border-right: none;
  }

  .dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 150px;
    overflow-y: auto;
    background-color: white;
    border: 1px solid #ccc;
    z-index: 10;
    display: none;
  }

  .dropdown div {
    padding: 8px;
    text-align: center;
    cursor: pointer;
  }

  .dropdown div:hover {
    background-color: #eee;
  }

  .menu-ad-note {
    display: block;
    height: 400px;
    width: 600px;
    background-color: white;
    position: absolute;
    top: 100px;
    left: calc(50% - 300px);
    text-align: center;
    border-radius: 20px;
    box-shadow: 0px 0px 10px rgb(189 189 189);
  }
@media screen and (max-width: 750px) {
    .menu-ad-note {
        width: 80%;
        left: 10%;
    }
}
@media screen and (max-width: 500px) {
    .menu-ad-note {
        width: 90%;
        left: 5%;
    }
}
#btn-close-menu-ad-note {
    display: block;
    height: 20px;
    width: 20px;
    font-size: 32px;
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
    font-weight: bold;
    color: #999;
}
.text-menu-ad-note {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}
#all-ad-notes {
    padding: 20px;
}
#text-if-zero-ad-note {
    display: none;
    font-size: 14px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position: relative;
    top: 80px;
}
.ad-note-b {
    position: relative;
    display: flex;
    height: 50px;
    width: calc(100% - 20px);
    border: solid 1px gray;
    border-radius: 10px;
    gap: 20px;
    margin-top: 10px;
    padding: 0px 10px 2px 10px;
}
.name-ad-note-b {
    font-family: Arial, Helvetica, sans-serif;
}
.btn-use-note {
    position: absolute;
    right: 20px;
    top: 10px;
    display: block;
    height: 20px;
    width: 90px;
    background-color: rgba(8, 160, 0);
    padding: 5px;
    border-radius: 10px;
    font-family: Arial, Helvetica, sans-serif;
    cursor: pointer;
}
#btn-ad-note-open-in-b {
    position: relative;
    top: 20px;
    font-family: Arial, Helvetica, sans-serif;
    color: black;
}
#conteiner-change-password {
    display: block;
    height: 250px;
    background-color: white;
    box-shadow: 0px 0px 10px rgb(202, 201, 201);
    padding: 20px;
    border-radius: 10px;
}
@media screen and (min-width: 900px) {
    #conteiner-change-password {
        width: 500px;
        position: absolute;
        top: 100px;
        left: calc(50% - 270px);
    }
}
@media screen and (max-width: 900px) {
    #conteiner-change-password {
        width: 80%;
        position: absolute;
        top: 200px;
        left: calc(10% - 20px);
    }
}
#conteiner-change-password input {
    display: block;
    height: 30px;
    width: calc(100% - 10px);
    font-size: 16px;
    padding: 5px;
    border: solid 1px gray;
    border-radius: 5px;
}
#btn-change-password-n {
    position: absolute;
    bottom: 20px;
    display: block;
    height: 40px;
    background-color: green;
    color: white;
    padding: 0px 20px 0px 20px;
    border-radius: 10px;
    border: none;
    font-size: 16px;
    cursor: pointer;
}
#btn-close-menu-change-passsword {
    display: block;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 30px;
    cursor: pointer;
}
#conteiner-logout,
#conteiner-delete-ac,
#conteiner-confirm-delete {
    position: absolute;
    top: 100px;
    left: calc(50% - 170px);
    display: block;
    height: 120px;
    width: 300px;
    padding: 20px;
    background-color: white;
    box-shadow: 0px 0px 10px gray;
    border-radius: 15px;
    font-family: Arial, Helvetica, sans-serif;
}
#btns-flex-logout {
    position: relative;
    top: 40px;
    display: flex;
    gap: 20px;
    justify-content: center;
}
#btns-flex-logout div {
    border: solid 1px gray;
    padding: 5px;
    border-radius: 10px;
    width: 80px;
    text-align: center;
    cursor: pointer;
}
  .code-container {
    display: flex;
    gap: 5px;
    justify-content: center;
  }
  .code-input {
    width: 28px;
    height: 30px;
    font-size: 16px;
    text-align: center;
    border: 2px solid #ccc;
    border-radius: 6px;
    outline: none;
    transition: border-color 0.2s;
  }
  .code-input:focus {
    border-color: #007bff;
  }
#btns-delete-confirm {
    display: flex;
    gap: 30px;
    font-size: 16px;
    justify-content: center;
    position: relative;
    top: 10px;
    cursor: pointer;
}
@media screen and (min-width: 550px) {
    .menu-create-ad-note {
        display: block;
        height: 230px;
        width: 400px;
        background-color: white;
        box-shadow: 0px 0px 10px gray;
        border-radius: 10px;
        position: absolute;
        top: 200px;
        left: calc(50% - 220px);
        padding: 20px;
    }
}
@media screen and (max-width: 550px) {
    .menu-create-ad-note {
        display: block;
        height: 230px;
        width: 80%;
        background-color: white;
        box-shadow: 0px 0px 10px gray;
        border-radius: 10px;
        position: absolute;
        top: 200px;
        left: calc(10% - 20px);
        padding: 20px;
    }
}

.input-ad-note {
    margin-top: 10px;
    width: calc(100% - 12px);
    height: 20px;
    padding: 5px;
    border: solid 1px gray;
    border-radius: 5px;
    font-size: 15px;
}
#btn-close-form-create-ad-note {
    display: block;
    font-size: 20px;
    position: absolute;
    right: 20px;
    top: 12px;
    cursor: pointer;
}
#submit-form-ad-note {
    display: block;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    background-color: #4caf50;
    color: white;
    width: calc(80% - 20px);
    border: none;
    position: absolute;
    bottom: 20px;
    left: calc(10% + 10px);
    font-size: 15px;
    cursor: pointer;
}
.ad-note {
    position: relative;
    display: block;
    height: 120px;
    background-color: white;
    border: solid 1px rgb(198, 194, 194);
    box-shadow: 0px 0px 10px rgb(189, 189, 189);
    padding: 20px;
    border-radius: 15px;
    font-family: Arial, Helvetica, sans-serif;
    color: gray;
}
@media screen and (min-width: 1100px) {
    #all-ad-note {
        padding: 10px;
        display: grid;
        gap: 2%;
        grid-template-columns: repeat(4, 23.5%);
    }
}
@media screen and (max-width: 1100px) and (min-width: 700px) {
    #all-ad-note {
        padding: 10px;
        display: grid;
        gap: 2%;
        grid-template-columns: repeat(3, 32%);
    }
}
@media screen and (max-width: 700px) and (min-width: 480px) {
    #all-ad-note {
        padding: 10px;
        display: grid;
        gap: 2%;
        grid-template-columns: repeat(2, 49%);
    }
}
@media screen and (max-width: 480px) {
    #all-ad-note {
        padding: 10px;
    }
    .ad-note {
        margin-top: 10px;
    }
}
.inf-cont-ad-note {
    margin-bottom: 10px;
}
.inf-ad-note {
    color: black;
}
.btn-show-menu-ad-note-chng {
    height: 30px;
    position: absolute;
    top: 5px;
    right: 10px;
    cursor: pointer;
}
.conteiner-ad-note-menu-chng {
    display: none;
    position: absolute;
    top: 30px;
    right: -5px;
    color: black;
    background-color: white;
    padding: 5px 10px 5px 10px;
    border-radius: 5px;
    box-shadow: 0px 0px 5px gray;
}
.conteiner-ad-note-menu-chng div {
    cursor: pointer;
    font-size: 14px;
}
.text-page-about {
    font-size: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 20px 20px 0px 20px;
}
@media screen and (min-width: 700px) {
    #all-history-order {
        display: block;
        min-height: 500px;
        height: 100%;
        padding: 5px 30px 5px 30px;
    }
    .date-group {
        position: relative;
        display: grid;
        padding-bottom: 45px;
        grid-template-columns: repeat(3, 330px);
        gap: 10px;
    }
    .order-history {
        position: relative;
        top: 40px;
        display: block;
        height: 200px;
        width: 320px;
        background-color: white;
        border: solid 1px gray;
        border-radius: 10px;
    }
    .result-h {
        position: relative;
        top: 15px;
        text-align: center;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
}
@media screen and (max-width: 700px) {
    #all-history-order {
        display: block;
        min-height: 400px;
        height: 100%;
        padding: 2px 10px 2px 10px;
    }
    .date-group {
        position: relative;
        display: flex;
        flex-direction: column;
        padding-bottom: 45px;
        gap: 20px;
    }
    .order-history {
        position: relative;
        top: 40px;
        display: block;
        height: 220px;
        width: 100%;
        background-color: white;
        border: solid 1px gray;
        border-radius: 10px;
    }
    .result-h {
        position: relative;
        top: 30px;
        text-align: center;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
}
.date-orders {
    position: absolute;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    z-index: 2;
}
.orders-conteiner {
    display: grid;
    grid-template-columns: repeat(3, 340px);
    grid-row-gap: 20px
}
.order-history-id {
    position: absolute;
    top: 5px;
    left: 5px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    color: gray;
}
.history-order-time-send {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    color: gray;
    position: absolute;
    top: 5px;
    right: 10px;
}
.menu-details-apli-hostory {
    display: flex;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.conteiner-img-order-h {
    position: relative;
    display: block;
    height: 150px;
    width: 100px;
    text-align: center;
    align-content: center;
}
.conteiner-img-order-h img {
    border-radius: 50%;
}
.conteiner-details-h {
    position: relative;
    top: 10px;
}
.details-h {
    margin-top: 10px;
}
.bloger-name-h {
    font-size: 12px;
}
.detail-h-text {
    font-size: 12px;
}
.detail-h {
    font-size: 14px;
    padding-top: 4px;
}
#conteiner-add-balance {
    position: absolute;
    top: 150px;
    left: calc(50% - 200px);
    background-color: white;
    height: 250px;
    width: 380px;
    padding: 10px;
    border-radius: 15px;
    box-shadow: 0px 0px 10px gray;
}
.text-action-balance {
    padding: 10px 20px 10px 20px;
    font-size: 17px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.conteiner-btns-add-blc {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    top: 30px;
}
.conteiner-btn-add-b {
    display: flex;
    gap: 20px;
    height: 50px;
    border: solid 1px gray;
    border-radius: 5px;
    position: relative;
    background-color: white;
    cursor: pointer;
}
.conteiner-btn-add-b div {
    position: relative;
    top: 15px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.conteiner-btn-add-b img {
    position: relative;
    top: calc(50% - 20px);
}
.conteiner-btn-add-b.disabled::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1;
}
.conteiner-btn-add-b.disabled > * {
    position: relative;
    z-index: 2;
    opacity: 0.5;
    pointer-events: none;
}
.text-in-work-blc {
    justify-content: center;
    display: flex;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position: absolute;
    top: 85px;
    left: calc(50% - 75px);
    height: 25px;
    width: 200px;
    color: white;
    z-index: 10;
    cursor: default;
}
.shadow-btn-add-b {
    display: block;
    height: 50%;
}
.conteiner-content-chose-sum {
    display: none;
}
.conteiner-img-metod-pay {
    display: block;
    position: relative;
    left: calc(50% - 48px);
}
.conteiner-img-metod-pay img {
    height: 40px;
}
.btns-move-in-c-add-blc {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position: absolute;
    bottom: 30px;
    left: calc(50% - 100px);
    display: flex;
    width: 220px;
    gap: 40px;
}
#btn-pay-sum-blc,
#btn-move-back-in-c-blc {
    display: block;
    width: 90px;
    font-size: 16px;
    text-align: center;
    padding: 5px;
    cursor: pointer;
}
#btn-pay-sum-blc {
    background-color: #257b27;
    color: white;
    border-radius: 5px;
}
.conteiner-add-blc-input {
    display: block;
}
.conteiner-add-blc-input span,
.menu-withDraw span {
    display: block;
    width: 180px;
    position: relative;
    top: 4px;
    left: calc(50% - 90px);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 11px;
    text-align: center;
    color: #999;
}
.conteiner-add-blc-input input {
    display: block;
    width: 180px;
    position: relative;
    left: calc(50% - 90px);
    padding: 8px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    border: solid 1px gray;
    border-radius: 5px;
    text-align: center;
}
.conteiner-do-payment {
    display: block;
    height: 700px;
    width: 80%;
    padding: 20px;
    background-color: white;
    position: absolute;
    top: 80px;
    left: calc(10% - 20px);
    box-shadow: 0px 0px 10px gray;
    border-radius: 20px;
}
.text-name-page {
    background-color: white;
    padding: 5px;
    position: absolute;
    top: 0px;
    right: 30px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    border-radius: 5px;
}
.main-nav-conteiner-paymnt {
    display: flex;
}
.conteiner-move-back-fr-paymnt {
    display: flex;
    cursor: pointer;
}
.conteiner-move-back-fr-paymnt p {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: black;
}
.arrow-mv-b-p {
    position: relative;
    top: 10px;
    left: 20px;
    display: block;
    height: 40px;
    width: 40px;
}
.line-1-mv-b-p,
.line-2-mv-b-p {
    display: block;
    height: 20px;
    width: 5px;
    background-color: black;
}
.line-1-mv-b-p {
    position: relative;
    top: 4px;
    rotate: 45deg;
}
.line-2-mv-b-p {
    position: relative;
    top: -4px;
    rotate: 135deg;
}
@media screen and (min-width: 900px) {
    .p-c-pymt-1 {
        display: none;
    }
    .p-c-pymt-2 {
        display: block;
    }
    .btn-complete-payment {
        width: 200px;
    }
    #number-card-inf {
        font-size: 15px;
    }
}
@media screen and (max-width: 900px) {
    .p-c-pymt-1 {
        display: block;
    }
    .p-c-pymt-2 {
        display: none;
    }
    .btn-complete-payment {
        width: calc(100% - 40px);
    }
}
.text-inf-payment {
    font-size: 17px;
    color: gray;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.conteiner-rekvizit {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.btn-complete-payment {
    display: block;
    height: 40px;
    padding: 10px;
    color: white;
    border-radius: 10px;
    text-align: center;
    background-color: #257b27;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 17px;
    border: none;
    position: absolute;
    bottom: 30px;
    transition: 0.25s;
    cursor: pointer;
}
.inf-rekvvizit {
    position: relative;
    top: 10px;
    border: solid 1px black;
    padding: 20px;
    border-radius: 10px;
}
.inf-rekvvizit span {
    color: gray;
    font-size: 12px;
}
.conteiner-all-about-rekvizit {
    position: relative;
    top: 30px;
}
.text-inf-payment-pk {
    display: none;
}
@media screen and (min-width: 900px) {
    .inf-rekvvizit {
        display: block;
        width: 390px;
    }
    .part-rekvizit {
        display: flex;
        gap: 40px;
    }
    .conteiner-all-about-rekvizit {
        padding: 20px 50px 20px 50px;
        display: flex;
        gap: 50px;
    }
    .text-inf-payment {
        display: none;
    }
    .text-inf-payment-pk {
        display: block;
        color: gray;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .conteiner-notes-payment {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .btn-complete-payment {
        width: 300px;
        left: calc(50% - 150px);
    }
    .conteiner-do-payment {
        height: 500px;
    }
}
.conteiner-notes-payment {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    color: gray;
    position: relative;
    top: 20px;
}
.conteiner-notes-payment div {
    width: calc(100% - 40px);
    padding: 0px 20px 0px 20px;
}
.btn-copy-card {
    border: none;
    box-shadow: none;
    background-color: white;
    display: flex;
    font-size: 15px;
    color: black;
    cursor: pointer;
}
#btn-call-support {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: block;
    height: 65px;
    width: 65px;
    background-color: #007bff;
    border-radius: 50%;
    cursor: pointer;
}
#conteiner-withDraw {
    position: absolute;
    top: 150px;
    left: calc(50% - 200px);
    background-color: white;
    height: 220px;
    width: 380px;
    padding: 10px;
    border-radius: 15px;
    box-shadow: 0px 0px 10px gray;
    transition: 0.25s;
}
.menu-withDraw {
    display: block;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    width: 200px;
    height: 80px;
    position: relative;
    top: 20px;
    left: calc(50% - 95px);
    text-align: center;
}
.menu-withDraw input{
    display: block;
    height: 20px;
    padding: 5px;
    font-size: 15px;
    text-align: center;
    border-radius: 5px;
    border: solid 1px gray;
}
.btn-withDraw-sum-conf {
    display: block;
    width: 180px;
    height: 20px;
    padding: 5px;
    background-color: #007bff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position: absolute;
    left: calc(50% - 90px);
    bottom: 25px;
    text-align: center;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}
#cont-form-send-withdraw {
    display: none;
}
.text-complete-form {
    display: block;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.form-data-withdraw {
    position: relative;
    top: 20px;
}
.form-data-withdraw input{
    position: relative;
    left: calc(50% - 130px);
    display: block;
    height: 20px;
    width: 250px;
    padding: 5px;
    border: solid 1px gray;
    font-size: 15px;
    border-radius: 5px;
}
.btns-move-in-withdraw {
    display: flex;
    width: 280px;
    gap: 40px;
    position: absolute;
    left: calc(50% - 130px);
    bottom: 20px;
}
.btns-move-in-withdraw div {
    display: block;
    width: 120px;
    height: 20px;
    padding: 5px 0px 5px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    cursor: pointer;
}
#btn-withdraw-send {
    background-color: #4caf50;
    color: white;
    border-radius: 5px;
}
.cont-conf-data {
    position: relative;
    top: 20px;
    display: flex;
    gap: 10px;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}
.inf-withdraw {
    position: relative;
    left: calc(50% - 100px);
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: block;
    width: 200px;
}
.inf-withdraw span {
    color: gray;
    font-size: 14px;
}
#error-no-withd-sum {
    position: absolute;
    width: calc(100% - 20px);
    bottom: 8px;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    color: red;
}
#btn-withdraw-send {
    font-size: 15px;
    border: none;
}
#eror-no-add-sum {
    color: red;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    position: relative;
    top: 10px;
    text-align: center;
}
.conteiner-time-w-check-pay {
    display: none;
    position: absolute;
    bottom: 10px;
    width: calc(100% - 40px);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    text-align: center;
}
.conteiner-call-support {
    position: absolute;
    bottom: 10px;
    left: calc(50% - 210px);
    width: 420px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}
.conteiner-call-support a {
    color: blue;
}
.conteiner-call-support a:hover {
    text-decoration: underline;
}
#conteiner-confirm-cancel-addbalance {
    display: block;
    height: 240px;
    width: 380px;
    padding: 10px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px 0px 10px gray;
    position: absolute;
    top: 200px;
    position: absolute;
    left: calc(50% - 200px);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#conteiner-confirm-cancel-addbalance p {
    padding: 10px;
    position: relative;
    top: 20px;
    text-align: center;
}
.btns-addbalance-cancel-conf {
    position: absolute;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}
.btns-addbalance-cancel-conf div {
    display: block;
    text-align: center;
    width: calc(100% - 22px);
    padding: 8px 0px 8px 0px;
    border: solid 1px gray;
    border-radius: 5px;
    cursor: pointer;
}
#btn-move-back-addbalance {
    background-color: #bc2522;
    color: white;
}
.text-get-reward {
    position: absolute;
    top: 10px;
    right: 20px;
}
.load-text {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    text-align: center;
    position: relative;
    top: 40px;
}
.conteiner-load-apli,
.conteiner-load-ad-note,
.conteiner-load-formats {
    position: relative;
    display: block;
    height: 200px;
}
#all-ads {
    position: relative;
    min-height: 500px;
}
.conteiner-load-ads {
    position: absolute;
    top: 120px;
    left: calc(50% - 70px);
}
.load-text-ads{
    display: block;
    width: 140px;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.emty-conteiner {
    position: absolute;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    top: 120px;
    left: calc(50% - 100px);
    width: 200px;
}
@media screen and (max-width: 800px) {
    .emty-conteiner {
        top: 80px;
    }
}
.emty-conteiner p{
    text-align: center;
}
.show-all-btn-text {
    margin-top: 5px;
    color: blue;
    text-align: center;
    cursor: pointer;
}
.emty-text {
    display: block;
    width: 150px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    text-align: center;
    position: absolute;
    left: calc(50% - 75px);
    top: 50px;
}
.emty-liked {
    display: block;
    width: 200px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    text-align: center;
    position: absolute;
    left: calc(50% - 90px);
    top: 120px;
}
#btns-go-login-and-register-content {
    display: flex;
    width: 220px;
    font-size: 19px;
    font-family: Arial, Helvetica, sans-serif;
    gap: 20px;
    position: absolute;
    top: 18px;
    left: calc(50% - 110px);
}
#login-container {
    display: none;
}
@media screen and (min-width: 960px) {
    #btn-login-content {
        padding: 0px 15px 0px 15px;
        position: relative;
        line-height: 0px;
        display: block;
        height: 35px;
        width: 100%;
        background-color: rgb(123, 123, 255);
        border-radius: 10px;
        text-align: center;
        color: white;
        cursor: pointer;
    }
    #btn-register-content {
        padding: 0px 15px 0px 15px;
        position: relative;
        line-height: 0px;
        display: block;
        height: 34px;
        width: 100%;
        outline: 2px solid rgb(190, 188, 188);
        border-radius: 10px;
        color: rgb(102, 101, 101);
        cursor: pointer;
    }
}
@media screen and (max-width: 960px) {
    #btn-login-content {
        display: none;
    }
    #btn-register-content {
        display: none;
    }
}
.conteiner-logInOrReg {
    position: relative;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 25px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
}
.conteiner-logInOrReg div {
    display: block;
    border: solid 1px gray;
    border-radius: 5px;
    width: calc(100% - 62px);
    padding: 7px 5px 7px 5px;
    text-align: center;
    cursor: pointer;
}
.btn-login-content-dev {
    background-color: rgb(123, 123, 255);
    color: white;
}
.conteiner-logInOrReg p {
    padding: 10px;
    text-align: center;
    width: calc(100% - 70px);
}
#conteiner-fnc-m.notAutorirate-format {
    display: none;
}
.text-in-ad-note {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
}
.conteiner-load-ad-note {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    position: relative;
    top: 25px;
}
#conteiner-send-Succes {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 30px;
    text-align: center;
}
.conteiner-succes-status {
    display: block;
    height: 90px;
    width: 90px;
    position: relative;
    border: solid 3px white;
    outline: solid 2px #4caf50;
    top: 25px;
    left: calc(50% - 45px);
    background-color: #4caf50;
    border-radius: 50%;
    justify-content: center;
    align-content: center;
}
.conteiner-succes-status img {
    height: 65px;
}
.cancel-order-status-in-m-ch {
    position: absolute;
    bottom: 20px;
    left: 10px;
}
.conteiner-succes-action {
    display: flex;
    gap: 50px;
    width: 260px;
    flex-direction: column;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 17px;
    position: absolute;
    top: 25%;
    left: calc(50% - 130px);
}
.conteiner-succes-action a {
    display: block;
    width: 240px;
    padding: 10px;
    border-radius: 5px;
    background-color: #007bff;
    color: white;
}
.conteiner-img-succes {
    display: block;
    height: 180px;
    width: 180px;
    background-color: #257b27;
    justify-content: center;
    align-content: center;
    border-radius: 50%;
    position: relative;
    left: calc(50% - 90px);
}
.conteiner-img-succes img {
    height: 80px;
}
.inf-last-update-data-time {
    display: flex;
    gap: 10px;
    margin: 10px 0px 0px 20px;
}
.inf-last-update-data-time span {
    text-align: center;
    color: gray;
}
@media screen and (min-width: 850px) {
    .conteiner-complete-moderation-updateData {
        position: relative;
        top: 120px;
        left: calc(50% - 240px);
        display: flex;
        flex-direction: column;
        height: 300px;
        width: 480px;
        background-color: white;
        border-radius: 10px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        box-shadow: 0px 0px 10px gray;
    }
    .text-status {
        position: relative;
        top: 80px;
        display: block;
        text-align: center;
    }
    .btn-close-compl-updated-okay {
        display: block;
        height: 20px;
        width: 90px;
        text-align: center;
        position: absolute;
        left: calc(50% - 45px);
        bottom: 10px;
        padding: 5px;
        border: solid 1px gray;
        border-radius: 5px;
        cursor: pointer;
    }
}
@media screen and (max-width: 850px) {
    .conteiner-complete-moderation-updateData {
        position: relative;
        top: 120px;
        left: calc(50% - 190px);
        display: flex;
        flex-direction: column;
        height: 250px;
        width: 380px;
        background-color: white;
        border-radius: 10px;
        box-shadow: 0px 0px 10px gray;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .text-status {
        position: relative;
        top: 50px;
        display: block;
        text-align: center;
    }
    .btn-close-compl-updated-okay {
        display: block;
        height: 20px;
        width: 90px;
        text-align: center;
        position: absolute;
        left: calc(50% - 45px);
        bottom: 10px;
        padding: 5px;
        border: solid 1px gray;
        border-radius: 5px;
        cursor: pointer;
    }
}
@media screen and (min-width: 1100px) {
    .inf-update-data {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 12px;
        position: relative;
        top: 35px;
        left: 20px;
    }
    .popUp-messege {
        position: fixed;
        top: 20px;
        right: 20px;
        background: #ffcccc;
        padding: 15px 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.2);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        z-index: 9999;
    }
}
@media screen and (max-width: 1100px) {
    .inf-update-data {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 12px;
        text-align: center;
    }
    .popUp-messege {
        display: block;
        width: 300px;
        position: fixed;
        top: 20px;
        right: calc(50% - 170px);
        background: #ffcccc;
        padding: 15px 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.2);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 15px;
        z-index: 9999;
    }
}

@media screen and (min-width: 1100px) {
    .conteiner-helppage {
        display: block;
        height: 100%;
        width: 85%;
        position: relative;
        top: 100px;
        left: 12%;
    }
    .conteiner-answer-hp {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        display: block;
        height: 100%;
        padding: 30px;
        background-color: white;
        box-shadow: 0px 0px 10px gray;
        border-radius: 10px;
    }
    .instr-li {
        margin: 10px;
    }
}
@media screen and (max-width: 1100px) {
    .conteiner-helppage {
        display: block;
        height: 100%;
        width: 98%;
        position: relative;
        top: 100px;
        left: 1%;
    }
    .conteiner-answer-hp {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        display: block;
        height: 100%;
        padding: 15px;
        background-color: white;
        box-shadow: 0px 0px 10px gray;
        border-radius: 10px;
    }
    .instr-li {
        margin-top: 10px;
    }
}
.conteiner-inf-us-r {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: white;
    background-color: #007bff;
}
.main-content-inf-us-r {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.inf-date-inf-us-r {
    font-size: 14px;
    padding-bottom: 40px;
}
@media screen and (min-width: 1100px) {
    .conteiner-inf-us-r {
        height: 250px;
    }
    .main-content-inf-us-r {
        padding: 0px 40px 100px 40px;
        position: relative;
        top: 250px;
    }
    .main-content-inf-us-r cite {
        display: block;
        width: 600px;
    }
}
@media screen and (max-width: 1100px) {
    .conteiner-inf-us-r {
        height: 200px;
    }
    .main-content-inf-us-r {
        padding: 0px 5px 100px 5px;
        position: relative;
        top: 200px;
    }
    .inf-date-inf-us-r {
        text-align: center;
    }
    .main-content-inf-us-r cite {
        display: block;
        width: 100%;
    }
}
.conteiner-inf-us-r h3{
    position: relative;
    top: 20px;
    font-size: 25px;
}
.conteiner-inf-us-r p {
    position: relative;
    top: 20px;
    font-size: 20px;
}
.btns-language {
    display: flex;
    gap: 10px;
    position: absolute;
    top: 10px;
    left: 10px;
}
.btns-language div {
    cursor: pointer;
}
.add-photo-btn {
  width: 100px;         
  height: 100px;         
  border: 2px dashed #bbb; 
  border-radius: 10px;   
  display: block;         
  text-align: center;
  align-content: center;
  color: #666;            
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;  
  margin: 8px;
  background-color: #fafafa;
  transition: background-color 0.3s ease;
}
.preview {
    display: flex;
    gap: 10px;
}
.preview img {
    height: 100px;
    width: 100px;
    margin: 5px;
    border-radius: 6px;
    object-fit: cover;
}
.length-notReadMsg {
    position: absolute;
    top: 5px;
    left: 20px;
    display: block;
    height: 17px;
    width: 17px;
    border-radius: 50%;
    text-align: center;
    justify-content: center;
    line-height: 17px;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
}
@media screen and (max-width: 1100px) {
    .messegeBtn-m {
        position: relative;
        left: 0px;
    }
}
@media screen and (min-width: 1100px) {
    .messegeBtn-m {
        position: relative;
        left: -45px;
    }
}
.task-invite {
    display: flex;
    gap: 10px;
}
.task-invite div {
    position: relative;
    top: 4px;
}
.mark-invite-task {
    display: block;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: solid 1px gray;
}
.mark-invite-task.complete {
    background-color: green;
}
.line-task-invite {
    margin: 10px;
    display: block;
    height: 15px;
    width: 1px;
    background-color: gray;
    position: relative;
    top: 2px;
}
.mark-invite-task img {
    position: relative;
    left: 1px;
    height: 18px;
}
.btn-check-complete-task-invite {
    position: relative;
    top: 10px;
    display: block;
    height: 20px;
    width: calc(80% - 40px);
    background-color: #348337;
    text-align: center;
    padding: 5px 20px 5px 20px;
    border-radius: 10px;
    color: white;
    cursor: pointer;
}
#invite-msg {
    transition: 2s;
}
#invite-msg.fadeout {
    opacity: 0;
    transition: 2s;
}
.beta-text {
    font-size: 12px;
    position: relative;
    top: -15px;
}

/*---- ref program page -- --*/

@media screen and (min-width: 1100px) {
    .conteiner-ref-program {
        display: block;
        height: 450px;
        width: calc(100% - 170px);
        position: relative;
        top: 115px;
        left: 130px;
        padding: 0px 10px 0px 10px;
        background-color: white;
        border-radius: 20px;
        box-shadow: 0px 0px 10px gray;
    }
    .link-ref-conteiner {
        display: block;
        height: 125px;
        width: 380px;
        padding: 10px;
        position: relative;
        left: 2%;
        top: 20px;
        border: solid 1px black;
        border-radius: 10px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .content-ref {
        display: flex;
        gap: 65px;
    }
    .ref-list-conteiner {
        position: relative;
        display: block;
        height: 360px;
        width: calc(100% - 520px);
        background-color: #007bff;
        border-radius: 10px;
        padding: 10px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .table-labels {
        justify-content: center;
        position: relative;
        top: 25px;
        display: flex;
        gap: 20%;
        color: white;
    }
    .ref-invited-inf {
        justify-content: center;
        display: flex;
        gap: 20%;
        background-color: #0056b3;
        padding: 5px;
    }
}
@media screen and (max-width: 1100px) {
    .conteiner-ref-program {
        display: block;
        height: 620px;
        width: calc(95% - 20px);
        position: relative;
        top: 125px;
        left: 2.5%;
        padding: 0px 10px 0px 10px;
        background-color: white;
        border-radius: 20px;
        box-shadow: 0px 0px 10px gray;
    }
    .link-ref-conteiner {
        display: block;
        height: 125px;
        width: calc(96% - 22px);
        padding: 10px;
        position: relative;
        left: 2%;
        top: 20px;
        border: solid 1px black;
        border-radius: 10px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .content-ref {
        display: flex;
        gap: 35px;
        flex-direction: column;
    }
    .ref-list-conteiner {
        position: relative;
        left: 2.5%;
        display: block;
        height: 330px;
        width: calc(95% - 20px);
        background-color: #007bff;
        border-radius: 10px;
        padding: 10px;
        padding-bottom: 18px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .table-labels {
        justify-content: center;
        position: relative;
        top: 25px;
        display: flex;
        gap: 15%;
        color: white;
    }
    .ref-invited-inf {
        justify-content: center;
        display: flex;
        gap: 15%;
        background-color: #0056b3;
        padding: 5px;
        font-size: 14px;
    }
}
.text-ref-prog {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20px;
    position: relative;
    top: 15px;
    left: 10px;
}
.link-menu {
    display: flex;
    gap: 5px;
    justify-content: center;
    position: relative;
    top: 15px;
}
#btn-share-ref-link {
    position: relative;
    top: 40px;
    display: block;
    height: 20px;
    padding: 7px;
    background-color: #007bff;
    color: white;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
}
#ref-addchannel-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    height: calc(100% - 80px);
    position: relative;
    top: 35px;
    color: whitesmoke;
    overflow-y: scroll;
}
.text-invited {
    position: relative;
    top: 10px;
    color: white;
    text-align: center;
}
.ref-invited-inf div {
    display: block;
    width: 100px;
    text-align: center;
}
.table-labels div {
    display: block;
    width: 100px;
    text-align: center;
}
.sum-ref {
    color: limegreen;
}
#text-succ-coped {
    display: none;
    position: absolute;
    margin-top: 12px;
    width: 100%;
    text-align: center;
    color: gray;
}