html{
    background-color: #f7f9ff !important;
}


*{
    flex-wrap: wrap;
    font-family: var(--fontname);
    color: var(--theme_night);
}

*::placeholder{
    
}

/*حذف آبی شدن المنت هنگام کلیک روی آن در گوشی*/
* {
    -webkit-tap-highlight-color: transparent;
}

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}
/* GENERAL CLASS 123 */

.profile_none{
    background: url('../images/profile.png') center no-repeat;
    background-size: 100px;
    border: 1px solid white;
}

img{
    display: none;
}

/* slider */
.slider{
    border: 1px solid var(--gray);
    border-radius: 10px;
    margin: 5px;
    overflow: hidden;
    
}
.slider > div{
    position: relative;
    width: 100%;
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 0 1em;

}
.slider > div > i{
    position: absolute;
    height: 95%;
    width: 40px;
    top: 0;
    display: flex;

}
.slider > div i:first-child{
    left: 0;
}
.slider > div i:last-child{
    right: 0;
}
.slider > div > i svg{
    width: 100%;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.245);
    border-radius: 100%;
    cursor: pointer;
    margin: auto;
}
.slider > div > div{
    position: relative;
    min-width: 200px;
    max-width: 300px;
    margin: 5px;
    cursor: pointer;
}
.slider > div > div  > p{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.282);
}

.slider > div > div > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

 /* window */
 .window{
    display: flex;
    justify-content: center;
    margin: 0 auto;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--gr_w);
    overflow-x:unset;
    overflow-y: auto;
    padding-top: 50px;
 }
 .dark .window{
    background: var(--gr_n);
 }
 .window > section{
    max-width: var(--max_width);
    width: 100%;
    height: 100%;
    margin: auto;
    position: fixed;
    overflow: auto;
    left: 0;
    right: 0;
    padding-bottom: 6em;
    
 }
 .dark .window > section{
    background-color: var(--theme_night);
 }
 /* leafhead */
.leafhead{
    max-width: var(--max_width);
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
    z-index: 50;
    background-color: var(--white);
    display: grid;
    grid-template-columns: 40px 100fr;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid var(--gray);
}
.dark .leafhead{
    border-bottom: 1px solid var(--general);
    background-color: var(--theme_night);
}
.leafhead i{
    display: grid;
    justify-self: center;
    justify-items: center;
    align-items:center;
    border: none !important;
}
.leafhead p{
    height: 100%;
    line-height: 50px !important;
}
/* chat_head */
.chat_head{
    position: relative;
    display: grid;
    grid-template-columns:  50px 100fr;
    grid-template-rows: 100%;
    width: 100%;
    height: 100%;
    direction: rtl;
}
.chat_head > span{
    width:  40px;
    height: 40px;
    display: flex;
    border-radius: 100%;
    border: 1px solid white;
    margin: 5px;
    
}
.chat_head > span > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.chat_head  > p{
    text-align: right;
}


#chat_parent{
    display: grid;
    grid-template-columns: 100%;
    width: 100%;
    height: 100%;
    direction: rtl;
    position: relative;
}
/* show */
#chat_parent .show{
    position: relative;
    padding-bottom: 10em;
}

#chat_parent .show > .send.active,
#chat_parent .show > .get.active
{
    background-color: #71717118;
}

#chat_parent .show > .send > .text 
,#chat_parent .show > .get > .text
{
    max-width: 85%;
    border-radius: 5px;
    padding: 3px 3px 15px 3px;
    margin:5px 10px;
    text-align: right;
    background-attachment:fixed ;
    background-size: 1000px;
    position: relative;
    box-shadow: 1px 1px 12px -3px #a1a1a1;
    min-width: 100px;
    overflow: hidden;
    
}
#chat_parent .show  *{
    cursor: pointer;
    text-align: right;
}
#chat_parent .show > .send > .text pre{
    direction: rtl;
    text-align: right;
}

 .text.reply_icon{
    position: relative;
}
 .text.reply_icon::after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url(../../assets/images/replly.png) rgb(41 41 41 / 68%) center no-repeat;
    background-size: 30px;
    background-position: 5px center ;
}

#chat_parent .show > .send > .text > b,
#chat_parent .show > .get > .text > b
{
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 12px;
    margin: 0px 5px -3px 0px ;
    color:#ffffffad;
    direction: ltr;


}
#chat_parent .show > .send > .text > .ticked,
#chat_parent .show > .get > .text >  .ticked
{
    width: 20px;
    height: 20px;
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    font-size: 12px;
    margin: 0px 5px 0 0px ;
    color:white;
    padding: 0 5px;
    background-size: 15px;

}

.text .ticked.dispatch {
    background: url('../../assets/images/dispatch.png') center no-repeat;
    opacity: .6;
}
.text .ticked.send {
    background: url('../../assets/images/send.png') center no-repeat;
}
.text .ticked.read {
    background: url('../../assets/images/read.png') center no-repeat;
}


#chat_parent .show > .send{
    width: 100%;
    display: flex;
    justify-content: start;
    
}
#chat_parent .show > .send > .text{
    background: #38c4d6;
    background:linear-gradient(-205deg,rgb(56 214 95) -51%, rgb(47 184 145) 48%, rgba(90, 148, 219, 1) 100%);
}

#chat_parent .show > .get{
    width: 100%;
    display: flex;
    justify-content: end;
}

#chat_parent .show > .get > .text{
    background: #4393d9;
    background: linear-gradient(90deg,rgba(67, 147, 217, 1) 0%, rgba(101, 112, 194, 1) 47%, rgba(167, 90, 219, 1) 100%);
}

.text .reply_chat{
    max-width: 350px;
    background-color: #37373780;
    padding: 2px 10px;
    border-radius: 5px;
    order: 1;
}
.text .file_send{
    position: relative;
    border-radius: 3px;
    min-width: 125px;
    height: 160px;
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 5px;
    cursor: default !important;
}

