body { background-color:#1d191c;color:#7a7679; }
.page { display:none;padding:10px 0px 0px; }
.container { width:100%;max-width:400px;margin:0px auto;padding:0px 20px;box-sizing:border-box; }

#splash { position:fixed;left:0;top:0;width:100%;height:100%;text-align:center; }
#splash img { width:100px; }
#splash_version { position:fixed;left:0;bottom:20px;width:100%;font-size:10pt;text-align:center; }

.top_title { margin:0px auto 20px;text-align:center;font-weight:600;color:#fff;font-size:22pt;line-height:30px; }
.top_title > div { font-weight:400;font-size:12pt;color:#7a7679;margin-top:10px; }

.page_button { position:fixed;left:0;bottom:0;width:100%;height:150px;text-align:center;z-index:+10;
background-image:linear-gradient(to top,#1d191c,rgba(0,0,0,0));padding:0px 20px;box-sizing:border-box;
background-image:-webkit-linear-gradient(to top,#1d191c,rgba(0,0,0,0));pointer-events:none;
background-image:-moz-linear-gradient(to top,#1d191c,rgba(0,0,0,0)); }
.page_button > div { width:auto;max-width:450px;border-radius:50px;background-color:#f41966;cursor:pointer;color:#fff;
height:50px;line-height:50px;margin:80px auto 0px;box-sizing:border-box;pointer-events:visible;font-size:13pt;  }

#cancel_order_container { text-align:center;margin:30px 0px 0px; }
#cancel_order_container > * { cursor:pointer; }

.header { text-align:center;margin:20px auto 30px;width:100%;padding:0px 25px;box-sizing:border-box;max-width:400px;display:none; }
.header > div { width:33.33%; }
.header > div:nth-child(1) { text-align:right; }
.header > div:nth-child(1) i.back { display:block;width:30px;height:30px;background-size:70%;
background-image:url('../image/back.png');background-position:center;background-repeat:no-repeat; }
.header > div:nth-child(1) i.user { display:block;width:30px;height:30px;background-size:80%;
background-image:url('../image/user.png');background-position:center;background-repeat:no-repeat; }
.header > div:nth-child(2) { text-align:center; }
.header > div:nth-child(2) img { width:100%;max-width:70px; }
.header > div:nth-child(3) { text-align:left;color:#fff;line-height:25px; }
.header > div:nth-child(3) > div { display:inline-block;vertical-align:middle; }
.header > div:nth-child(3) span { display:inline-block;vertical-align:middle;font-family:Arial;
letter-spacing:0.5pt; }
.header > div:nth-child(3) img { width:25px;margin-left:3px; }

#upload_container { position:fixed;left:20px;right:20px;top:85px;bottom:90px;background-color:rgba(0,0,0,0.2);border-radius:20px; }
#upload_container > .frame { position:absolute;left:20px;top:20px;right:20px;bottom:20px;border-radius:10px;
border:2px dashed rgba(255,255,255,0.05);box-sizing:border-box; }
#upload_container > .tbl { width:100%;height:100%;position:absolute;left:0;top:0;text-align:center; }
.upload_elem { width:100%;max-width:250px;margin:0px auto; }
.upload_elem > div:nth-child(1) { width:250px;height:250px;border-radius:20px;overflow:hidden; }
.upload_elem > div:nth-child(1) img { width:100%;height:100%;object-position:center;object-fit:cover; }
.upload_elem > div:nth-child(2) { font-size:20pt;margin:20px auto 10px;font-weight:600;color:#fff; }
.upload_elem > div:nth-child(3) { font-size:12pt;opacity:0.6; }
.upload_elem > div:nth-child(4) { display:none; }

.filters_container { text-align:center;white-space:nowrap;overflow-x:auto;padding:0px 20px;margin:0px auto 25px;
width:100%;max-width:500px;box-sizing:border-box; }
.filter { background-color:rgba(0,0,0,0.2);display:inline-block;vertical-align:middle;padding:10px 15px;
border-radius:30px;margin:0px 2px;cursor:pointer; }
.filter.selected { background-color:#f41966;color:#fff; }

.box_container { padding-bottom:80px; }
.box { width:50%;float:right;box-sizing:border-box;padding-bottom:14px;transition:100ms;-webkit-transition:100ms;-moz-transition:100ms; }
.box:nth-child(odd) { padding-left:7px; }
.box:nth-child(even) { padding-right:7px; }
.box > div { border-radius:20px;background-color:#272125;padding:10px;border:2px solid #272125; }
.box > div > div:nth-child(1) { aspect-ratio:1/1;width:100%;border-radius:15px;overflow:hidden; }
.box > div > div:nth-child(1) img { width:100%;height:100%;object-fit:cover;object-position:center; }
.box > div > div:nth-child(2) { line-height:30px;height:30px;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap;margin:3px 0px 5px; }
.box > div > div:nth-child(3) { padding:7px 0px;text-align:center;border-radius:30px;background-color:#1d191c;color:#fff; }
.box > div > div:nth-child(3):before { content:"انتخاب"; }

.box.selected > div { border-color:#f41966;background-color:#311e24; }
.box.selected > div > div:nth-child(2) { color:#fff; }
.box.selected > div > div:nth-child(3) { background-color:#f41966; }
.box.selected > div > div:nth-child(3):before { content:"انتخاب شده"; }

.data_loading { padding:50px 0px;text-align:center; }
.data_loading:before { content:"";display:inline-block;vertical-align:middle;width:100px;height:100px;background-size:100%;
background-image:url('../image/loading.svg');opacity:0.1; }

#download_container { position:fixed;left:20px;right:20px;top:85px;bottom:65px;background-color:rgba(0,0,0,0.2);border-radius:20px; }
#download_container > div:nth-child(1) { position:absolute;left:20px;top:20px;right:20px;bottom:85px;border-radius:10px;overflow:hidden; }
#download_container > div:nth-child(1) img { width:100%;height:100%;object-position:center;object-fit:cover; }
#download_container.loading > div:nth-child(1) { background-image:url('../image/loading.svg');background-size:100px 100px;
background-position:center;background-repeat:no-repeat;opacity:0.1; }
#download_container > a:nth-child(2) { position:absolute;left:20px;bottom:20px;right:20px;height:50px;line-height:50px;
border-radius:10px;background-color:#f41966;cursor:pointer;color:#fff;text-align:center;display:block; }
#download_container > a:nth-child(2):before { content:"";display:inline-block;vertical-align:middle;width:25px;
height:25px;background-size:100%;background-image:url('../image/download.png');margin-left:10px; }
#download_exit { position:fixed;left:0;bottom:25px;width:100%;text-align:center; }
#download_exit > span { cursor:pointer; }

.pack_container { padding-bottom:100px; }
.pack { border-radius:15px;background-color:#272125;padding:15px 18px;border:2px solid #272125;
margin-top:15px;position:relative;border:2px solid #23222b; }
.pack > div:nth-child(1) { font-weight:600;font-size:14pt;color:#fff;margin-bottom:10px; }
.pack > div:nth-child(2) strike { margin-left:5px; }
.pack > span { position:absolute;left:15px;top:15px;display:inline-block;vertical-align:middle;
color:#fff;padding:7px 12px;border-radius:20px;background-color:rgba(0,0,0,0.2); }
.pack.selected { border-color:#f41966;background-color:#311e24; }

.login_container { width:100%;max-width:350px;margin:20px auto 0px;padding:0px 20px;box-sizing:border-box;padding-bottom:90px; }
.login_form { margin-top:70px; }
.login_form label { display:block;margin-bottom:15px;padding-right:10px;font-weight:300; }
.login_form input { width:100%;height:50px;border-radius:10px;font-size:12pt;text-align:right;color:#fff;
border-style:none;outline-style:none;padding:0px 20px;box-sizing:border-box;
letter-spacing:3pt;background-color:rgba(0,0,0,0.25); }
.login_form input.ltr { direction:ltr;font-family:Arial,Tahoma;text-align:left; }
.login_form input:focus { border-color:#555; }
#login_verify { margin-bottom:25px;line-height:30px;padding:15px;background-color:#231f22;border-radius:10px; }
#login_verify > div { display:inline; }
#login_verify > div:nth-child(2) { color:#fff;margin-right:10px; }
#login_verify > div:nth-child(2) > span { cursor:pointer; }
#login_resend { text-align:center;margin-top:20px; }
#login_resend > div:nth-child(1) { display:none; }
#login_resend > div:nth-child(1) > span { display:inline-block;vertical-align:middle;font-weight:600;letter-spacing:0.5pt;
width:60px;text-align:center;font-size:11pt;margin-left:0px; }
#login_resend > div:nth-child(2) { font-weight:600;color:#fff; }
#login_resend > div:nth-child(2) > span { cursor:pointer; }

#user_box { text-align:center;margin-bottom:50px; }
#user_box > div:nth-child(1) { margin:0px auto 15px;width:150px;height:150px;border-radius:100%;overflow:hidden; }
#user_box > div:nth-child(1) > img { width:100%;height:100%;object-fit:cover;object-position:center; }
#user_box > div:nth-child(2) { color:#fff;font-size:16pt;height:30px;line-height:30px;font-family:Arial; }
#user_box > div:nth-child(3) { height:30px;line-height:30px;margin-top:0px; }

#user_links { width:90%;margin:0px auto; }
#user_links > div { line-height:30px;padding:10px 10px;border-bottom:1px dashed rgba(255,255,255,0.05);color:#fff; }
#user_links > div > img { height:25px;margin-left:10px; }

#images_container { min-height:200px;padding-bottom:30px; }
.image_box { margin-top:14px;border-radius:20px;background-color:#272125;padding:15px; }
.image_box > .tbl { width:100%; }
.image_box > .tbl > div:nth-child(1) { width:90px; }
.image_box > .tbl > div:nth-child(1) > div { width:90px;height:90px;border-radius:12px;overflow:hidden; }
.image_box > .tbl > div:nth-child(1) > div > img { width:100%;height:100%;object-fit:cover;object-position:center; }
.image_box > .tbl > div:nth-child(2) { padding-right:15px; }
.image_box > .tbl > div:nth-child(2) > div:nth-child(1) { font-weight:600; }
.image_box > .tbl > div:nth-child(2) > div:nth-child(2) { font-size:10pt;margin-top:10px; }

#images_container.loading { background-image:url('../image/loading.svg');background-size:100px 100px;
background-position:center bottom;background-repeat:no-repeat;opacity:0.1; }


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

}
@media only screen and (max-width:600px) {

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

}