@font-face {
    font-family: 'ali';
    src: url(../fonts/IRANSansWeb.ttf);
format('ttf');
}
/* برای مرورگرهای وب‌کیت (Chrome, Safari, Opera) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* برای فایرفاکس */
input[type="number"] {
    -moz-appearance: textfield;
}


img {
    aspect-ratio: 3/4;
    object-fit: cover;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: #2c3858;
}

::-webkit-scrollbar-thumb {
    background: #d3d4de;
    border-radius: 10px;
}

::placeholder {
    font-size: 10px;
}

#hr {
    position: relative;
    width: 90%;
    top: -35px;
    right: 3%;
}

p {
    line-height: 30px;
}

.menumobile {
    display: none;
}

.topnav, .mobile-login-reg {
    display: none;
}

body {
    background-image: url("../img/bg/bg3.png");
    background-repeat: repeat;
    background-size: auto;
    font-family: ali;

}

.header {
    max-width: 100%;
    height: 22px;
    background: rgba(255, 255, 255, 0.45);
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
    /*box-shadow: 10px 8px 12px 0 rgba(84, 87, 118, 0.37);*/
    backdrop-filter: blur(5.5);
    -webkit-backdrop-filter: blur(5.5);
    border: 1px solid rgba(255, 255, 255, 0.18);
    text-align: center;
    transition: .5s all;
    font-size: 13px;
}

.header:hover {
    box-shadow: none;
}

.header p {
    transition: .2s all;
}

.header p:hover {
    font-weight: bold;
    color: #071e27;
}