.text .download{
    position: absolute;
    right: 5px;
    margin: 5px ;
    width: 25px;
    height: 25px;
    background: url('../../assets/images/download.png') center no-repeat var(--theme_night);
    background-size: 20px;
    border-radius: 100%;
    cursor: pointer;
    display: none;
}
.text .show_img{
    display: none;
    position: absolute;
    left: 5px;
    margin: 5px ;
    width: 25px;
    height: 25px;
    background: url('../../assets/images/large_win.png') center no-repeat var(--theme_night);
    background-size: 20px;
    border-radius: 100%;
    cursor: pointer;

}
.text .file_send.send_ajax::after{
    content: '';
    position: absolute;
    width:  50px;
    height: 50px;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 100%;
    background: url('../../assets/images/file_ajax.gif') center no-repeat;
    background-size: 50px;

}
.text .file_send > p{
    max-height: 95%;
    direction: ltr;
    position: absolute;
    bottom: 4px;
    background: #6495ed63;
    border: 1px solid #6495ed3d;
    width: 95%;
    left: 0;
    right: 0;
    margin: auto;
    padding: 2px;
    border-radius: 5px;
    text-align: center !important;
}
.text .file_send > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid #ffffff4a;

}


.text  .file_send.pdf{
    background: url('../images/pdf.logo.png') white center no-repeat !important;
    background-size: 125px !important;
}

.text  .file_send.pdf{
    background: url('../images/pdf.logo.png') white center no-repeat !important;
    background-size: 125px !important;
}

.text  .file_send.img{
    width: 100%;
    background: url('../images/img_logo.png') #deffef center no-repeat !important;
    background-size: 125px !important;
}

.text  .file_send.dwg{
    width: 100%;
    background: url('../images/dwg_icon.png') white center no-repeat !important;
    background-size: 125px !important;
}

#show_chat_img{
    position: fixed;
    width: 100%;
    max-width: var(--max_width);
    height: 100%;
    background: rgba(39, 39, 39, 0.527);
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    z-index: 75;
    backdrop-filter: blur(3px);
    padding-top: 50px;
    display: none;
    opacity: 0;
}

#show_chat_img .close{
    width:   35px;
    height:  35px;
    position: absolute;
    right: 0;
    left: 0;
    border-radius: 100%;
    margin: 5px auto;
    background-color: white;
    cursor: pointer;
}
#show_chat_img .content{
    display: flex;
    justify-content: center;
}
#show_chat_img .content img{
    max-height: 100vh;
    max-width: 100%;
    display: block;
}

/* chat input */

#chat_parent .chat{
    width: 100%;
    max-width: var(--max_width);
    height: 50px;
    position: fixed;
    display: grid;
    grid-template-columns:40px 40px 100fr;
    direction: rtl;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 5px;
    margin: auto;
    
}

#chat_parent .chat > .icon{
    background-color: var(--dark);
    display: block;
    width:  30px;
    height: 30px;
    border-radius: 100%;
    align-self: center;
    position: relative;
}

#chat_parent .chat .chat_file{
    position: absolute;
    z-index: 2;
    top: 0;
    cursor: pointer;
    opacity: 0;
    width: 100%;
    height: 100%;
}
.chat_file::after{
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    position: absolute;
    cursor: pointer;
}
#chat_parent .chat > .icon > svg{
    width:  100%;
    height: 100%;
    stroke: white;
}
#chat_parent .chat textarea{
    border: none;
    outline: 0;
    direction: rtl;
    text-align: right;
    padding: 5px;
    resize: none;
    background: none;
    border: 1px solid white;
    border-radius: 5px;
    background-color: white;
}

#chat_parent #go_bottom_chat{
    width: 100%;
    height: 60px;
    position: fixed;
    bottom: 60px;
    right: 0;
    z-index: 50;
    display: none;
}
#chat_parent #go_bottom_chat div{
    width: var(--max_width);
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: start;
}
#chat_parent #go_bottom_chat div svg.go_bottom{
    width:  45px;
    height: 45px;
    margin: 1em 2em;
    background-color: var(--theme_night);
    border-radius: 100%;
    border: 1px solid white;
    cursor: pointer;
}
.reply{
    display: none;
    width: 100%;
    position: fixed;
    bottom: 50px;
    background-color: #1212126b;
    max-width: var(--max_width);
}
.reply p{
    text-align: right;
    padding: 10px;
    border: 1px solid #ffffff45;
    margin: 5px;
    border-radius: 13px;
}
.reply i{
    width: 100%;
    height: 25px;
    display: flex;
    justify-content: start;
    margin-top: 5px;

}
.reply i svg{
    width: auto;
    height: 100%;
    margin-right: 5px;
    cursor: pointer;
}
/* ... */
.btn{
    background-color: var(--dark);
    border-radius: 5px;
    color:var(--white);
    cursor: pointer;
}

.b_gray{
    background-color: rgb(240, 240, 240);
}
div
.ic{
    width: 35px;
    height: 35px;
    border: 1px solid var(--gray);
    border-radius: 10px;
    background-size: 70% !important;
    cursor: pointer;
    padding: 5px;
}
.ic:hover *{
    fill: var(--dark)  !important;
    stroke: var(--dark)!important;
    border: 2px solid var(--dark) !important;
}
.ic *{
    fill: var(--general);
    stroke: var(--general);
}
.dark .ic *{
    fill: var(--white);
    stroke: var(--white);
}

.ic2{
    width: 35px;
    height: 35px;
    fill: rgb(226 226 226);
    stroke: var(--general);
    cursor: pointer;
}
.ic2:hover{
    fill: var(--dark);
    stroke: var(--dark);
}
.them{
    border: 4px solid white;
    box-shadow: 2px 0px 7px 0px rgb(126 126 126 / 40%) inset;
    cursor: pointer;
    border-radius: 5px;
}
.them:hover{
    background-color: var(--dark);
}

