@font-face {
  font-family: "ProductSansRegular"; 
  src: url("../fonts/ProductSansRegular.ttf") format("truetype"); 
  font-style: normal; 
  font-weight: normal; 
} 

@font-face {
  font-family: "ProductSansBold"; 
  src: url("../fonts/ProductSansBold.ttf") format("truetype"); 
  font-style: normal; 
  font-weight: normal; 
}

:root{
    --main-bg: #1a2026;
    --h-color: #ffffff;
    --regular-color-font: #8794a1;
    --acent-color: #4db2ff;
    --bg-content: rgb(33, 42, 51);
    --bg-content-hover: #293440;
    --bg-canvas: #faf9f9;
    --image-url-search: url('data:image/svg+xml,%3Csvg%20height%3D%2220%22%20viewBox%3D%220%200%2016%2020%22%20width%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%238494a3%22%20stroke-width%3D%221.41%22%3E%3Cellipse%20cx%3D%228.82%22%20cy%3D%228.35%22%20rx%3D%224.48%22%20ry%3D%224.64%22%2F%3E%3Cpath%20d%3D%22m2%2016%203.77-3.89%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    --image-url-row-arrow: url('data:image/svg+xml,%3Csvg%20height%3D%2217%22%20viewBox%3D%220%200%2011%2017%22%20width%3D%2211%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m3%2014%205.15-5.11c.19-.2.19-.52%200-.71l-5.15-5.18%22%20fill%3D%22none%22%20stroke%3D%22%235b6975%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E');
    --image-url-add-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%234db2ff' d='M12 3a9 9 0 1 0 0 18a9 9 0 0 0 0-18M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12m12-5.5V11h4.5v2H13v4.5h-2V13H6.5v-2H11V6.5z'/%3E%3C/svg%3E");
    --image-url-copy-text-icon: url('data:image/svg+xml,%3Csvg%20height%3D%2218%22%20viewBox%3D%220%200%2013%2018%22%20width%3D%2213%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%234db2ff%22%20stroke-width%3D%221.4%22%3E%3Crect%20height%3D%2211.5%22%20rx%3D%221.5%22%20width%3D%228.48%22%20x%3D%223.52%22%20y%3D%224.5%22%2F%3E%3Cpath%20d%3D%22m1%2012.25v-7.5c0-1.52%201.23-2.75%202.75-2.75h4.35%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}

*{
    box-sizing: border-box;
}

h1{
    font-family: 'ProductSansBold';
    font-size: 15px;
    color: var(--h-color);
    margin: 0px;
    padding: 0px;
}

h2{
    font-family: 'ProductSansBold';
    color: var(--h-color);
    font-size: 19px;
    padding-left: 10px;
}

h3{
    font-family: 'ProductSansBold';
    color: var(--h-color);
    font-size: 24px;
    margin-bottom: 10px;
    margin-top: 10px;
}

p{
    font-family: 'ProductSansRegular';
    font-size: 14px;
    color: var(--regular-color-font);
    padding-inline: 10px;
}

span{
    font-family: 'ProductSansRegular';
    font-size: 14px;
    color: var(--regular-color-font);
}

b{
    font-family: 'ProductSansBold';
}

a{
    font-family: 'ProductSansRegular';
    font-size: 14px;
    color: var(--acent-color);
    cursor: pointer;
    text-decoration: none;
}

a:hover{
    text-decoration: underline;
}

.add-accent{
    color: var(--acent-color);
}

body{
    width: 100%;
    height: 100%;
    min-height: 100vh;
    margin: 0px;
    padding: 0px;
    background: var(--main-bg);
    padding: 15px;
}

.text-align-center{
    text-align: center;
}

.content-bot{
    width: 100%;
    max-width: 512px;
    height: 100%;
}

.start-page{
    width: 100%;
    height: 100%;
}

.head-start{
    width: 100%;
    height: 100%;
    margin-bottom: 50px;
    margin-top: 25px;
}

.logo-bot{
    background-image: url(../img/ww.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 65px;
    height: 65px;
}

.search-start{
    margin-bottom: 30px;
}

.search-wall{
    width: 100%;
    background: var(--bg-content);
    border-radius: 8px;
    width: 100%;
    height: 42px;
    display: flex;
    align-items: center;
}

.search-icon{
    background-image: var(--image-url-search);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 22px;
    height: 22px;
}

.connect-icon{
    background-image: var(--image-url-row-arrow);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 14px;
    height: 22px;
}

.coppy-icon{
    background-image: var(--image-url-copy-text-icon);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 18px;
    height: 22px;
}

.add-icon{
    color: var(--acent-color-decod);
    background-image: var(--image-url-add-icon);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 22px;
    height: 22px;
}

.search-input{
    width: 100%;
    padding: 10px;
    padding-left: 0px;
    padding-right: 0px;
}

.search-input input{
    width: 100%;
    height: 22px;
    background: none;
    border: none;
    outline: none;
    color: var(--regular-color-font);
    font-family: 'ProductSansRegular';
    font-size: 14px;
    padding: 0px;
}

.btn-connect-wall{
    padding: 10px;
    cursor: pointer;
}

.footer-page{
    width: 100%;
    margin-top: auto;
}

.main-start{
    width: 100%;
    height: 100%;
}

.all-walls{
    width: 100%;
    height: 100%;
}

.all-walls .create-wall{
    border-radius: 8px;
    background: var(--bg-content);
    width: 100%;
    height: 42px;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 1px;
}

.all-walls .create-wall:hover{
    background: var(--bg-content-hover);
}

.all-walls .my-wall:hover{
    background: var(--bg-content-hover);
}

.all-walls .my-wall{
    border-radius: 8px;
    background: var(--bg-content);
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 1px;
}

.all-walls > .create-wall:only-child {
  border-radius: 8px;
}

.all-walls > .create-wall:first-child:not(:last-child) {
  border-radius: 8px 8px 0 0;
}

.all-walls > .my-wall:last-child {
  border-radius: 0 0 8px 8px;
}

.all-walls > .my-wall:not(:last-child) {
  border-radius: 0;
}

.wall-icon-avatar{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 22px;
    height: 22px;
    background: #4db2ff;
    color: white;
    border-radius: 100%;
}

.wall-icon-avatar b{
    font-size: 11px;
}

.wall-details{
    padding: 10px;
    padding-left: 0px;
    display: flex;
    flex-direction: column;
}

.wall-url span{
    font-size: 13px;
}

.wall-page{
    width: 100%;
    height: 100%;
}

.head-wall{
    width: 100%;
    background: var(--bg-content);
    border-radius: 8px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    padding: 10px;
}

.main-wall{
    background: var(--bg-canvas);
    width: 100%;
    height: calc(100vh - 168px);
}

.footer-wall{
    width: 100%;
    background: var(--bg-content);
    border-radius: 8px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    padding: 20px;
}

.palit-option{
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.palit-color{
    width: 32px;
    height: 32px;
    border-radius: 100%;
    cursor: pointer;
}

.palit-color.active{
    border: 1px solid #ffff;
    cursor: default;
}

.blue-palit{
    background: #4db2ff;
}

.red-palit{
    background: #c72929;
}

.green-palit{
    background: #29c766;
}

.black-palit{
    background: #020202;
}

.white-palit{
    background: #faf9f9;
}

.purple-palit{
    background: #af1c97;
}