.orginal-menu {
    /*margin-top: 5px;*/
    max-width: 100%;
    height: 60px;
    background: rgba(255, 255, 255, 1);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.orginal-menu ul {
    list-style: none;

}

.btn-auth-a {
    color: #fff;
    text-decoration: none;
}




.btn-auth-a:hover {
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}

.orginal-menu ul li {
    display: inline-block;
    padding-left: 5px;
    padding-right: 0px;
    margin-top: 10px;
    transition: .2s all;
    text-align: right;
}

.orginal-menu ul li a h6 {
    display: inline-block;
    color: #1d252f;
}

.orginal-menu ul li a {
    display: inline-block;
    margin-top: 5%;
    color: #747272;
    transition: 1s all;
}
.orginal-menu ul li a h6{
    color: #747272;

}


.orginal-menu ul li a:hover {
    text-decoration: none;
    color: #0a0a0a;
    background: #efeff2;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;
}

.chat {
    animation: chat 1.2s infinite;
}

@keyframes chat {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

.btn-auth {

    margin-top: 10px;
    text-align: left;
    position: sticky;
    top: 0;
}

.btn-auth button {
    margin-left: 10px;
}

.logo {
    max-width: 100%;
    text-align: center;
}

.logo img {
    max-width: 170px !important;
    height: 60px;
    aspect-ratio: auto;
    /*object-fit: cover;*/
    margin-top: -10px;
}

.searchbar input {
    border-radius: 10px;
    outline-color: #9ca3af;
    border: 1px solid dodgerblue;
    margin-top: 15px;
    margin-right: 2px;
    width: 15.5em; height:3em; font-size: 10px;
}
.select-search{
    width: 6em; font-size: 10px;
    height:3em;border-radius: 10px; border: 1px solid dodgerblue; outline-color: #9ca3af;
}
.rez-search{
    background: #ebf1f1;
    width: 100%;
    height: auto;
    z-index: 322;
    position: relative;
border-radius: 10px;
}

/*.notfound{*/
/*    color: #444444;*/
/*    text-shadow: 1px 0px 1px #CCCCCC, 0px 1px 1px #EEEEEE, 2px 1px 1px #CCCCCC, 1px 2px 1px #EEEEEE, 3px 2px 1px #CCCCCC, 2px 3px 1px #EEEEEE, 4px 3px 1px #CCCCCC, 3px 4px 1px #EEEEEE, 5px 4px 1px #CCCCCC, 4px 5px 1px #EEEEEE, 6px 5px 1px #CCCCCC, 5px 6px 1px #EEEEEE, 7px 6px 1px #CCCCCC;*/
/*}*/
/*.notfound1{*/
/*    background-image: url("../img/logo/404.jpg");*/
/*    background-repeat: no-repeat;*/
/*    background-size: cover;*/
/*}*/
/*-------------------------------------------------------box-ads*/
.single-story{
    width:99vw;
    height: 99vh;
    background: rgba(0,0,0,0.5);
    overflow-x: hidden;
}
.backlink{
    color:red;
    transition: .3s all;
}
.backlink:hover{
    color: #d95858;

}
.single-story-img{

 position: relative;
    top:5%;
    right:125%;
}

#logo5 {
    -webkit-border-radius: 20px 5px 5px 20px;
    -moz-border-radius: 20px 5px 5px 20px;
    border-radius: 20px 5px 5px 20px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.storyusers  {
    width: 4em;
    height: 4em;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    transition: .2s all;
}

.storyusers:hover {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}

.story-home::-webkit-scrollbar {
    height: 8px;
}

.story-home::-webkit-scrollbar-thumb {
    background: #d3d4de;
    border-radius: 10px;
}

.story-home::-webkit-scrollbar-thumb:hover {
    background: #2c3858;
}

.ten-ads{
width: 100%;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    white-space: nowrap;
    height: 8.5em;
    overflow-x: auto;
    overflow-y: hidden;
    /*background: #3ec1c3;*/
    /*box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );*/
    /*backdrop-filter: blur( 3px );*/
    border-radius: 10px;
    border-radius: 10px;
    display: flex;
}
.ten-ads::-webkit-scrollbar {
    height: 5px;
}

.ten-ads::-webkit-scrollbar-thumb {
    background: #d3d4de;
    border-radius: 10px;
}

.ten-ads::-webkit-scrollbar-thumb:hover {
    background: #2c3858;
}

.title-titr{
    border-radius: 10px;
    /*background: #f3ecec;*/
    box-shadow:  5px -5px 10px #bbb6b6,
    -5px 5px 10px #ffffff;
    background: rgb(2,0,36);
    background: linear-gradient(270deg, rgb(12, 26, 68) 0%,  rgb(72, 122, 157) 100%);
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
    padiing-left:30px;
    width:9em;
    height: 3em;
    text-align: center;
    padding-top:10px;
    color: #f1f1ee;
    border-radius: 10px;
}

/*.ten-ads h4{*/
/*    margin: 10px;*/
/*    color: #2e2c2c;*/
/*}*/
.ten-ads img{
    width: 6em;
    height: 6em;
    border-radius: 50%;
    border: 1px solid #a0a5b1;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    margin-top:10px;
    margin-right: 25px;
    padding:10px;
    transition: .5s all;
}
.ten-ads img:hover{
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;

}
/*.ten-ads p{*/
/*    color:black;*/
/*    margin-right: 25px;*/
/*    transition: .3s all;*/
/*}*/
/*.ten-ads p:hover{*/
/*    color: #181717;*/
/*    text-decoration: none;*/
/*}*/
/*.box-ads {*/
/*    width: 200px; height: 300px;*/
/*    position: relative;*/
/*    border: 1px solid #BBB;*/
/*    background: #EEE;*/
/*}*/
.box-ads {
    width: 9rem;
    height: auto;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;
    margin: 20px;
    background: rgba(255, 255, 255, .6);
    transition: .5s all;
}

.box-ads:hover {
    box-shadow: rgba(0, 0, 0, 0.16) 0 1px 4px;
}

.btn-info-ads {
    position: relative;
    right: 15%;
    top: -2%;
}

.box-ads img {
    width: 8rem;
    height: 8rem;
    border-radius: 15px;
    text-align: center;
    margin-right: 7px;
    margin-top: 15px;
    transition: .3s all;
}

.box-ads img:hover {
    transform: scale(1.1);
}
.hashtag{
    opacity: 0;
}

.title-ads {
    text-align: center;
    color: #AEAEAE;
}

.content-ads p {
    text-align: center;
    font-size: .8em;
    color: gray;
    height: 80px;
    line-height: 25px;
    overflow: hidden;
}

.info-info {
    margin-right: 50px;
}

.special {
    max-width: 100%;
    height: 300px;
    margin-top:30px;
    padding: 15px;
    text-align: center;
}
.ads-offer{
    max-width: 60%;
    height: 150px;
    /*background: gray;*/
    margin-right:35px;
    background: rgb(229,229,237);
    background: linear-gradient(90deg, rgba(229,229,237,1) 35%, rgba(0,212,255,1) 100%);
    animation: 1.5s special infinite;
    transition: .5s all;
}
.special img {
    max-width: 60%;
    height: 150px;
    animation: 1.5s special infinite;
    transition: .5s all;
}

@keyframes special {
    0% {
        transform: scale(1)
    }
    100% {
        transform: scale(1.1)
    }
}


/*-------------------------------------------------------notifi*/
.notifi{
    position: absolute;
    top:30%;
    width:90% ;
    height:auto;
    font-weight: bold;
    background: #224563;
    color: #f2f2f2;
    z-index: 99999;
    text-align: center;
    -webkit-box-shadow: 5px 5px 15px 5px #000000;
    box-shadow: 5px 5px 15px 5px #000000;
    padding:25px ;
    border-radius: 15px;
}
/*-------------------------------------------------------sticky*/
.sticky-ads {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: fixed;
    bottom: 5px;
    left: 5px;

}

.sticky-ads img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition: .5s all;
    animation: 5s sticky-ads infinite linear;
}

@keyframes sticky-ads {
    0% {
        transform: scale(.5)
    }
    100% {
        transform: scale(1)
    }
}

.sticky-ads img:hover {
    transform: scale(1.1);
}

.img-sticky-content {
    width: 150px;
    height: 150px;
}

.img-sticky-content img {
    width: 150px;
    height: 150px;
    border-radius: 50%;

}

.sticky-ads:hover .tooltiptext {
    visibility: visible;
}

.sticky-ads .tooltiptext {
    visibility: hidden;
    width: 250px;
    background-color: #2a415c;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -50px;
}

.content-sticky-ads {
    position: absolute;
    display: none;
    z-index: 2;
    max-width: 70em;
    height: auto;
    border-radius: 10px;
    top: 20%;
    right: 5%;
    background-image: url("../img/sticky/bg.png");
    background-size: auto;
    background-repeat: repeat;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.5s ease;
}

.content-sticky-ads h1 {
    margin-right: 2%;
}

.group-img-sticky {
    display: flex;
    justify-content: space-between;
}

.catalog-sticky {
    display: flex;
    justify-content: space-between;
}

.catalog-sticky img {
    width: 15em;
    height: 21em;
}

.group-img-sticky img {
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

.dis-sticky-ads p {
    line-height: 50px;
}

.progress {
    width: 50%;
    margin: auto;
}

.content-sticky-ads.show {
    display: block;
    opacity: 1;
    transform: scale(1);
    animation: bubble-in 0.5s forwards;
}

@keyframes bubble-in {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes bubble-out {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}

/*==================================================================================*/
/*==================================================================================*/
/*=================================about======================================*/
/*==================================================================================*/
/*==================================================================================*/
.about-content {
    background: rgba(191, 182, 182, 0.3);
    border-radius: 10px;
}

.about-img {
    position: relative;
    top: 30%;
    right: -30%;
    aspect-ratio: auto;
    /*object-fit: none;*/
    width: 23em !important;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}

.three {
    font-size: 28px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.5em;
    padding-bottom: 15px;
    position: relative;
}

.three:before {
    content: "";
    position: absolute;
    right: 10%;
    bottom: 0;
    height: 5px;
    width: 55px;
    background-color: #797272;
}

.three:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 2px;
    height: 1px;
    width: 95%;
    max-width: 255px;
    background-color: #ada7a7;
}

.info-about {
    transition: .5s all
}

.info-about:hover {
    font-weight: bold;
    margin-right: 10px;
    background: rgba(255, 255, 255, .7);
}

/*==================================================================================*/
/*==================================================================================*/
/*=================================khabrche======================================*/
/*==================================================================================*/
/*==================================================================================*/
.khabarche h6 {
    line-height: 2.5em;
    background: rgba(255, 255, 255, .5);
}

.sapnView {
    background: #ebe7e7;
    color: #484646;
    font-size: 10px;
    padding: 3px;
    margin: 3px;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
    transition: .3s all;
}

.sapnView:hover {
    /*cursor: pointer;*/
    background: #16181c;
    color: #fff;
}

.box-khabarche {
    max-width: 27em;
    height: auto;
    background: #ebf1ed;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 10px;
    margin: 5px;
}

.box-khabarche p {
    color: #0c5460;
}

.box-khabarche img {
    width: 90%;
    height: 7em;
    border-radius: 10px;
    text-align: center;
    margin-right: 10px;
    /*box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;*/
    transition: .3s all;
}

.box-khabarche img:nth-child(1) {
    width: 8em;
    height: 5em;
}

.box-khabarche img:hover {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.box-khabarche h3 {
    position: relative;
    top: 2%;
}

.box-khabarche span {
    float: left;
    margin: 5px;
}

.box-khabarche p {
    max-width: 20em;
    height: 3em;
    overflow: hidden;
    position: relative;
    top: 10px;
}

/*----------------------------------------------------*/
/*----------------------------single------------------------*/
/*----------------------------------------------------*/
.description-single {
    width: 100%;
    height: auto;
    /*word-break: break-all;*/
}
.img-ads-like{
    max-width: 50em;
    height: 70em;
    padding:10px;
}
.img-ads-like img{
    width: 10em;
    height: 10em;
    border-radius: 50%;
}
/*----------------------------------------------------*/
/*----------------------------register------------------------*/
/*----------------------------------------------------*/
.register {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(2.5px);
    -webkit-backdrop-filter: blur(2.5px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    margin: 30px;
}


/* استایل برای جدول */
.table-codemaster {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 16px;
    text-align: left;
}

.table-codemaster th,
.table-codemaster td {
    padding: 12px 15px;
    border: 1px solid #ddd;
}

.table-codemaster th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.table-codemaster tr:nth-child(even) {
    background-color: #f9f9f9;
}

.table-codemaster tr:hover {
    background-color: #f1f1f1;
}

.table-codemaster td {
    text-align: center;
}

.table-codemaster td p {
    font-size: 12px;
    transition: .3s all;
}

.table-codemaster td p:hover {
    /*font-size: 14px;*/
    font-weight: bold;
    transform: scale(1.5);
}

/* استایل برای کانتینر و ردیف‌ها */
.container-fluid {
    padding: 0 15px;
}
.video-toturial{
    width: 20em;
    height: auto;
    background: #f2f2f2;
    text-align: center;
    margin:30px;
}
.video-toturial img{
    width: 20em;
    height: 20em;
}
/*----------------------------------------------------*/
/*----------------------------login------------------------*/
/*----------------------------------------------------*/
.login-page {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(2.5px);
    -webkit-backdrop-filter: blur(2.5px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    margin: 30px;
    padding: 30px;
}

.btn-link {
    font-size: 14px;
    margin-top: -30px;
}

/*============================================================================*/
/*============================================================================*/
/*===============================jashnvareh=============================================*/
/*============================================================================*/
/*============================================================================*/
.gif-jashnvareh {
    justify-items: center;
    display: flex;
    justify-content: space-evenly;
}


/*=========================================================================================================*/
/*=========================================================================================================*/
/*=============================================user-page====================================================*/
/*=========================================================================================================*/
/*=========================================================================================================*/
.sidebar-user {
    background: rgba(15, 5, 62, 0.55);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}



.p-table {
    max-width: 8em;
    height: 2em;
    overflow: hidden;
}
.img-table {
    max-width: 4em;
    height: 4em;
}
.img-table:hover {
    transform: scale(1.6);
}

.img-user {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #2a415c;
    margin-top: 20px;
    margin-right: auto;
    margin-left: auto;
}

.sidebar-user p {
    text-align: center;
    color: #d4cccc;
}

.items-user ul li {
    list-style: none;
    padding-top: 20px;
}

.items-user ul li a {
    color: #fff;
    transition: .4s all;
    display: flex;
}

.items-user ul li a:hover {
    color: #c9bbbb;
    text-decoration: none;
}

.items-user ul li a i {
    padding-left: 5px;
}

.circle-info-user {
    width: 17em;
    height: 12em;
    border-radius: 5%;
    background: rgb(208, 233, 161);
    background: radial-gradient(circle, rgba(208, 233, 161, 1) 35%, rgba(255, 250, 0, 1) 100%);
    box-shadow: rgba(0, 0, 0, 0.25) 0 14px 28px, rgba(0, 0, 0, 0.22) 0 10px 10px;
    transition: .5s all;
    text-align: center;
    padding-top: 50px;
    padding-right: 40px;
    color: #393410;
}

.circle-info-user:hover {
    box-shadow: rgba(50, 50, 93, 0.25) 0 30px 60px -12px, rgba(0, 0, 0, 0.3) 0 18px 36px -18px;
}

.circle-info-user1 {
    width: 17em;
    height: 12em;
    border-radius: 5%;
    box-shadow: rgba(0, 0, 0, 0.25) 0 14px 28px, rgba(0, 0, 0, 0.22) 0 10px 10px;
    transition: .5s all;
    background: rgb(228, 167, 174);
    background: radial-gradient(circle, rgba(228, 167, 174, 1) 35%, rgba(255, 0, 0, 1) 100%);
    text-align: center;
    padding-top: 50px;
    padding-right: 30px;
    color: #391010;
}

.circle-info-user1:hover {
    box-shadow: rgba(50, 50, 93, 0.25) 0 30px 60px -12px, rgba(0, 0, 0, 0.3) 0 18px 36px -18px;
}

.circle-info-user2 {
    width: 17em;
    height: 12em;
    border-radius: 5%;
    box-shadow: rgba(0, 0, 0, 0.25) 0 14px 28px, rgba(0, 0, 0, 0.22) 0 10px 10px;
    transition: .5s all;
    background: rgb(99, 232, 104);
    background: radial-gradient(circle, rgba(99, 232, 104, 1) 35%, rgba(12, 97, 7, 1) 100%);
    text-align: center;
    padding-top: 50px;
    padding-right: 20px;
    color: #103913;
}

.circle-info-user2:hover {
    box-shadow: rgba(50, 50, 93, 0.25) 0 30px 60px -12px, rgba(0, 0, 0, 0.3) 0 18px 36px -18px;
}

.info-user-info {
    max-width: 100%;
    height: 20em;
    border-radius: 10px;
    background: rgba(0, 0, 0, .2);
}

.box-info-user {
    max-width: 25em;
    height: 19em;
    line-height: 10px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .5);
    margin-top: 6px;
    margin-right: 7px;
}

/*=========================================================================================================*/
/*=========================================================================================================*/
/*=============================================toolbar====================================================*/
/*=========================================================================================================*/
/*=========================================================================================================*/
.toolbar {
    background: rgba(14, 67, 83, 0.55);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    /*border: 1px solid rgba( 255, 255, 255, 0.18 );*/

}

/*=========================================================================================================*/
/*=========================================================================================================*/
/*=============================================toolbar====================================================*/
/*=========================================================================================================*/
/*=========================================================================================================*/
.admin-admin-sidebar {
    background: #040224;
    height: auto;
    width: 12em;
    top: 0;
    right: 0;
    -webkit-box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 48px -3px 21px 5px rgba(0, 0, 0, 0);
    box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 48px -3px 21px 5px rgba(0, 0, 0, 0);
}

.admin-admin-sidebar ul {
    line-height: 60px;
    list-style: none;
}

.admin-admin-sidebar ul li a {
    color: #cdd3db;
    transition: .5s all;
}

.admin-admin-sidebar ul li a:hover {
    color: #FFFFFF;
    text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #05a7b9,
    0 0 30px #18ecff, 0 0 40px #18ecff, 0 0 55px #18ecff, 0 0 75px #18ecff;
    text-decoration: none;

}
/*===============================user dashboard*/

.input {
    border: none;
    padding: 1rem;
    border-radius: 1rem;
    background: #e8e8e8;
    box-shadow: 20px 20px 60px #c5c5c5,
    -20px -20px 60px #ffffff;
    transition: 0.3s;
    height: 20px;
}

.input:focus {
    outline-color: #e8e8e8;
    background: #e8e8e8;
    box-shadow: inset 20px 20px 60px #c5c5c5,
    inset -20px -20px 60px #ffffff;
    transition: 0.3s;
}




/*============================================================================*/
/*============================================================================*/
/*===============================respansive=============================================*/
/*============================================================================*/
/*============================================================================*/


@media (max-width: 600px)  {
    @font-face {
        font-family: 'ali';
        src: url(../fonts/IRANSansWeb.ttf);
    format('ttf');
    }
    ::-webkit-scrollbar {
        width: 8px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #2c3858;
    }

    ::-webkit-scrollbar-thumb {
        background: #d3d4de;
        border-radius: 10px;
    }

    ::placeholder {
        font-size: 10px;
    }

    #hr {
        position: relative;
        width: 70%;
        top: -30px;
        right: 45px;
    }

    .row {
        padding: 0;
        margin: 0;
        overflow-x: hidden;
    }

    .header {
        display: none;
    }

    .toolbar {
        display: none;
    }
    #application{display: none}

    body {
        background-image: url("../img/bg/bg3.png");
        font-family: ali;
    }

    .special {
        display: flex;
        flex-direction: row;
    }

    .special img {
        width: 120px;
        height: 120px;
        margin: 10px;
        animation: none;
    }
.info-user-info{
    height: 40em;
}
    .sticky-ads {
        bottom: 5%;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        left: 5%;
        bottom: 13%;
    }

    .sticky-ads img {

        border-radius: 50%;
        transition: .5s all;
        animation: 5s sticky-ads infinite linear;
    }

    @keyframes sticky-ads {
        0% {
            transform: scale(.5)
        }
        100% {
            transform: scale(.7)
        }
    }
    .img-sticky-content {
        width: 150px;
        height: 150px;
    }

    .group-img-sticky {
        width: 100%;
        height: auto;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .img-sticky-content img {
        border-radius: 50%;
        width: 120px;
        height: 120px;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
    }

    .catalog-sticky {
        width: 100%;
        height: auto;
        overflow-x: auto;
        overflow-y: hidden;

    }

    .catalog-sticky img {
        margin-right: 10px;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    }

    .sidebar-user {
        display: none;
    }

    .single-story-img{
width: 100%;
        position: relative;
        top:15%;
        right:5%;
    }

    .box-ads {
        width: 7rem;
        height: auto;
        position: relative;
        border: 1px solid #BBB;
        background: #EEE;
    }
    .box-ads img {
        width: 6rem;
        height: 5rem;
        border-radius: 15px;
        text-align: center;
        margin-right: 7px;
        margin-top: 15px;
        transition: .3s all;
    }
    .btn-info-ads {
        position: relative;
        right: 7%;
        top: -10%;
    }

    .img-ads-like{
        max-width:100%;
        height: auto;
        padding:10px;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .img-ads-like img{
        width: 5em;
        height: 5em;
        border-radius: 50%;
    }



    /*-------------------------------menu mobile---------------------------*/

    .menumobile ul {
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex;
        justify-content: space-around;

    }

    .menumobile ul li {
        display: inline;
        padding: -10px;
        transition: .3s all;
    }

    .menumobile ul li a {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: #cabdbd;
        margin-top: 10px;
        font-size: 14px;
    }

    . .menumobile ul li a:hover {
        color: #FFFFFF;
        background: #333333;
        text-shadow: #FFF 0px 0px 5px, #FFF 0px 0px 10px, #FFF 0px 0px 15px, #FF2D95 0px 0px 20px,
        #FF2D95 0px 0px 30px, #FF2D95 0px 0px 40px, #FF2D95 0px 0px 50px, #FF2D95 0px 0px 75px;
    }

    .menumobile ul li a i {
        color: #cef1ef;
        padding-bottom: -10px;
    }

    .menumobile {
        display: block;
        /*width: 97%;*/
        background: #03122f;
        /*background-image: url("../img/bg/menumob.png");*/
        /*background-repeat: repeat;*/
        /*background-size: cover;*/
        position: fixed;
        bottom: 0;
        right: 0;
        z-index: 999;
        border-top-left-radius:10px ;
        border-top-right-radius:10px ;
    }

    .orginal-menu {
        min-width: 100%;
        display: block;
        position: fixed;
        top:0;
        z-index: 999;
    }

    .orginal-menu ul{
        display: none;
    }
    .searchbar{
        position: absolute;
        width: 100%;
        right:0 !important;
        display: flex;
    }
    .searchbar input{
        width: 50% ;
    }
    .btn-auth{
        display: none;
    }
    .special {
        width: 100%;
        overflow: auto;

    }


    .special img {
        width: 10em;
        height: 10em;

    }

    .content-sticky-ads {
        width: 85%;
        height: auto;
        z-index: 11;
        display: none;
    }

    .close1 {
        position: absolute;
        z-index: 11;
        left: 2%;
        top: 2%;
    }

    /*=========================menuadminmobile================*/
    .topnav {
        overflow: hidden;
        background-color: #d9e8e9;
        position: fixed;
        width: 100%;
        display: block;
        top: 0;
        right: 0;
        z-index: 999999;
    }

    .topnav img {

        float: left;
        margin-left: 40px;
    }

    .topnav #myLinks {
        display: none;
    }

    #myLinks ul li {
        display: inline-block;
        list-style: none;
    }

    .icon {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        margin-top: 2px;
    }

    .topnav a {
        color: #0c162b;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
        display: block;
    }

    .topnav a.icon {
        background: #d2d1d5;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
        display: block;
        position: absolute;
        right: 0;
        top: 0;
    }

    .topnav a:hover {
        background-color: #ddd;
        color: black;
    }

    .active {
        background-color: #04AA6D;
        color: white;
    }

    .mobile-login-reg {
        position: fixed;
        bottom: 3%;
        display: block;
        right: 2%;
    }


}



/*========================tablet==================*/
@media (max-width: 1024px)  {
    @font-face {
        font-family: 'ali';
        src: url(../fonts/IRANSansWeb.ttf);
    format('ttf');
    }
    ::-webkit-scrollbar {
        width: 8px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #2c3858;
    }

    ::-webkit-scrollbar-thumb {
        background: #d3d4de;
        border-radius: 10px;
    }

    ::placeholder {
        font-size: 10px;
    }

    #hr {
        position: relative;
        width: 70%;
        top: -30px;
        right: 45px;
    }

    .row {
        padding: 0;
        margin: 0;
        overflow-x: hidden;
    }

    .header {
        display: none;
    }

    .toolbar {
        display: none;
    }
    #application{display: none}
    body {
        background-image: url("../img/bg/bg3.png");
        font-family: ali;
    }

    .special {
        display: flex;
        flex-direction: row;
    }

    .special img {
        width: 120px;
        height: 120px;
        margin: 10px;
        animation: none;
    }
    .info-user-info{
        height: 40em;
    }
    .sticky-ads {
        bottom: 20% !important;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        left: 5%;
        bottom: 13%;
    }

    .sticky-ads img {

        border-radius: 50%;
        transition: .5s all;
        animation: 5s sticky-ads infinite linear;
    }

    @keyframes sticky-ads {
        0% {
            transform: scale(.5)
        }
        100% {
            transform: scale(.7)
        }
    }
    .img-sticky-content {
        width: 150px;
        height: 150px;
    }

    .group-img-sticky {
        width: 100%;
        height: auto;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .img-sticky-content img {
        border-radius: 50%;
        width: 120px;
        height: 120px;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
    }

    .catalog-sticky {
        width: 100%;
        height: auto;
        overflow-x: auto;
        overflow-y: hidden;

    }

    .catalog-sticky img {
        margin-right: 10px;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    }

    .sidebar-user {
        display: none;
    }

    .single-story-img{
        width: 100%;
        position: relative;
        top:15%;
        right:5%;
    }

    .box-ads {
        width: 7rem;
        height: auto;
        position: relative;
        border: 1px solid #BBB;
        background: #EEE;
    }
    .box-ads img {
        width: 6rem;
        height: 5rem;
        border-radius: 15px;
        text-align: center;
        margin-right: 7px;
        margin-top: 15px;
        transition: .3s all;
    }
    .btn-info-ads {
        position: relative;
        right: 7%;
        top: -10%;
    }

    .img-ads-like{
        max-width:100%;
        height: auto;
        padding:10px;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .img-ads-like img{
        width: 5em;
        height: 5em;
        border-radius: 50%;
    }



    /*-------------------------------menu mobile---------------------------*/

    .menumobile ul {
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex;
        justify-content: space-around;

    }

    .menumobile ul li {
        display: inline;
        padding: -10px;
        transition: .3s all;
    }

    .menumobile ul li a {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: #cabdbd;
        margin-top: 10px;
        font-size: 14px;
    }

    . .menumobile ul li a:hover {
        color: #FFFFFF;
        background: #333333;
        text-shadow: #FFF 0px 0px 5px, #FFF 0px 0px 10px, #FFF 0px 0px 15px, #FF2D95 0px 0px 20px,
        #FF2D95 0px 0px 30px, #FF2D95 0px 0px 40px, #FF2D95 0px 0px 50px, #FF2D95 0px 0px 75px;
    }

    .menumobile ul li a i {
        color: #cef1ef;
        padding-bottom: -10px;
    }

    .menumobile {
        display: block;
        /*width: 97%;*/
        background: #03122f;
        /*background-image: url("../img/bg/menumob.png");*/
        /*background-repeat: repeat;*/
        /*background-size: cover;*/
        position: fixed;
        bottom: 0;
        right: 0;
        z-index: 999;
        border-top-left-radius:10px ;
        border-top-right-radius:10px ;
    }

    .orginal-menu {
        min-width: 100%;
        display: block;
        position: fixed;
        top:0;
        z-index: 999;
    }

    .orginal-menu ul{
        display: none;
    }
    .searchbar{
position: absolute;
        min-width: 120%;
        right:0;
        display: flex;

    }
    .searchbar input{
        width:50%;
    }

    .btn-auth{
        display: none;
    }
    .special {
        width: 100%;
        overflow: auto;

    }


    .special img {
        width: 10em;
        height: 10em;

    }

    .content-sticky-ads {
        width: 85%;
        height: auto;
        z-index: 11;
        display: none;
    }

    .close1 {
        position: absolute;
        z-index: 11;
        left: 2%;
        top: 2%;
    }
    .auth-mobile-menu{
        position: fixed;
        z-index: 999;
        top:15px;
        left:5%;
    }

    /*=========================menuadminmobile================*/
    .topnav {
        overflow: hidden;
        background-color: #d9e8e9;
        position: fixed;
        width: 100%;
        display: block;
        top: 0;
        right: 0;
        z-index: 999999;
    }

    .topnav img {

        float: left;
        margin-left: 40px;
    }

    .topnav #myLinks {
        display: none;
    }

    #myLinks ul li {
        display: inline-block;
        list-style: none;
    }

    .icon {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        margin-top: 2px;
    }

    .topnav a {
        color: #0c162b;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
        display: block;
    }

    .topnav a.icon {
        background: #d2d1d5;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
        display: block;
        position: absolute;
        right: 0;
        top: 0;
    }

    .topnav a:hover {
        background-color: #ddd;
        color: black;
    }

    .active {
        background-color: #04AA6D;
        color: white;
    }

    .mobile-login-reg {
        position: fixed;
        bottom: 3%;
        display: block;
        right: 2%;
    }

}

.offline{
    min-width:100% ;
    height: 200vh;
    position: fixed;
    z-index:9999;
    display: none;
    background: indianred;
    top:0;
}
.offline h3{
    display: flex;
    justify-content: center;
    margin-top:20%;
}