/* Dark theme */
.b{
    background-color: var(--white);
  }
  .dark{
    background: var(--gr_n);
  }
  .dark .b{
    background-color: rgba(0, 0, 0, 0);
  }
  .c{
    color: var(--general);
  }
  .dark .c{
    color: var(--white);
  }

  .dark *:not(.cx){
    color: var(--white);
  }


/* .............................................................................
.............................................................................
.............................. HOME .....................................
.............................................................................
............................................................................. */
#page_parent{
    direction: ltr;
}
#page_parent > div{
    width: 100%;
    height: 100%;
}

#home{

}

.my_project_home{
    width: 300px;
    border-radius: 10px;
    border: 1px dashed var(--dark);
    padding: 5px;
    margin-top: 5em;
}

.my_project_home .show_detail{
    border-radius: 10px;
    cursor: pointer;
    background-color: var(--gold);
}
.my_project_home .payment {
    border-radius: 10px;
    cursor: pointer;
    background-color: var(--green);
    border: navajowhite;
    padding: 0 10px;
}

.my_project_home > div{
    display: grid;
    grid-template-columns: 50% 50%;
    direction: rtl;
    margin: 5px;
    background-color: rgb(231 231 231);
    border-radius: 5px;
    
}
.dark .my_project_home > div{
    background-color: var(--general);
}

.my_project_home > div p:nth-child(odd){
    text-align: right;
    margin: 2px 5px 2px 0px;
}
.my_project_home > div p:nth-child(even){
    text-align: left;
    margin: 2px 0px 2px 5px;
}
.my_project_home > .pay  {
    grid-template-columns: 70% 30%;
    padding: 5px;
    border: 1px solid white;
}
.my_project_home > .pay > .checkbox{
    align-self: center;
    justify-self: end;
}
.my_project_home .go_chat{
    display: grid;
    grid-template-columns: 80% 20%;
    height: 30px;
    padding: 5px;
    align-items: center;
    background-color: var(--green) !important;
    cursor: pointer;
}
.my_project_home .go_chat *{
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-align: center !important;
}
.go_det_and_accept > p{
    padding: 5px;
    text-align: center !important;
    border: 1px solid var(--dark);
    margin: 5px !important;
    border-radius: 5px !important;
    background: var(--gr_d);
    cursor: pointer;

}
#parent_my_project > div{
    display: flex;
    justify-content: space-around;
    width: 100%;

}

/* show_accept */

#show_accept_parent{
    display: flex;
    justify-content: space-around;
}

.show_accept{
    display: grid;
    grid-template-columns: 25% 25% 50%;
    grid-template-rows: 100%;
    direction: rtl;
    background:var(--gr_w);
    width: 300px;
    height: 50px;
    margin: 10px;
    border-radius: 5px;
    border: 1px dashed white;
    justify-content: center;
    padding: 5px ;
    position: relative;
}
.show_accept.act::after{
    content: 'اکنون مشاهده شد';
    position: absolute;
    left: 0;
    bottom: 0px;
    height: 20px;
    z-index: 2;
    color: var(--green);
    background-color: white;
    width: auto;
    border-radius: 5px;
    padding: 0 2px;
    right: 0;
    bottom: -12px;
    max-width: 100px;
    margin: 0 auto;

}
.show_accept.designer{
    border: 2px solid var(--green);
}
.show_accept.designer::after{
    content: 'طراح منتخب';
    position: absolute;
    left: 0;
    bottom: 0px;
    height: 20px;
    z-index: 2;
    color: white;
    background-color: var(--green);
    width: auto;
    border-radius: 5px;
    padding: 0 2px;
    right: 0;
    bottom: -12px;
    max-width: 100px;
    margin: 0 auto;

}
.show_accept:hover{
    border: 1px solid white;
}

.show_accept > img{
    height: 40px;
    width: 40px;
    background-color: var(--general);
    border-radius: 100%;
    object-fit: cover;
    position: relative;
}
.show_accept > img.noload::after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background: url('../images/profile.png') center no-repeat var(--dark);
    background-size: 35px;
}
.show_accept p{
    font-weight: bold;
    margin: auto;
    color: var(--dark);
}
.show_accept .username{
    color: rgb(120 120 120) !important;
}

.show_accept .show_resume{
    background-color: var(--dark);
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
    color: white;
}

/* resume */

#show_resume{
    max-width: 768px;
    height: 100%;
    background: var(--gr_w);
    position: fixed;
    right: 0;
    top: 0;
    left: 0;
    margin: 0 auto;
    padding: 5px;
}
#show_resume .close{
    display: flex;
    justify-content: start;
    width: 100%;
    height: 50px;
    padding: 5px;
    position: absolute;
    top: 0;
    z-index: 1;
}
#show_resume .close svg{
    width: 45px;
    height: 45px;
    cursor: pointer;
    background-color: rgba(84, 84, 84, 0.629);
    border-radius: 100%;
}

#frame_resume {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100;
    display: grid;
    grid-template-rows: 50px 100%;
    grid-template-columns: 100%;
    background-color: #00000045;
    backdrop-filter: blur(20px);
}
#frame_resume > div{
    display: grid;
    grid-template-columns: 50% 50%;
    justify-items: center;
    background-color: #00000014;
}
#frame_resume > div > p{
    width: 100px;
    align-self: center;
    border: 1px solid white;
    padding: 5px 5px 5px 20px;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
}
#frame_resume > div > p svg{
    width: 20px;
    height: 20px;
    position: absolute;
    left: 7px;
    top: 0;
    bottom: 0;
    margin: auto 0;
}
#frame_resume > iframe{
    width: 100%;
    height: 100%;
    max-width: 768px;
    margin: 0 auto;
    border: 5px solid var(--theme_night);
    border-radius: 10px ;
    background-color:white;
    padding-bottom: 3em;
}
#frame_resume .show_post{
    width: 100%;
    height: 100%;
    background: var(--gr_n);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    overflow: scroll;
    padding-bottom: 6em;
    max-width: var(--max_width);
    margin: auto;
}
.my_accept_parent{
    display: flex;
    justify-content: space-around;
}

.my_accept_parent > .my_accept{
    width: 300px;
    margin: 5px;
    border: 1px solid var(--dark);
    padding: 5px;
    border-radius: 10px;
}

.my_accept_parent > .my_accept.me_accept{
    background: var(--gr_d);
}

.my_accept_parent > .my_accept > p{
    border-radius: 5px;
    cursor: pointer;
    color: white;
    background: var(--gr_d);
}

.my_accept_parent > .my_accept > div{
    display: grid;
    grid-template-columns: 40% 60%;
    background: var(--dark);
    border: 1px solid var(--white);
    margin: 5px 0;
    border-radius: 5px;
    direction: rtl;
    padding: 3px;
    
}
.my_accept_parent > .my_accept > div *{
    color: white !important;
}

.my_accept_parent > .my_accept > div > p:nth-child(1){
    text-align: right;
    margin-right: 5px;
}
.my_accept_parent > .my_accept > div > p:nth-child(2){
    text-align: left;
    margin-left: 5px;
}

.my_accept_parent .my_accept .chat_employer{
    height: 30px;
    padding: 5px;
    background: var(--green) !important;
    display: grid;
    grid-template-columns: 80% 20%;
    cursor: pointer;
    border: 1px solid var(--white);
}
.my_accept_parent .my_accept .show_det{
    border: 1px solid var(--white);
}
.my_accept_parent .my_accept .chat_employer > *{
    width: 100%;
    height: 100%;
    text-align: center !important;
    cursor: pointer;
}

/* home_box */

.home_box{
    width: 90%;
    padding: 2px;
    border: 1px solid var(--white);
    display: grid;
    grid-template-columns: 50px 100fr 50px;
    justify-items: center;
    margin: 5px auto;
    cursor: pointer;
    border-radius: 5px;
}
.home_box:hover{
    background-color: #1c1f2b !important;
}
.home_box *{
    cursor: pointer;
    margin: auto;
}
.home_box p{
    width: 100%;
    text-align: right;
}
.home_box svg{
    width:  80%;
    height: 80%;
}
.home_box svg.Next_icon{
    width:  70%;
    height: 70%;
}

/* show_my_post */
.show_my_post{
}

.show_my_post > section{
}

.show_my_post > section .all_post{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

}

 .post{
    width: 250px;
    height: 400px;
    margin: 5px;
    border-radius: 10px;
    border: 1px solid var(--white);
    padding: 10px;
    overflow: hidden;
}

.post .show_img{
    height: 220px;
    border: 1px solid var(--white) ;
    border-radius: 5px;
    margin-bottom: 5px;
    position: relative;

}
.slider_img{
    width: auto;
    height: 100%;
    max-height: 100%;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    position: relative;
}

.slider_img::-webkit-scrollbar {
    height: 3px;
    padding: 0;
    margin: 0;

}

.slider_img::-webkit-scrollbar-thumb{ 
    background: var(--gr_d);
    height: 100%;
    border-radius: 2px;
}

.post .show_img .change{
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-areas: 'a a' 'b c';
    grid-template-columns: repeat(2,50%);
    grid-template-rows: 25fr 75fr;
    justify-items: center;
    direction: rtl;
    z-index: 10;
}
.post .show_img  .change i{
    width: 100%;
    height: 95%;
    border-radius: 0;
    align-self: center;
    opacity: .4;
    background-color: #1c1f2b00;
    cursor: pointer;
    border: none;
    position: relative;
}
.post .show_img  .change i:nth-child(1){
    grid-area: a;
    display: flex;
    justify-content: center;
}
.post .show_img  .change i:nth-child(2){
    grid-area: b;
}
.post .show_img  .change i:nth-child(3){
    grid-area: c;
}
.post .show_img  .change i:hover{
    opacity: 1;
}
.post .show_img  .change i svg{
    width: 25px;
    height: 25px;
    border-radius: 100%;
    background: var(--gr_n);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
.post .show_img  .change i.next svg{
    right: 5px;
}
.post .show_img  .change i.before svg{
    left: 5px;
}

.post .show_img .slider_img img{
    width: 100%;
    height: 100%;
    display: inline;
    object-fit: contain;
}
.post .show_img .slider_img svg{
    width: 100%;
}
.post .information{
    display: grid;
    grid-template-areas: 'a b ' 'c c';
    grid-template-columns: 40fr 60fr;
    direction: ltr;

}

.post .information .meter{
    grid-area: a;
    border: 1px solid var(--white);
    padding: 5px;
    border-radius: 5px;
    margin: 0 2px;
    direction: rtl;
}

.post .information .location{
    grid-row: b;
    border: 1px solid var(--white);
    padding: 5px;
    border-radius: 5px;
    margin: 0 2px;
    position: relative;
}

.post .information .location svg{
    position: absolute;
    right: 1px;
    top: -16px;
    width: 20px;
}
.post .information .location p{
    padding-right: 5px;
}

.post .information .description{
    grid-area: c;
    position: relative;

}
.post .information .description::after{
    content: '';
    width: 100%;
    height: 50px;
    right: 0;
    bottom: 0;
    background: linear-gradient(0deg,rgb(40 40 60) 0%, rgba(253, 187, 45, 0) 100%);
    position: absolute;
}
.post .information .description p{
    max-height: 130px;
    overflow-y: scroll;
    padding-bottom: 40px;
    padding-top: 5px;
}

  .post .information .description p::-webkit-scrollbar {
    display: none;
  }
   .post .information .description p {
    -ms-overflow-style: none; 
    scrollbar-width: none;
  }

  #zoom_img{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 100;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    border: none !important;
    margin:   auto !important;
    padding: 0 !important;
    max-width: var(--max_width);
    overflow: hidden;
    display: none;
  }

  /* /.install_web_app */

  .install_web_app{
    width: 100%;
    display: grid;
    grid-template-areas: 'a b';
    border: 1px solid var(--dark);
    border-radius: 5px;
    margin: 15px auto;
    padding: 5px;
    background: var(--gr_d);
    cursor: pointer;
    border: 1px solid var(--white);
    grid-auto-columns: 90fr 10fr;
    
  }
  .install_web_app *{
    color: white !important;
    cursor: pointer;
  }
  @keyframes install_web_app{
    0%{
        transform:scale(.85);
    }
    25%{
        transform:scale(1);
    }
    75%{
        transform:scale(1);
    }
    100%{
        transform:scale(.85);
    }
  }
  @media screen and (min-width:1024px){
    .install_web_app{
        width: 50%;
    }
  }
  .install_web_app > .adnroid_window_apple{
    grid-row: a;
    display: grid;
    grid-template-rows: repeat(3,33fr);
    margin: auto;
    height: 100%; 
  }
  .install_web_app > .adnroid_window_apple svg{
    height: 30px;
    width:  30px; 
    animation: install_web_app   3s infinite;
  }
  .install_web_app  .iphon_help{
    margin: auto;
  }
  .install_web_app .iphon_help svg{
    width: 20px;
    height: 20px;
    margin-bottom: -5px;
  }
  .install_web_app .iphon_help *{
    display: inline; 
  }
  .install_web_app > *{
    width: 100%;
    height: 100%;
    direction: rtl;
    cursor: pointer;
  }


/* .............................................................................
.............................................................................
.............................. SERACH .....................................
.............................................................................
............................................................................. */

#search{

}

.search_page{
    position: relative;
}
.search_page > .head{
    max-width: var(--max_width);
    position: fixed;
    right: 0;
    left: 0;
    margin: auto;
    height: 50px;
    width: 100%;
    z-index: 5;
    background-color: rgba(255, 255, 255, 0);
}
.search_page .head .search_box{
    display: flex;
    justify-content: center;
    /* align-items: center; */
    width: 100%;
    height: 100%;
}
.search_page .head .search_box > *{
    margin: auto 3px;
}


.show_serch {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 10em;
    padding-top: 50px;
    margin: auto;
}
.project_detail{
    position: fixed;
    width: 100%;
    max-width: var(--max_width);
    height:100%;
    background-color: var(--white);
    top:0;
    z-index: 150;
    display: none;
}

.project_detail > div{
    height: 100%;
    position: relative;
    display: grid;
    grid-template-columns: 50% 50%;
    justify-content: center;
    padding-top: 50px;
}
@media screen and (max-width:768px) {
    .project_detail > div{
        grid-template-columns: 55% 45%;
    } 
}

@media screen and (max-width:425px) {
    .project_detail > div{
        grid-template-columns: 100%;
    } 
    .project_detail > div > ul{
        margin-top: 2em;
    }
}


.project_detail > div > ul{
    width: 95%;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    justify-content: space-around;
    padding-bottom: 10em;
    margin: auto;

}
.project_detail > div > ul li{
    width: 32%;
    overflow: hidden;
    margin: 3px;
    cursor: pointer;
    opacity: .9;
    max-height: 150px;
    position: relative;
}
.project_detail > div > ul li > p{
    width: 20px;
    height: 20px;
    border-radius: 100%;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    background-color: rgb(250 250 250 / 56%);
    margin: 0;
    padding: 0
}
.project_detail > div > ul li:hover{
    opacity: 1;
}
@media screen and (max-width:768px){
    .project_detail > div > ul li{
        width: 48%;
    }  
}

.project_detail > div > ul h3{
    height: 40px;
    width: 100%;
}

.project_detail > div > ul > li > img{
    width: 100%;
    height: 100%;
    border-radius: 5px;
    display: block;
    object-fit: cover;
}

.project_detail > div > div > div > img{
    width: 200px;
    height: 200px;
    border-radius: 5px;
    object-fit: cover;
    border: 1px solid var(--gray);
}
.project_detail > div > div {
    width: 95%;
    overflow-y: auto;
    padding-bottom: 13em;
    margin: auto;
    height: 100%;
    justify-items: center;
}
.project_detail > div > div > .ok_project{
    background-color: var(--dark);
    padding: 5px;
    border: 1px solid var(--gray);
    margin: 5px auto;
    width: 180px;
    border-radius: 10px;
    color: var(--white);
}
.project_detail > div > div  section{
    width: 90%;
    display: grid;
    grid-template-columns: 50fr 50fr;
    direction: rtl;
    padding: 5px;
    margin: 2px auto;
    background-color: rgba(128, 128, 128, 0.183);
    border-radius: 5px;
    border:var(--border_s_gray);
}

@media screen and (max-width:425px){
    .project_detail > div > div > section{
        grid-template-columns: 100fr 100fr;
        overflow: auto;
    }
    .project_detail > div{
        overflow: auto;
    }
    .project_detail > div > div{
        overflow: initial;
        padding-bottom: 0;
    }
    .project_detail > div > ul{
        overflow: initial;
        padding-top: 0;
    }
    .project_detail > div > ul > h3{
        margin-bottom: 1em;
    }
    .project_detail > div > ul li:last-child {
        /* padding-bottom: 12em; */
    }

}
.project_detail > div > div > div{
    width: 170px;
    margin: auto;
}
.project_detail > div > div > div.profile_none{
    height:170px;
}
.project_detail .next{
    margin: 5px 1em;
}
.project_detail .l1{
    color: rgba(255, 255, 255, 0) !important;
}
.project_show {
    position: relative;
    display: grid;
    grid-template-rows:60% 10% 10% 10% 10%;
    width: 300px;
    border: 1px solid rgb(193 193 193);
    padding-bottom: 1em;
    margin: 5px;
    border-radius: 10px;
    overflow: hidden;
}
.dark .project_show{
    border: 1px solid white;
}
.project_show:hover img{
    opacity: 1;
}
.project_show:hover .search_image_icon{
    opacity: 1;
}
.project_show .datail{
    display: grid;
    grid-template-columns: 50% 50%;
    align-items: center;
    justify-items:center;
}
.project_show > div h3{
    width: 90%;
    border-radius: 10px;
}
.project_show_top{
    position: relative;
    height: 200px;
}
@media screen and (max-width:768px) {
    .project_show_top{
        height: 180px;
    }
}
@media screen and (max-width:425px) {
    .project_show_top{
        height: 165px;
    }
}
.show_serch > div > *{
    width: 100%;
}
.show_serch div img{
    width: 100%;
    height: 100%;
    max-height: 100%;
    opacity: .95;
    object-fit: cover;
    display: inline;
    margin: 0;
}
.show_serch > div > p{
    max-width: 100%;
    padding: 3px 5px;
}
@media screen and(max-width:768px){
    .show_serch div p{
        margin-top: 1em;
    }
}
.search_image_icon{
    opacity: 0;
    position: absolute;
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 45px;
    padding: 5px;
    top: 0;
    z-index: 1;
    cursor: default !important;
    background-color: rgba(255, 255, 255, 0.474);
}
.search_image_icon > *{
    background-color: rgba(0, 0, 0, 0.186);
    cursor: pointer;
    border-radius: 100%;
    width: 35px;
    height: 35px;
}
.search_image_icon > *:hover{
    background-color: rgba(0, 0, 0, 0.539);
}
.show_profile{
    display: grid;
    grid-template-columns: 40px 100fr;
    position: absolute;
    width: 100%;
    height: 40px;
    right: 0;
    bottom: -1px;
    padding: 0 5px;
    align-content:center;
}

.show_profile span{
    width: 35px;
    height: 35px;
    border-radius: 100%;
    border: 1px solid var(--white);
    overflow: hidden;
    background: url('../images/profile.png') center no-repeat;
    background-size: 30px;
}
.show_profile span img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.show_profile  p{
    text-align: left;
    color: var(--white) !important;
    bottom: 0;
    text-shadow: 0px 0px 1px var(--general);
    padding-top: 5px;
}

/* filter parent */

.filter_parent{
    position: fixed;
    max-width: var(--max_width);
    top: 0;
    z-index: 80;
    width: 100%;
    height: 100%;
    background-color: var(--white);
    display: none;
}
.filter_parent > div{
    overflow-y: auto;
    height: 100%;
    width: 100%;
    padding: 50px .5em 13em .5em;
    background-color: var(--white);
}
.dark .filter_parent > div{
    background-color: var(--theme_night);
}
.filter_parent > div > section{
    border: 1px solid var(--dark);
    border-radius: 10px;
    margin-top: 5px;
    direction: rtl;
    padding: 5px;
}
.filter_parent > div > section.number{
    display: grid;
    grid-template-areas: 
    'a b b c'
    'd e e f'
    'h h g g';
    grid-template-columns: 25% 25% 25% 25%;
}
@media screen and (max-width:600px) {
    .filter_parent > div > section.number{
        display: grid;
        grid-template-areas: 
        'a c'
        'd f'
        'b b'
        'e e'
        'h g';
        grid-template-columns: 50% 50% ;
    }
}

.filter_parent > div > section.number > *{
    width: 100%;
    margin: auto;
    overflow: hidden;
}

.filter_parent > div > section.number .input p{
    display: none;
}
.filter_parent > div > section.number .input{
    grid-template-columns: 100%;
    width: 90%;
}
.filter_parent > div > section.sel_text > div{
    width: 100%;
    padding: 5px;
    display: flex;
    justify-content: space-around;
}
.filter_parent > div > section.sel_text > div > p{
    padding: 5px;
    border-radius: 5px;
    border: 1px solid var(--gray);
    cursor: pointer;
    margin: 3px;
    min-width: 85px;
}
/* .............................................................................
.............................................................................
.............................. INSERT .....................................
.............................................................................
............................................................................. */

#insert{
    padding-bottom: 13em;
}
.get_into{
    border: 1px solid var(--dark);
    border-radius: 10px;
    margin: 5px;
    padding: 1em;
    direction: rtl;
}

.get_into.sel_param > div{
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: space-between;
}
.get_into.sel_param > div > div{
    max-width: 240px;
    display: grid;
    background: var(--gray);
    border-radius: 5px;
    border: 1px dashed var(--dark);
    margin: 3px;
}
 .dark .get_into.sel_param > div > div{
    background: var(--theme_night);
}
.get_into.sel_param > div > div.len{
    display: grid;
    grid-template-areas: 
    'a a a'
    'b b b'
    'c c c ';
    grid-template-rows: 100fr 45px 30px;
    min-width: 210px;
}
 .get_into.sel_param > div > div.len > div {
    width: 100%;
    grid-area: b;
    margin: 2px;
}
.get_into.sel_param > div > div.len > div p{
    margin: 0 5px !important;
    border-radius: 10px;
    background-color: var(--green);
    color: var(--white);
    position: relative;
    overflow: hidden;
}
.get_into.sel_param > div > div.len > div.off p::after{
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(43, 43, 43, 0.46);
    cursor: default;
}

.get_into.sel_param > div > div:hover{
    border-style: solid;
}
.get_into.sel_param > div > div > span{
    width: 100%;
    display: grid;
    grid-template-areas: 'a b' 'c c';
    grid-template-columns: 25px 100fr;
    justify-items: center;
    direction: ltr;
    border: none !important;
    border-radius: 5px;
    padding: 5px;
    align-items: center;
    cursor: pointer;
}
span.go_help{
    display: grid;
    grid-template-areas: 'a b';
    grid-template-columns: 50px  100fr  ;
    direction: ltr;
    margin-top: 3px;
}
span.go_help > p{
    padding: 0 3px;
    direction: rtl;
    grid-area: b;
}
span.go_help > svg{
    padding: 0 3px;
    direction: rtl;
    grid-area: a;
    cursor: pointer;
}
 span.go_help *{
    width: 100%;
    height: 100%;
}
.get_into.sel_param > div > div > span > img{
    height: 100px;
    width: 125px;
    border-radius: 5px;
    object-fit: cover;
    margin-right: 10px;
}
@media screen and (max-width:1024px ) {
    .get_into.sel_param > div > div > span > img{
        height: 70px;
        width: 87px;
    }
}
@media screen and (max-width:425px ) {
    .get_into.sel_param > div > div > span > img{
        height: 90px;
        width: 112px;
    }
}

.get_into.sel_param > div > div > span > p{
    padding-top: 0;

}
.get_into.sel_param > div > div > span > i{
    width: 15px;
    height: 15px;
    background-color: var(--gray);
    float: right;
    border-radius: 100%;
    margin-left: 10px;
}
.get_into.sel_param > div > div > span > i > svg{
    width: 100%;
    height: 100%;
}
.get_into.sel_param > div > div > span > i.ticked > svg{
    display: none;
}
.go_help{
    width: 30%;
    margin: auto;
    height: 25px;
    display: flex;
    justify-content: center;
    padding: 2px !important;
    /* border-style: solid !important; */
}
.go_help > svg{
    background-color: var(--dark);
    height: 100%;
    border-radius: 5px;
}
/* active span */
.get_into.sel_param > div > div.act > span:nth-child(1){
    background: var(--gr_d);
    border-style: solid;
 }
 .get_into.sel_param > div > div.act > span:nth-child(1) p{
     color: var(--white);
 }
 .get_into.sel_param > div > div.act > span i{
     background-color: var(--green);
 }
 .get_into.sel_param > div > div.act > span > i > svg{
    display: block;
     width: 100%;
     height: 100%;
 }

 .show_design_sel > section > div{
    background: var(--gr_d);
    width: 145px;
    margin: auto;
    border-radius: 15px;
    cursor: pointer;
    margin-top: 1em;
 }
 .show_design_sel > section{
    display: flex;
 }
 .show_design_sel > section> div *{
    cursor: pointer;
 }
 .show_design_sel > section> div >  i > svg{
    height: 50px;
    
 }
 .show_det_place > section > div{
    display: grid;
    grid-template-areas:     
    'a b' 'c c' 'd d' 'e e';
 }
 .change_len{
    width: 100%;
    display: grid;
    grid-template-areas: 'a a a' 'b c d';
    grid-template-columns:40px 100fr 40px;
 }
 .change_len i{
    
    border-radius: 100%;
    padding: 5px;
 }
 .change_len i svg{
    width: 30px;
    height: 30px;
    border-radius: 100%;
    padding: 2px;
    cursor: pointer;
 }
 .change_len *{
    width: 100%;
    height: 100%;
 }
.window_show_design > section > div{
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    overflow-y: auto;
    height: 100%;
}
.window_show_design > section > div.po_r p{
    width: 20%;
    position: fixed;
    left: 0;
    right: 0;
    margin: auto;
    padding: 0;
    z-index: 2;
    background-color: var(--theme_night);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    color: white;
}
.window_show_design > section > div.po_r p b{
    color: white;
}
@media screen and (max-width:768px) {
    .window_show_design > section > div.po_r p{
        width: 65%;
    }
}
.window_show_design > section > div > div{
    width: 100%;
    padding: 0 2px;
    display: flex;
    justify-content: space-around;
    height: 100%;
    position: relative;
}
@media screen and (max-width:768px) {
    .window_show_design > section > div > div:nth-child(2){
        display: none;
        /* background-color: red; */
    }
}
@media screen and (max-width:425px) {
    .window_show_design > section > div > div:nth-child(2){
        display: none !important;
        /* background-color: red; */
    }
    .window_show_design > section > div > div:nth-child(3){
        display: none !important;
        /* background-color: red; */
    }
}
.window_show_design > section > div > div > span{
    cursor: pointer;
    position: relative;
    height: auto;
    min-width: 100%;
    /* margin-bottom: 600px; */
}
.window_show_design > section > div > div > span img{
    width: 100%;
    height: auto;
    object-fit:contain;
    box-sizing: border-box;
    cursor: pointer !important;
    display: inline;
    
}
.window_show_design > section > div > div > span i{
    position: absolute;
    width: 100px;
    height: 100px;
    left: 0;
    right: 0;
    top:30px;
    border-radius: 30px;
    margin: auto;
    background: url('../../assets/images/select_img.png') center no-repeat;
    background-color: rgba(0, 0, 0, 0.179);
    background-size: 50px 50px;
    z-index: 1;
    background-position: center;
}
@media screen and (max-width:768px) {
    .window_show_design > section > div > div > span i{
        width: 60px;
        height: 60px;
        background-size: 40px 40px;
        top: 10px;
    }
}
@media screen and (max-width:425px) {
    .window_show_design > section > div > div > span i{
        width: 40px;
        height: 40px;
        background-size: 25px 25px;
        top: 5px;
    }
}

.present_info{

}
.present_info > section{
    display: flex;
    justify-content: space-around;
    direction: rtl;
}
.present_info > section > div{
    display: grid;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid var(--gray);
    padding: 5px;
    max-width: 300px;
}
.present_info > section > div > *{
    margin: 5px;
}
.present_info > section > div.check-inp{
    grid-template-areas: 'a b c' 'd d d';
}
.present_info > section > div.check{
    grid-template-areas: 'a b' 'd d';
}

.get_information{

}
.get_information > section{
    display: grid;
    justify-items: center;

    grid-template-columns: repeat(3,33fr);
    justify-content: space-around;
}
@media screen and (max-width:768px) {
    .get_information > section{
        grid-template-columns: 100fr;
        grid-template-rows: 150px 100px 150px;
    }
}
.get_information > section > div{
    width: 100%;
    padding: 1em;
    margin: 1em;
    border-radius: 10px;
}

.get_information > section > div *{
    max-height: 200px;
}
@media screen and (max-width:768px) {
    .get_information > section > div .textarea textarea{
        max-height: 100px;
    }
    .get_information .descript_parent{
        height: 100px;
    }
}
/* show_help */

.show_help{
    position: fixed;
    width: 100%;
    z-index: 200;
}
.load_icon{
    display: flex;
    margin:  2em auto;
    width: 50px;
    height: 50px;
    background: url('../../assets/images/loading.gif') center no-repeat;
    background-size: 50px 50px;
    position: fixed;
    left: 0;
    right: 0;
}
.submit_insert{
    display: flex;
    justify-content: center;
    direction: rtl;
    padding: 1em;
    border: 1px solid var(--dark);
    margin: 5px;
    border-radius: 10px;
}
.submit_insert span{
    display: flex;
    justify-content: center;
    align-items: center;
}
.submit_insert > span > p{
    color: white;
    background-color: var(--green);
    border-radius: 15px;
    padding: 5px;
    border: none;
    cursor: pointer;
}

/* general in insert */

.parent_info{
    position: relative;
    overflow: hidden;
}
.off_info{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.419);
    left: 0;
    top: 0;
    backdrop-filter: blur(1px);
    z-index: 35;
}

.next_back{
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 1em;
}

.next_back p{
    width: 100px;
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    color: white;
    text-align: center;
    display: inline !important;
    border: none;
    margin: 0 !important;
}

.next_back p.off::after{
    content: '';
    position: absolute;
    cursor: default;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(31, 31, 31, 0.753);
}

.next_back  .next{
    background-color: var(--green);
}
.next_back .back{
    background-color: var(--red);
}
.show_info_place {
    width: 100%;
}
.show_info_place > div{
    width: 100%;
    display: grid;
    grid-template-columns: 50fr 50fr;
    margin: 5px 0;
    border-radius: 5px;
    padding: 5px;
}
.show_info_place:nth-child(1){

}
.mic-toggle{
    grid-template-areas: 'a a' 'b b' 'c c' 'd d';
}

@media screen and (max-width:768px) {
    .mic-toggle{
        display: grid;
        grid-template-areas: 'a a' 'b b' 'c d';
        grid-template-columns: 20fr 80fr;
        
    }
}


.my_post{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.my_post .add_post{
    width: 95%;
    display: grid;
    direction: rtl;
    grid-template-areas: 'a b' 'c d';
    grid-template-columns: 25% 75% ;
    margin: 1em auto;
    padding: 1em;
    border: 1px solid var(--white);
    border-radius: 10px;
}
@media screen and (max-width:768px) {
    .my_post .add_post{
        grid-template-areas: 'b b' 'c c' 'a a' 'd d';
        grid-template-columns: 100% ;
    }
}
.my_post .add_post .upload{
    background-color: #4393d9;
    border: 1px dashed var(--white);
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    margin: 5px 0;
    grid-row: b;
}
.my_post .add_post .upload input[type="file"]{
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
    right: 0;
    top: 0;
}

.my_post .add_post .upload svg{
    width: 50px;
    height: 50px;
}
.my_post .add_post .description{
    display: grid;
    grid-row: a;
    grid-template-areas: 'a b' 'c c';
    grid-template-columns: repeat(2,50%);
    justify-items: center;
}
@media screen and (max-width:768px) {
    .my_post .add_post .description{
        display: grid;
        grid-template-areas: 'a a' 'b b' 'c c';
        grid-template-columns: 100%;
        justify-items: center;
    }
}
.my_post .add_post .description .meter{
    grid-area: a;
    width: 80%;
}
@media screen and (max-width:768px) {
    .my_post .add_post .description .meter{
        width: 100%;
    }
}
.my_post .add_post .description .location{
    grid-area: b;

}
.my_post .add_post .description .location select{
    width: 200px;
    background-color: var(--dark);
    outline: 0;
    border-radius: 10px;
    cursor: pointer;
}

.my_post .add_post .description .caption{
    grid-area: c;
    width: 100%;
    padding: 1em;
}
.my_post .add_post .description .caption textarea{
    outline: 0;
    border: 1px solid var(--white);
    background-color: #00000000;
    height: 100px;
    min-height: 100px;
    min-width: 100%;
    border-radius: 10px;
    
}
.my_post .add_post .num_file_select{
    grid-row: c;
}
.my_post .add_post .submit{
    grid-row: d;
    background-color: var(--dark);
    cursor:pointer;
    border-radius: 10px;
}
.my_post .add_post .submit p{
    padding: 5px;
    cursor:pointer;
}
.my_post .success_post{
    max-width: 768px;
    margin: 5px auto;
    background: var(--gr_n);
    border-radius: 10px;
    padding: 5px;
    border: 1px solid var(--dark);
    display: grid;
    grid-template-columns: 50px 100fr;
    margin: 5px;
    opacity: 0;

}
.my_post .success_post svg{
    width: 100%;
}
.my_post .success_post p{
    width: 100%;
    height: 100%;
}
.my_post .old_post{

}

/* .............................................................................
.............................................................................
.............................. PROFILE .....................................
.............................................................................
............................................................................. */

.parent_setting_profile{
    display: flex;
    justify-content: center;
}
.parent_setting_profile .ph{
    width: 100%;
    border-bottom: 1px dotted var(--general);
}
.parent_setting_profile .setting.check{
    display: grid;
    grid-template-columns: 100fr 40px ;
    column-gap: 5px;
    border-radius: 5px;
    border: 1px solid var(--white);
    padding: 5px;
    margin: 5px;
    height: auto;
    max-width: 320px;
}