/* Header | .header.upSection */
.header.upSection > nav:first-child {
    padding: 20px 0;
}
.container-fluid.navgation.test-online {
    background-color: #3A6CFF;
}

.container.product-info.test-online aside .btn-pay-product , .container.product-info.test-online .btn-pay-product{
    background-color: #3A6CFF;
}
.container.product-info.test-online aside .amount.free {
    color: #0ac487;
    font-weight: bold;
    font-size: 35px;
}
.container.products-list .products-box article .information .view-product.test-online , .container-floud.products-latest .products-box article .information .view-product.test-online{
    background-color: #3A6CFF !important;
    border-color: #3A6CFF !important;
}
.container.products-list .products-box article .information .view-product.test-online:hover.container.products-list .products-box article:hover .information .view-product.test-online , .container-floud.products-latest .products-box article .information .view-product.test-online:hover, .container-floud.products-latest .products-box article:hover .information .view-product.test-online{
    background-color: white !important;
    border-color: #3A6CFF !important;
    color: #3A6CFF !important;
}

.container.product-info.test-online aside .list-notic li::before {
    background: #3A6CFF;
}
.container.product-info.test-online aside .info-product-box i {
    color: #3A6CFF;

}

.header.upSection .searchBox {
    position: absolute;
    display: inline-block;
    width: 400px;
    background: #f0f0f1;
    border-radius: 3px;
    padding: 4px 10px 8px 35px;
    margin-right: 20px;
    border: 1px solid #f0f0f1;
    right: 50%;
    transform: translateX(50%);
}

.header.upSection .searchBox .icon-search {
    position: absolute;
    left: 4px;
    font-size: 20px;
    color: #999;
    padding: 4px 8px 4px 4px;
    border-right: 1px solid #ccc;
}

.header.upSection .searchBox input {
    width: 100%;
    border: none;
    background: #f0f0f1;
    font-size: 12px;
}

.header.upSection .button_login_homepage {
    float: left;
    color: white;
    background: #6e4ff5;
    padding: 8px 8px 8px;
    border-radius: 3px;
    font-size: 13px;
    position: relative;
    top: 0px;
    min-width: 170px;
    border:1px solid #6e4ff5;
}

.header.upSection .button_login_homepage i {
    position: absolute;
    left: 10px;
    top: 5px;
    font-size: 26px;
}

.header.upSection .button_login_homepage:hover i {
    color: #6e4ff5;
}

.header.upSection .button_login_homepage:hover {
    background: white;
    color: #6e4ff5;
}

.list-category-hover {
    height: 2px;
    position: relative;
    display: inline-block;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    border-bottom: 2px solid #6e4ff5 !important;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    -ms-transition: all .5s;
    transition: all .5s;
    z-index: 2;
}

.header nav:last-child ul.navbar li a {
    color: #414449;
}

.header.upSection .container-fluid.menubar {
    border-top: 1px solid #eee;
    padding: 11px 0 0 0 !important;
}
.menubar > .row.d-desktop {
    width: 100%;
}
.header nav:last-child ul.navbar {
    justify-content: right;
    margin: 0;
    padding-bottom: 0;
}

.header nav:last-child ul.navbar li {

    margin-left: 15px;
    font-size: 13px;
    color: #414449;
    border-bottom: 2px solid transparent;
    padding-bottom: 8px;
    cursor: pointer;
    padding: 0 5px 8px 5px;
    z-index: 5;

}
.header nav:last-child ul.navbar li.active a {
    color: #975cee !important;
    /*text-shadow: 0 0 3px #f290f9;*/
    font-weight: bold;
}
.header nav:last-child ul.navbar .list-menu li{
    min-width: 150px;
}
.header nav:last-child ul.navbar .list-menu li  span {
    position: relative;
    top: -10px;
}
.header nav:last-child ul.navbar ul.list-menu li:hover i::after {
    background: #6e4ff533;
    color: #6e4ff5;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
}

.header nav:last-child ul.navbar ul.list-menu li:hover i::before {
    color: #6e4ff5;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
}

/* Header | dropdown-menu */
.navbar .dropdown-menu .list-menu li {
    margin: 15px 0 5px 0;
}

.navbar .dropdown-menu .list-menu i {
    font-size: 25px;
    padding: 8px;
    position: relative;
    margin-left: 6px;
    color: #414449;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
}

.navbar .dropdown-menu .list-menu i + span {

    color: #333;

}

.dropdown-menu {
    display: none;
    width: calc(100% + 15px);
    text-align: right;
    margin-top: 0;
    border-radius: 0;
    border: none;
    box-shadow: 0px 5px 6px #ddd;
    right: 0px;
}

.navbar > li:hover .dropdown-menu {
    display: flex;
}

.dropdown-menu .list-menu i::after {
    content: '';
    width: 40px;
    height: 38px;
    position: absolute;
    border-radius: 10px;
    transform: rotate(7deg);
    right: 0;
    background: rgba(96, 101, 106, 0.2);
    top: 1px;
}

/* Header | SearchBox */

/*.container-floud.SearchBox {*/
/*    background: #fce2e2;*/
/*}*/
.container-floud.SearchBox {
    background: #6e4ff5c9;
    background-image: url(../../images/navigation-background.png);
    background-attachment: fixed;
    background-size: 250px;
}
.container-floud.SearchBox > .container {

}
.container-floud.SearchBox > .container > .row > div{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    min-height: 500px;
    padding: 70px 0;
}
.container-floud.SearchBox > .container > * {
    display: block;
    width: 100%;
    text-align: center;
}

.search-category-homepage {
    background: white;
    padding: 20px;
    border-radius: 3px;
    width: 100%;
}
.search-category-homepage > form {
    justify-content: space-between;
}
.search-category-homepage input {
    width: 50%;
    border-radius: 3px;
    border: 1px solid #ebedf2;
    color: #666;
padding-right: 10px;
}
.search-category-homepage select {
    width: 25%;
    border-radius: 3px;
    border: 1px solid #ebedf2;
    color: #666;
    padding-right: 10px;
}
.search-category-homepage button {
    width: 20%;
    background: #6e4ff5;
    border: 1px solid #6e4ff5;
    border-radius: 3px;
    padding: 12px 1px;
    color: white;
    font-size: 14px;
}
.search-category-homepage button:hover {
background: white;
    color:#6e4ff5;
}
.container-floud.SearchBox p {
    font-size: 18px;
    color: #d3dde6;
    width: 100%;
}
.container-floud.SearchBox h1 {
    color: whitesmoke;
    font-weight: bold;
    line-height: 1.5;
}
/* Category */

.container-floud.CategoryBox {
    background: #f9fbff;
    padding: 40px 0px 80px 0px;
    text-align: center;
}
.categoryies-box {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.categoryies-box > article {
    background: white;
    width: 16.5%;
    margin: 1.5%;
    box-shadow: 0px 10px 8px #ddd;
    border-radius: 20px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
}
.categoryies-box > article .iconbox {
    font-size: 50px;
    color: white;
    height: 64px;
    padding-top: 4px;
    border-radius: 50px;
}

.categoryies-box > article:hover{
    /*top: -10px;*/
    box-shadow: 0px 10px 13px #bbb;
    position: relative;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
}
.categoryies-box > article .title{
    font-size: 14px;
    color: #666;
    font-weight: 400;
}
.categoryies-box > article > a {
    padding: 15px;
    display: block;
}

/*products-latest*/
.price.off {
    position: relative;
    bottom: -10px;
    font-size: 12px;
    width: 90px;
    text-align: center;
    display: inline-block;
    color: #ff8c8c !important;
    text-decoration: line-through;
}
.price.off::after {
    content: attr(data-off)" تومان ";
    position: absolute;
    right: 0;
    width: 90px;
    font-size: 15px;
    text-align: center;
    top: -22px;
    color: #00a651;
}
.container-floud.products-latest {
    padding: 40px 0 60px 0px;
    background: white;
}
.container-floud.products-latest  .products-box {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.container-floud.products-latest .products-box article{
    width: 31%;
    margin: 2% 1%;
    background: white;
    border-radius: 3px;
    /*box-shadow: 0 10px 15px #ccc;*/
    box-shadow: 0 0.03rem .3rem rgba(0,0,0,0.1),0 0.10rem 0.60rem rgba(0,0,0,0.1);
    padding: 10px 10px 10px 10px;
    -webkit-transition: all .8s;
    -moz-transition: all .8s;
    -o-transition: all .8s;
    -ms-transition: all .8s;
    transition: all .8s;
    position: relative;
    display: flex;
    flex-wrap: wrap;
}
.container-floud.products-latest .products-box article .information .view-product {
    background: #6e4ff5;
    border:1px solid #6e4ff5;
    color: white;
    font-size: 13px;
    padding: 5px 20px;
    border-radius: 25px;
    text-align: center;
    box-shadow: 0 0 5px #ccc;
}
.container-floud.products-latest .products-box article:hover .information .view-product{
    background: #FFF;
    color: #6e4ff5;
}
article.just_view_admin::after {
    content: 'غیرفعال است | نمایش فقط برای مدیریت';
    position: absolute;
    top: -20px;
    width: 100%;
    border-top: 3px solid tomato;
    border-right: 3px solid tomato;
    border-left: 3px solid tomato;
    text-align: center;
    font-size: 11px;
    background: #ffa50057;
    right: 0;
    padding: 4px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}
.container-floud.products-latest .products-box article:hover{
    position: relative;
    /*top: -10px;*/
    box-shadow: 0 0.10rem 0.20rem rgba(0,0,0,0.1),0 0.33rem 1.00rem rgba(0,0,0,0.20);
    -webkit-transition: all .8s;
    -moz-transition: all .8s;
    -o-transition: all .8s;
    -ms-transition: all .8s;
    transition: all .8s;
}
.container-floud.products-latest .products-box article img {
    /*height: 180px;*/
    width: 100%;
    background: #666;
    object-fit: cover;
    display: block;
}
.container-floud.products-latest .products-box article .information {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
}
.container-floud.products-latest .products-box article .information .description {
    color: #666;
    line-height: 1.8;
    font-size: 12px;
    text-align: justify;
    margin-bottom: 20px;
}
.container-floud.products-latest .products-box article .information > * {
    width: 100%;
}
.container-floud.products-latest .products-box article .information .info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 15px;
}
.container-floud.products-latest .products-box article .information .info .author, .container-floud.products-latest .products-box article .information .info .author > a {
    color: #666;
}
.container-floud.products-latest .products-box article .information .info .rate .starts {
    position: relative;
    top: 2px;
}
.container-floud.products-latest .products-box article .information .info .rate .starts i {
    color: #fba12c;
    font-size: 14px;
}
.container-floud.products-latest .products-box article .information .info .rate .vote {
    color: #666;
    margin-left: 10px;
}
.container-floud.products-latest .products-box article .information .buy-section {
    border-top: 1px solid #ccc;
    padding: 15px 0 10px 0;
    position: relative;
    display: block;
    position: relative;
    height: 50px;
    align-self: flex-end;
}
.container-floud.products-latest .products-box article .information .buy-section .price {
    color: #00a651;
    font-weight: bold;
    position: absolute;
    left: 0;
}
.container-floud.products-latest .products-box article .information .buy {
    position: absolute;
    left: 0;
    background: #00a651;
    color: white;
    padding: 5px 8px 0;
    font-size: 16px;
    border: 1px solid #00a651;
    cursor: pointer;
}
.container-floud.products-latest .products-box article .information .buy:hover{
    background: #0ccf6b;
    border: 1px solid #0ccf6b;

}
.container-floud.products-latest .products-box article .information a.view {
    color: #888;
    border: 1px solid #ccc;
    position: absolute;
    left: 40px;
    padding: 2.5px 30px;
}
.container-floud.products-latest .products-box article .information a.view:hover{
    color: white;
    background: #00a651;
    border: 1px solid #00a651;
}
.container-floud.products-latest .products-box article .information a.view:hover{
    color: white;
    background: #00a651;
    border: 1px solid #00a651;
}
.container.products-list aside .box-filter{
    position: relative;
}
.container.products-list aside .box-filter header .toggle {
    position: absolute;
    left: 15px;
    cursor: pointer;
}
.container.products-list aside .box-filter header.close-filter {
    border-bottom: navajowhite;
    padding-bottom: 0;
    margin-bottom: 0;
}
.container.products-list aside .box-filter header.close-filter + section.content{
    display: none;

}
/* statistics-latest */
.container-floud.statistics-latest {
    padding: 80px 0 40px 0;
    background: #f9f9f9;
}
.container-floud.statistics-latest .statistics-box {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
}
.container-floud.statistics-latest .statistics-box > article {
    width: 23%;
    background: white;
    box-shadow: 0 10px 15px #ccc;
    text-align: center;
    padding: 40px 0;
    margin: 0 1%;
}
.container-floud.statistics-latest .statistics-box > article  i{
    font-size: 50px;
}
.container-floud.statistics-latest .statistics-box > article .count {
    font-size: 40px;
    font-weight: bold;
    margin: 5px 0 7px;
}
.container-floud.statistics-latest .statistics-box > article .title {
    font-size: 14px;
    font-weight: 300;
}

/* Footer */
footer.container-fluid.footer {
    background: #35373a;
    color: white;
    padding: 40px 0 0 0;
}
footer.container-fluid.footer .copyright {
    padding: 20px;
    text-align: center;
    font-size: 12px;
    color: #ccc;
    /*border-top: 1px solid #666;*/
    /*margin-top: 15px;*/
}

footer.container-fluid.footer .social-media .instagram {
    background: radial-gradient(circle at 30% 107%, #b5ae6e 0%, #beb773 5%, #dd4f41 45%, #b32086 60%, #285AEB 90%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
    color: white;
    width: 100%;
    display: block;
    text-align: center;
    padding: 10px 0;
    margin-bottom: 10px;
}
footer.container-fluid.footer .social-media .telegram {
    background: #0070a8;
    /*-webkit-background-clip: text;*/
    /* Also define standard property for compatibility */
    /*background-clip: text;*/
    /*-webkit-text-fill-color: transparent;*/
    color: white;
    width: 100%;
    display: block;
    text-align: center;
    padding: 10px 0;
    margin-bottom: 10px;
}
footer.container-fluid.footer .social-media li:hover{
    opacity: .8;
}
footer.container-fluid.footer > .tags {
    background: #444;
    padding: 5px;
    font-size: 14px;
    margin-top: 10px;
}
footer.container-fluid.footer > .tags ul {
    margin: 0;
    display: flex;
    justify-content: space-between;
}
footer.container-fluid.footer > .tags ul li {
    background: #595959;
    padding: 4px 10px;
    border-radius: 1px;
    display: inline-block;
    font-size: 13px;
    width: 100%;
    margin: 4px;
    position: relative;
    text-align: center;
}
footer.container-fluid.footer > .tags ul li a{
    color: white;
    display: block;
    width: 100%;
    cursor: pointer;
}
footer.container-fluid.footer > .tags ul li:hover a{
    opacity: .8;
}
footer.container-fluid.footer header {
    margin-bottom: 20px;
}
footer.container-fluid.footer section p {
    font-size: 12px;
    line-height: 2;
    color: #aaa;
    text-align: justify;
}
footer.container-fluid.footer header h3 {
    font-size: 18px;
}
footer.container-fluid.footer ul.links li a {
    font-size: 14px;
    color: #b3b3b3;
}
footer.container-fluid.footer ul.links li a:hover {
    margin-right: 5px;
    color: #cfcfcf;
}
footer.container-fluid.footer ul.links li {
margin-bottom: 5px;
}

/*footer - tools*/
.tools-in-footer a.sitemap {
    color: #eee;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border: 1px solid #888;
    padding: 5px;
    height: 44px;
    font-size: 14px;
    background: #555;
    font-weight: 300;
}
.tools-in-footer a.sitemap i {
    font-size: 24px;
}

/* container-fluid.navgation */
.container-fluid.navgation {
    background: #a76bff;
    background-attachment: scroll;
    background-image: none;
    background-size: auto;
    padding: 10px;
    text-align: center;
    color: white;
    text-align: right;
    background-image: url(../../images/navigation-background.png);
    background-attachment: fixed;
    background-size: 250px;
    text-align: center;
}
.container-fluid.navgation.warning {
    background-color: #f7bc32;
}
.container-fluid.navgation.credit {
    background-color: #1497b5;
}
.container-fluid.navgation.danger {
    background-color: #f88;
}
.container-fluid.navgation h1 {
    font-size: 28px;
    font-weight: 500;
    margin-top: 10px;
    margin-bottom: 30px;
}
.container-fluid.navgation .breadcrumb {
    background: #00000040;
    padding: 5px 25px 8px 25px !important;
    margin-bottom: 15px;
    border-radius: 5px;
    box-shadow: none;
    font-size: 11px;
    width: auto;
    display: inline-block;
    margin-bottom: 0;
}

.container-fluid.navgation .breadcrumb a {
    color: white !important;
}
.container-fluid.navgation .breadcrumb li:last-child {
    margin: 0;
}
.container-fluid.navgation .breadcrumb li:first-child a {
    position: relative;
    top: 0px;
}
.breadcrumb-item.active {
    color: #c7cacc;
}
.breadcrumb-item + .breadcrumb-item {
    padding-left: 0;
    padding-right: 0;
}
.breadcrumb-item + .breadcrumb-item::before {
    float: none;
    display: inline-block;
    position: relative;
    top: -1px;
    padding: 0;
    margin: 0 7px;
    line-height: 1;
    vertical-align: middle;
    color: #fff;
    font-family: 'icon-custom' !important;
    content: "\e91c";
    transform: rotate(90deg);
}


.container-fluid.navgation .breadcrumb {

    background: #00000040;
    padding: 5px 25px 8px 25px !important;
    margin-bottom: 15px;
    border-radius: 5px;
    box-shadow: none;
    font-size: 12px;
    width: auto;
    display: inline-block;

}
.container-fluid.navgation .breadcrumb li {

    display: inline-block;

}
/* container.products-list */
.amount.free {
    color: #0ac487;
}
.amount.off-procut {
    position: relative;
    font-size: 15px;
    color: #ff9494;
    text-decoration: line-through;
    bottom: -15px;
    min-width: 100px;
    display: inline-block;
    text-align: center;
}
.amount.off-procut::after {
    content: attr(data-off);
    position: absolute;
    top: -40px;
    right: 0;
    color: #0ac487;
    font-size: 30px;
    width: 100%;
    text-align: center;
}
.container.products-list {
    padding: 45px 0;
}

.container.products-list  .products-box {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: -15px;
}

.container.products-list .products-box article {
    width: 31%;
    margin: 2% 1%;
    background: white;
    border-radius: 3px;
    /*box-shadow: 0 10px 15px #ccc;*/
    box-shadow: 0 0.03rem 0.06rem rgba(0,0,0,0.1),0 0.10rem 0.30rem rgba(0,0,0,0.1);
    padding: 10px;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    -ms-transition: all .5s;
    transition: all .5s;
    position: relative;
    display: flex;
    flex-wrap: wrap;
}
.container.products-list .products-box article:hover{
    position: relative;
    /*top: -10px;*/
    box-shadow: 0 0.10rem 0.20rem rgba(0,0,0,0.1),0 0.33rem 1.00rem rgba(0,0,0,0.20);
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    -ms-transition: all .5s;
    transition: all .5s;
}
.container.products-list .products-box article img {
    /*height: 150px;*/
    width: 100%;
    background: #666;
    object-fit: cover;
    display: block;
}
.container.products-list .products-box article .information {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
}
.container.products-list .products-box article .information > * {
    width: 100%;
}
.container.products-list .products-box article .information .description {
    color: #666;
    line-height: 1.8;
    font-size: 12px;
    text-align: justify;
    margin-bottom: 20px;
}
.container.products-list .products-box article .information .info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 15px;
}
.container.products-list .products-box article .information .info .author, .container.products-list .products-box article .information .info .author > a {
    color: #666;
}
.container.products-list .products-box article .information .info .rate .starts {
    position: relative;
    top: 2px;
}
.container.products-list .products-box article .information .info .rate .starts i {
    color: #fba12c;
    font-size: 14px;
}
.container.products-list .products-box article .information .info .rate .vote {
    color: #666;
    margin-left: 10px;
}
.container.products-list .products-box article .information .buy-section {
    border-top: 1px solid #ccc;
    position: relative;
    min-height: 40px;
    display: flex;
    padding-top: 8px;
    align-self: flex-end;
    justify-content: space-between;
}
.container.products-list > .row > .col-md-9, .container.products-list > .row > .col-md-3 {
    padding: 0 5px;
}
.container.products-list .products-box article .information .buy-section .price {
    color: #00a651;
    font-weight: bold;
    font-size: 14px;
    padding: 5px 0;
}


.container.products-list .products-box article .information .buy {
    position: absolute;
    left: 0;
    background: #00a651;
    color: white;
    padding: 5px 8px 0;
    font-size: 16px;
    border: 1px solid #00a651;
    cursor: pointer;
}
.container.products-list .products-box article .information .buy:hover{
    background: #0ccf6b;
    border: 1px solid #0ccf6b;

}
.container.products-list .products-box article .information a.view {
    color: #888;
    border: 1px solid #ccc;
    position: absolute;
    left: 40px;
    padding: 4px 25px;
    font-size: 14px;
}
.container.products-list .products-box article .information a.view:hover{
    color: white;
    background: #00a651;
    border: 1px solid #00a651;

}

.container.products-list aside .box-filter {
    background: #e6e6e6;
    border: 1px solid #d7d7d7;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 40px;
    margin-bottom: 20px;
}
.container.products-list aside .box-filter header {
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-weight: bold;
    color: #555;
}
.container.products-list aside .box-filter header i {
    font-size: 22px;
    vertical-align: -5px;
    margin-left: 7px;
}
.container.products-list aside .box-filter ul.list-filters li span {
    font-size: 14px;
    color: #777;
    vertical-align: 4px;
    margin-right: 5px;
}
.container.products-list aside .box-filter .list-filters {
    margin-bottom: -10px;
}
.container.products-list aside .box-filter .list-filters li {
    margin-bottom: 10px;
}

.container.products-list .products-box article .information .view-product {
    background: #6e4ff5;
    border:1px solid #6e4ff5;
    color: white;
    font-size: 13px;
    padding: 5px 20px;
    border-radius: 25px;
    text-align: center;
    box-shadow: 0 0 5px #ccc;
}
.container.products-list .products-box article:hover .information .view-product{
    background: #FFF;
    color: #6e4ff5;
}




/* .container.product-info  */
.container.product-info {
    padding: 45px 0;
}
.container.product-info .info-product-box {
    /*border: 1px solid #ccc;*/
    box-shadow: 0 0.03rem 10px #ccc;
    background: white;
    border-radius: 3px;
    margin-bottom: 15px;
    padding: 15px 25px;
    position: relative;
}
.container.product-info aside .price {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
    padding-top: 10px;
}
.container.product-info aside  .list-notic {
    margin-bottom: 25px;
}
.container.product-info aside .list-notic li {
    font-size: 12px;
    margin-bottom: 5px;
    position: relative;
    right: 15px;
}
.container.product-info aside .list-notic li::before {
    position: absolute;
    right: -15px;
    width: 8px;
    height: 8px;
    content: '';
    background: #6e4ff5;
    border-radius: 2px;
    top: 5px;
}
.btn-pay-product.bg-green-light.btn-block.text-cente.test-online {
    background: #3A6CFF;
    font-size: 14px;
    text-align: center;
    margin-top: -20px;
    direction: rtl;
    padding: 10px 0;
}
.container.interpretaion .send-comment {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 15px #ccc;
    margin-bottom: 25px;
    max-width: 500px;
    margin: 0 auto 30px;
}
.container.interpretaion .send-comment .rate-set-box {
    width: 200px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.container.interpretaion .send-comment .rate-set-box{
    border:none;
}
.container.interpretaion .send-comment .form-group {
    display: flex;
    flex-direction: column;
}
.container.interpretaion  .send-comment .rate-set-box .rate .starts i {
    top: -2px;
}
.container.interpretaion .send-comment textarea {
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 10px 15px;
}
.container.product-info aside .btn-pay-product {
    color: white;
    padding: 15px;
    width: 100%;
    border: none;
    border-radius: 4px;
}
.container.product-info aside .btn-pay-product:hover{
    opacity: .8;
}
.container.product-info aside .info-product-box i {
    color: #6e4ff5;
    font-size: 20px;
    vertical-align: -5px;
    margin-left: 5px;
}
.container.product-info aside .info-product-box span.subject {
    font-size: 14px;
    color: #6f7881;
}
.container.product-info aside .info-product-box.one .value {
    position: absolute !important;
    left: 30px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: unset !important;
}
.container.product-info aside .info-product-box .rate .starts {
    position: relative;
    top: 2px;
}
.container.product-info aside .info-product-box .rate .starts i {
    color: #fba12c;
    font-size: 16px;
    margin-right: -6px;
}
.container.product-info aside .info-product-box .rate .vote {
    color: #666;
    margin-left: 10px;
}
.container.product-info aside .info-product-box .reasonable-price-report {
    width: 100%;
    background: white;
    border: none;
    font-size: 12px;
    color: #888;
    margin-bottom: -5px;
    cursor: pointer;
    text-align: center;
    display: block;
}
.container.product-info aside .info-product-box .rate {
    position: absolute;
    left: 20px;
    top: calc(50% - 3px);
    transform: translateY(-50%);
}
.container.product-info aside .info-product-box .rate .vote {
    color: #666;
    margin-left: 10px;
    font-size: 13px;
    top: 4px;
    position: relative;
}
.container.product-info aside .info-product-box.info-product-box h2 {
    font-size: 16px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    padding-right: 0px;
    color: #666;
    border-bottom: 1px solid #ccc;
}
.container.product-info aside .info-product-box.info-product-box .info {
    display: grid;
    grid-template-columns: fit-content(120px) minmax(0, 1fr);
    column-gap: 10px;
    align-items: baseline;
    margin-bottom: 0;
    padding: 9px 0;
    font-size: 13px;
    color: #888;
    text-align: right;
    position: relative;
    border-bottom: 1px solid #f1f1f1;
}
.container.product-info aside .info-product-box.info-product-box .info:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.container.product-info aside .info-product-box.info-product-box .info .title {
    color: #8a929b;
    line-height: 1.85;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.container.product-info aside .info-product-box.info-product-box .value li::after {
    content: ',';
    margin-right: 3px;
}
.container.product-info aside .info-product-box.info-product-box .value li:last-child::after {
    display: none;
}
.container.product-info aside .info-product-box.info-product-box .value {
    position: static;
    right: auto;
    left: auto;
    top: auto;
    transform: none;
    display: block;
    color: #555;
    line-height: 1.85;
    overflow-wrap: anywhere;
    word-break: break-word;
}
@media (max-width: 420px) {
    .container.product-info aside .info-product-box.info-product-box .info {
        grid-template-columns: fit-content(100px) minmax(0, 1fr);
        column-gap: 8px;
    }
}
.container.product-info aside .info-product-box.info-product-box .value li {
    display: inline-block;
    margin-left: 5px;
}
.container.product-info aside .info-product-box.info-product-box .value li a,
.container.product-info aside .info-product-box.info-product-box .value li span {
    color: #666;
    font-size: 12px;
    font-weight: 300;
}

.container.product-info .information {
    /*border: 1px solid #ccc;*/
    box-shadow: 0 0.03rem 10px #ccc;
    border-radius: 3px;
    margin-top: 10px;
    background: white;
}

.container.product-info .information .tab-product {
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: flex-start;
}
.container.product-info .tab-product li {
    padding: 15px;
    margin: 0 20px -1px 0;
    font-size: 14px;
    font-weight: 500;
    color: #777;
    cursor: pointer;
}
.container.product-info .tab-product li.active{
    color: #6e4ff5;
    border-bottom: 1px solid #6e4ff5;
}
.container.product-info .information .content {
    padding: 0px 20px 15px;
}
.container.product-info .information .content p {
    font-size: 14px;
    line-height: 2.2;
    text-align: justify;
    color : #666;
}
/* Accessibility: darken low-contrast WYSIWYG palette colors used inside product content so they meet WCAG AA on the white background */
.container.product-info .information .content [style*="#2dc26b" i] {
    color: #1a7a44 !important;
}
.container.product-info .information .content [style*="#e67e23" i] {
    color: #a35400 !important;
}
.container.product-info .btn-pay-product {
    padding: 10px 50px;
    border: none;
    border-radius: 3px;
    right: 50%;
    color: white;
    position: relative;
    transform: translateX(50%);
    margin-top: 10px;
    margin-bottom: 30px;
}
.container.product-info .btn-pay-product:hover{
    opacity: .8;
}
.container.product-info .tab-content-product > div {
    display: none;
}
.container.product-info .tab-content-product > div.active{
    display: block;
}
.container.product-info  .tab-content-product img {
    max-width: 100%;
    height: auto;
    margin: 15px 0;
}
.container.product-info .information #info > .content ul li {
    position: relative;
    font-size: 13px;
    color: #555;
    margin-bottom: 7px;
    margin-right: 15px;
    line-height: 2.2;
}
.container.product-info .information #info > .content ul li::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: #a591ff;
    right: -15px;
    top: 5px;
    border-radius: 2px;
}
.container.product-info.test-online .information #info > .content ul li::after {
    background: #3A6CFF;
}
/* Ordered lists inside product content had no rules at all: `ul` is reset globally
   in public.css but `ol` is not, so it kept the browser default marker and the base
   16px body type while a sibling `ul` renders at 13px. The two list styles on the
   same page looked like they came from different sites. Match the `ul` typography
   and replace the default marker with a numbered badge that echoes its square
   bullet, so numbered and bulleted lists read as one family. */
.container.product-info .information #info > .content ol {
    padding: 0;
    margin: 0 0 15px;
    list-style: none;
    counter-reset: content-ol;
}
.container.product-info .information #info > .content ol li {
    position: relative;
    counter-increment: content-ol;
    font-family: iranyekan;
    font-size: 13px;
    color: #555;
    margin-bottom: 7px;
    margin-right: 28px;
    line-height: 2.2;
}
.container.product-info .information #info > .content ol li::before {
    content: counter(content-ol);
    position: absolute;
    right: -28px;
    top: 4px;
    width: 20px;
    height: 20px;
    background: #6e4ff5;
    color: #fff;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    line-height: 20px;
    text-align: center;
    /* Digits stay latin regardless of the browser's RTL marker localisation. */
    direction: ltr;
}
.container.product-info.test-online .information #info > .content ol li::before {
    background: #3A6CFF;
}
/* The bulleted list carries the same explicit family so both lists resolve the
   same font: `li` is absent from the global font-family selector in public.css
   and only inherits it from the wrapping div. */
.container.product-info .information #info > .content ul li {
    font-family: iranyekan;
}

/* ---------------------------------------------------------------------------
   Product description typography.

   `content_product` is author-written HTML dropped straight into #info, and up
   to now only its lists and images had rules: headings fell back to the global
   24px/21px with no colour or rhythm, links took the Bootstrap blue instead of
   the brand purple, and a table rendered completely unstyled. Next to a 14px
   justified body that reads as pasted text rather than a structured page, so
   the block below gives the description its own small type scale. Everything is
   scoped to `#info > .content` and keyed to the brand palette, with the blue
   variant for online tests mirroring the existing list-bullet rules.
   --------------------------------------------------------------------------- */
.container.product-info .information #info > .content h2 {
    font-family: iranyekan;
    font-size: 19px;
    font-weight: bold;
    color: #4a32c4;
    line-height: 1.9;
    margin: 30px 0 12px;
    padding-right: 12px;
    border-right: 4px solid #6e4ff5;
}
.container.product-info.test-online .information #info > .content h2 {
    color: #2c50c4;
    border-right-color: #3A6CFF;
}
.container.product-info .information #info > .content h3 {
    font-family: iranyekan;
    font-size: 16px;
    font-weight: bold;
    color: #3a3a3a;
    line-height: 1.9;
    margin: 24px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #eee;
}
.container.product-info .information #info > .content h4 {
    font-family: iranyekan;
    font-size: 14px;
    font-weight: bold;
    color: #555;
    line-height: 1.9;
    margin: 18px 0 6px;
}
/* The first heading sits directly under the tab bar (or the sample-image strip)
   and does not need the section gap that separates two headings. */
.container.product-info .information #info > .content > h2:first-child,
.container.product-info .information #info > .content > h3:first-child {
    margin-top: 0;
}
.container.product-info .information #info > .content strong {
    color: #333;
    font-weight: bold;
}
.container.product-info .information #info > .content a {
    color: #6e4ff5;
    font-weight: bold;
    border-bottom: 1px dotted #b3a3ff;
}
.container.product-info .information #info > .content a:hover {
    color: #4a32c4;
    border-bottom-color: #6e4ff5;
}
.container.product-info.test-online .information #info > .content a {
    color: #3A6CFF;
    border-bottom-color: #a8bfff;
}

/* Wrapper the description HTML puts around a table so a wide spec/subscale
   table scrolls inside the column instead of pushing the page sideways. */
.container.product-info .information #info > .content .table-scroll {
    overflow-x: auto;
    margin: 15px 0;
}
.container.product-info .information #info > .content table {
    width: 100%;
    border-collapse: collapse;
    font-family: iranyekan;
    font-size: 13px;
    color: #555;
}
.container.product-info .information #info > .content table th {
    background: #f4f1ff;
    color: #4a32c4;
    font-weight: bold;
    text-align: right;
    padding: 9px 12px;
    border: 1px solid #e4ddff;
    white-space: nowrap;
}
.container.product-info.test-online .information #info > .content table th {
    background: #eef3ff;
    color: #2c50c4;
    border-color: #d9e4ff;
}
.container.product-info .information #info > .content table td {
    padding: 9px 12px;
    border: 1px solid #eee;
    line-height: 2;
    text-align: right;
}
.container.product-info .information #info > .content table tbody tr:nth-child(even) td {
    background: #fafafa;
}

/* Callout for the one fact worth pulling out of the prose — usually the
   psychometrics line or what ships in the download. */
.container.product-info .information #info > .content .note,
.container.product-info .information #info > .content blockquote {
    background: #f7f5ff;
    border-right: 4px solid #6e4ff5;
    border-radius: 4px;
    padding: 12px 15px;
    margin: 18px 0;
    font-size: 13px;
    line-height: 2.1;
    color: #555;
}
.container.product-info.test-online .information #info > .content .note,
.container.product-info.test-online .information #info > .content blockquote {
    background: #f2f6ff;
    border-right-color: #3A6CFF;
}
.container.product-info .information #info > .content .note p,
.container.product-info .information #info > .content blockquote p {
    margin-bottom: 0;
    font-size: 13px;
    text-align: right;
}
.container.product-info .information #info .box-images {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    border-bottom: 3px solid #eee;
    padding-bottom: 8px;
    margin-bottom: 8px;
    padding-top: 25px;
    position: relative;
}
.container.product-info .information #info .box-images::after {
    content: attr(data-title);
    position: absolute;
    top: 0;
    right: 50%;
    font-weight: bold;
    color: #666;
    font-size: 14px;
    text-align: center;
    width: 250px;
    border-bottom: 3px solid #eee;
    padding-bottom: 3px;
    transform: translate(50%);
}
.container.product-info .information #info .box-images img {
    width: 24%;
    border: 3px solid #f1f1f1;
    border-radius: 5px;
    margin: 7px 0;
    box-shadow: 2px 5px 3px #aaa;
    cursor: pointer;
    object-fit: contain;
}
.container.product-info .information #info .box-images img:hover{
    transform: scale(.95);
}
.container-floud.products-latest .products-box article .information h2 {
    font-size: 16px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
    margin-bottom: 10px;
    line-height: 1.7;
}

.container.products-list .products-box article .information h2 {
    font-size: 14px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
    margin-bottom: 10px;
    line-height: 1.7;
}

.container.product-info .tab-content-product .comment-box {
    background: #f5f5f5;
    padding: 15px;
    position: relative;
    border-radius: 3px;
    margin-bottom: 15px;
    min-height: 130px;
}
.container.product-info .tab-content-product .comment-box.replay {
    background: #fff !important;
    margin-top: 50px;
    box-shadow: 0 0 5px #bdbdbd;
}
.container.product-info .col-md-8 > img {
    min-height: 310px;
    background: #888;
    border: none;
    width: 100%;
    display: block;
}
.container.product-info .tab-content-product .comment-box img {
    width: 80px;
    height: 80px;
    background: #ccc;
    border-radius: 50px;
    position: absolute;
    /*top: 25px;*/
    top: 0px;
    right: 15px;
}

.container.product-info .tab-content-product  .comment-box > .details {
    display: inline-block;
    width: calc(100% - 80px);
    position: relative;
    right: 85px;
}
.container.product-info .tab-content-product  .comment-box > .details header {
    position: relative;
}

.container.product-info .tab-content-product  .comment-box > .details header .rate .starts {
    position: relative;
    top: 2px;
}
.container.product-info .tab-content-product  .comment-box > .details header .rate .starts i {
    color: #fba12c;
    font-size: 16px;
    margin-right: -3px;
}
.container.product-info .tab-content-product  .comment-box > .details header .rate .vote {
    color: #666;
    margin-left: 10px;
}

.container.product-info .tab-content-product  .comment-box > .details header .rate {
    display: inline-block;
    position: relative;
    right: 12px;
}
.container.product-info .tab-content-product  .comment-box > .details header .rate .vote {
    color: #666;
    margin-left: 10px;
    font-size: 13px;
    top: 4px;
    position: relative;
}

.container.product-info .tab-content-product  .comment-box > .details header .datetime {
    position: absolute;
    left: 0;
    font-size: 13px;
    color: #666;
    top: 3px;
    left: 15px;
}
.container.product-info .tab-content-product  .comment-box > .details header > .author {
    color: #555;
    margin-right: 15px;
}
.container.product-info .tab-content-product  .comment-box > .details .content p {
    font-size: 12px !important;
    text-align: justify;
    margin: 0;
}

.container.product-info .tab-content-product  .send-comment {
    margin-top: 50px;
}
.container.product-info .tab-content-product  .send-comment h6 {
    margin-bottom: 8px;
}
.container.product-info .tab-content-product  .form-group > label {
    display: block;
    color: #555;
}
.container.product-info .tab-content-product  .form-group input {
    border: 1px solid #ccc;
    width: 100%;
    padding: 5px;
    border-radius: 3px;
    height: 40px;
}
.container.product-info .tab-content-product .form-group textarea {
    width: 100%;
    border-radius: 3px;
    border: 1px solid #ccc;
    padding: 8px;
    color: #555;
}
.container.product-info .info.m-b-10 {
    margin-bottom: 0 !important;
}

.send-comment .rate-set-box {
    height: 40px;
    width: 100%;
    border: 1px solid #ccc;
    text-align: center;
    border-radius: 3px;
    position: relative;
}
.send-comment .rate-set-box .rate .starts {
    position: relative;
    top: 2px;
}
.send-comment .rate-set-box .rate .starts i {
    color: #9b9b9b;
    font-size: 24px;
    margin-right: 5px;
    position: relative;
    top: 2px;
    cursor: pointer;
}
.send-comment .rate-set-box .rate .starts i.active {
    color: #fba12c;
}
.send-comment .rate-set-box .rate .vote {
    color: #666;
    margin-left: 10px;
}

.send-comment .rate-set-box .rate {
    position: absolute;
    left: 50%;
    top: calc(50% - 3px);
    transform: translate(-50% , -50%);
}
.send-comment .rate-set-box .rate .vote {
    color: #666;
    margin-left: 10px;
    font-size: 13px;
    top: 4px;
    position: relative;
}
.send-comment .btn-send-comment {
    background: #00c6d1;
    color: white;
    padding: 8px 35px;
    border: none;
    border-radius: 3px;
    left: calc(-100% + 125px);
    display: block;
    position: relative;
}
.send-comment .btn-send-comment:hover {
opacity: .8;
}
.comment-set-old {
    text-align: center;
    padding: 14px;
    background: #ffa5006b;
    color: #555;
    margin-bottom: 20px;
}

#faqs {
    padding: 10px 20px;
}
#faqs .faq {
    background: #f6f6f6;
    padding: 10px 5px;
    border-radius: 3px;
    margin-bottom: 15px;
}
#faqs .faq header {
    position: relative;
    padding: 4px 0 10px 0;
    cursor: pointer;
}
#faqs .faq header h3 {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: calc(100% - 90px);
    font-size: 16px;
    color: #555;
    position: relative;
    top: 3px;
    padding-right: 15px;
}
#faqs .faq header i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}
#faqs .faq header i.up {
    transform: rotate(180deg) translateY(calc(-50% - -15px));
}
#faqs .faq .content {
    height: 0;
    overflow: hidden;
    padding: 0 15px;
}
#faqs .faq.active .content {
    height: unset;

}
#faqs .faq .content p {
    font-size: 14px;
    line-height: 2.2;
    text-align: justify;
    color: #666;
    margin-bottom: 0;
}


/* Aboute | Page */
.about section{
    margin: 30px 0;
}
.about img{
    margin-bottom: 20px;
}
.about p{
    text-align: justify;
}


/* Categories | list-Product*/
.products-list.categories .products-box article{
    width: 23%;
    margin: 1.5% 1%;
}

/* Contact-Us */
.container.contact-us > .box {
    border: 1px solid #ccc;
    margin: 30px 0;
    padding: 15px;
    background: white;
}

.container.contact-us > .box  form {
    display: flex;
    flex-direction: column;
}
.container.contact-us > .box h6 {
    color: #6e4ff5;
    font-size: 15px;
    margin-bottom: 10px;
}
.container.contact-us > .box  form  input, .container.contact-us > .box  form textarea {
    background: #f0f2f7;
    border: 1px solid #ccc;
    padding: 7px;
    font-size: 14px;
    border-radius: 3px;
    margin-bottom: 11px;
}
.container.contact-us > .box .box-info {
    padding: 25px 60px;
}
.container.contact-us .box ul.info-contact-us li i {
    color: #6e4ff5;
    font-size: 30px;
    vertical-align: -12px;
    margin-left: 7px;
}
.container.contact-us  .box ul.info-contact-us li {
    margin: 30px 0;
    color: #777;
}


/* User Panel */
.container.user-panel {
    padding: 45px 0;
}
.container.user-panel aside .box-side {
    background: #e6e6e6;
    border: 1px solid #d7d7d7;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 40px;
}
.container.user-panel aside .box-side header {
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-weight: bold;
    color: #555;
}
.container.user-panel aside .box-side header i {
    font-size: 22px;
    vertical-align: -5px;
    margin-left: 7px;
}
.container.user-panel aside .list-panel li {
    margin-bottom: 12px;
    font-size: 13px;
    color:#666;
    cursor: pointer;
}
.container.user-panel aside .list-panel li:hover i {
    color: #00c6d1;
}
.container.user-panel aside .list-panel li.active {
    color: #00c6d1;
}
.container.user-panel aside .list-panel li i {
    vertical-align: -3px;
    margin-left: 4px;
    font-size: 16px;
}
.container.user-panel #profile input  , .container.user-panel #profile select {
        background: #fff;
        border: 1px solid #ccc;
        padding: 4px 10px;
        width: 100%;
        border-radius: 3px;
        font-size: 18px;
    }
.container.user-panel #profile input[disabled] {
    cursor: no-drop;
}
.container.user-panel #comments i {
    font-size: 18px !important;
}
.container.user-panel #comments a {
    font-size: 14px;
}
.container.user-panel #comments td:first-child {
    font-size: 14px;
    direction: ltr;
}
#request_file {
    width: 100%;
    max-width: 600px;
    background: white;
    padding: 20px;
    margin-top: 30px;
    box-shadow: 0 0 10px #ccc;
}
#request_file_box h5 {
    color: #a66bfc;
    font-size: 18px;
    padding: 20px;
    box-shadow: 0 0 10px #ccc;
    max-width: 800px;
    line-height: 2;
    text-align: center;
    border: 3px solid;
    font-weight: bold;
}
#request_file .alert.alert-errors {
    color: #ec4949 !important;
    font-size: 14px;
    font-weight: bold;
}
#request_file .alert.alert-errors li {
    margin-bottom: 8px;
}
#request_file label {
    font-size: 16px;
    margin-bottom: 0 !important;
    width: 100%;
    display: block;
}
.list-file-buy {
    background: white;
    padding: 20px !important;
}
.buy_product .list-file-buy li {
    background: #fff;
    padding: 6px 10px;
    position: relative;
    min-height: 90px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    border-radius: 5px;
}
.buy_product .list-file-buy li:last-child{
    border-bottom: none;
}
.buy_product .list-file-buy li:hover {
    box-shadow: 0 0 10px #dedede;
}
.buy_product .list-file-buy li:hover .subject a{
    color : #6e4ff5;
}
.buy_product .list-file-buy li:hover .subject i{
    color:#555;
}
.buy_product .list-file-buy li .download {
    position: absolute;
    left: 4px;
    padding: 4px;
    font-size: 12px;
    top: 8px;
    width: 140px;
}
.buy_product .list-file-buy li .subject {

    width: calc(100% - 140px);
    position: relative;
    display: flex;
    align-items: center;
    top: 50%;
    transform: translateY(50%);
}
.buy_product .list-file-buy li .subject a {
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: calc(100% - 100px);
    position: relative;
    font-size: 14px;
    color:#555;
}
.buy_product .list-file-buy li .subject i {
    font-size: 40px;
    margin-left: 15px;
    color : #6e4ff5;
}
.buy_product .list-file-buy li .download .button {
    position: relative;
    display: flex;
    justify-content: space-around;
    background: #00c6d1;
    color: white;
    padding: 9px 0;
    margin-bottom: 4px;
    border-radius: 3px;
    align-items: center;
    font-size: 14px;
    border:1px solid #00c6d1;
}
.buy_product .list-file-buy li .download .button:hover {
    border:1px solid #00c6d1;
    color: #00c6d1;
    background: white;
}
.buy_product .list-file-buy li .download .button i{
    font-size:24px
}
.buy_product .list-file-buy li .download div.date {
    direction: ltr !important;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    color : #777
}

.container.user-panel #transactions  tbody tr {
    border-top: 1px solid #ccc;
}
.container.user-panel #transactions button {
    font-size: 14px;
    padding: 5px 2px 7px;
}
.container.user-panel #transactions td , #transactions th{
    padding: 12px 0;
    font-size: 14px;
    color:#666;
}
.container.user-panel #transactions  td:nth-child(2) ,#buy_product #transactions  th:nth-child(2){
    text-align: right;
}
.container.user-panel #transactions tbody td:nth-child(1){
    direction: ltr;
}
.container.user-panel #transactions tbody td .price {
    margin-left: 5px;
}
.container.user-panel #transactions tbody td a{
    font-weight: 500;
    color : #444
}
.container.user-panel #transactions th{
    color:#11cad4;
}


/* Shop Cart Page */
.container.shop .shop_cart {

    background: white;
    margin: 30px 0;
    box-shadow: 0 0 20px #ccc;
    border-radius: 4px;
    padding: 50px;
    text-align: center;
    width: 70%;
    right: 15%;
    position: relative;

}
.container.shop .shop_cart h3 {
    color: #6f7881;
    margin: 15px 0;
    font-weight: bold;
}
.container.shop .shop_cart p {
    color: #6f7881;
}
.container.shop .shop_cart ul.price {
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
}
.container.shop .shop_cart ul.price li {
    border-bottom: 1px solid #ccc;
    padding: 10px;
    position: relative;
}
.container.shop .shop_cart ul.price li:last-child{
    border-bottom: 0;
}
.container.shop .shop_cart ul.price li{
    border-bottom: 1px solid #ccc;
    padding: 10px;
    position: relative;
    min-height: 50px;
}

.container.shop .shop_cart ul.price li .value {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    width: 150px;
    color: #40c185;
}
.container.shop .shop_cart ul.price li .value.credit.code {
    color: #509bec !important;
}
.container.shop .shop_cart ul.price li .value.discount{
    color:#d81515;
    direction: rtl;

}
.container.shop .shop_cart ul.price li .value.discount.system{
    color: #ff8c00;
}
.container.shop .shop_cart ul.price li .title {
    position: relative;
    text-align: right;
    width: calc(100% - 140px);
    display: inline-block;
    right: -60px;
    color: #60676f;
}
.container.shop .shop_cart form > input {
    width: 100%;
    background: #f0f2f7;
    border: 1px solid #ccc;
    margin-bottom: 15px;
    padding: 10px;
    font-weight: bold;
    border-radius: 4px;
    text-align: center;
}
.container.shop .shop_cart form > input.error {
    border: 1px solid red;
    background: #fbf3f3;
}
.container.shop .shop_cart form > span {
    margin-bottom: 20px;
    display: block;
    margin-top: -10px;
    font-size: 14px;
}
.container.shop .shop_cart span.notic {
    background: gold;
    width: 100%;
    display: block;
    margin-bottom: 0px;
    color: #555;
    padding: 10px;
    font-size: 14px;
    border-radius: 5px;
    border: 2px dashed #554;
}
.container.shop .shop_cart  .submit_discount{
    position: relative;
}
.container.shop .shop_cart  .submit_discount > button {
    background: #40c185;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 5px;
    font-size: 24px;
    left: 0;
    width: 100%;
    display: inline-block;
    top: 0;
}
.container.shop .shop_cart form .discount {
    background: #f0f2f7;
    border-radius: 5px;
    overflow: hidden;
    width: 100%;
    position: relative;
    min-height: 46px;
}
.container.shop .shop_cart .discount button {
    background: #6f7881;
    color: white;
    border: none;
    padding: 14px 25px;
    font-size: 12px;
    position: absolute;
    left: 0;

}
.container.shop .shop_cart .discount input {
    width: calc(100% - 100px);
    position: absolute;
    right: 0;
    padding: 4px;
    font-size: 14px;
    height: 46px;
    border: none;
    background: transparent;
    color: #666;
    text-align: center;
}


/* Callback Page*/

.container-fluid.navgation.success {
    background: #40c185;
    background-attachment: scroll;
    background-image: none;
    background-size: auto;
    padding: 10px;
    text-align: center;
    color: white;
    text-align: right;
    background-image: url(../../images/navigation-background.png);
    background-attachment: fixed;
    background-size: 250px;
    text-align: center;
}
.container-fluid.navgation.error {
    background: #fb6e7b;
    background-attachment: scroll;
    background-image: none;
    background-size: auto;
    padding: 10px;
    text-align: center;
    color: white;
    text-align: right;
    background-image: url(../../images/navigation-background.png);
    background-attachment: fixed;
    background-size: 250px;
    text-align: center;
}
.container-fluid.navgation.cancell {
    background: #fbad4a;
    background-attachment: scroll;
    background-image: none;
    background-size: auto;
    padding: 10px;
    text-align: center;
    color: white;
    text-align: right;
    background-image: url(../../images/navigation-background.png);
    background-attachment: fixed;
    background-size: 250px;
    text-align: center;
}


/* The tracking code is a gateway string, not a number: Zibal and Saman return
   40+ characters. The box used to be a fixed 250px and the code ran straight out
   of it, so it now grows with its content up to the column width and the code
   itself wraps instead of overflowing. */
.container.callback .info {
    background: white;
    margin: 20px auto;
    text-align: center;
    width: fit-content;
    min-width: 250px;
    max-width: 100%;
    border: 3px solid #ddd;
    border-radius: 5px;
}
.container.callback .info > div:first-child{
border-bottom: 1px solid #ddd;
}

.container.callback .info > div {
    padding: 10px;
    font-size: 18px;
    font-weight: 500;
    color: #555;
}

.container.callback .info .value {
    direction: ltr;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 15px;
    line-height: 1.9;
    word-break: break-all;
}

/* Click-to-copy: the code is the one thing a buyer needs to keep from this page. */
.container.callback .info .value.is-copyable {
    cursor: pointer;
    transition: background .15s, color .15s;
}
.container.callback .info .value.is-copyable:hover {
    background: #f4f2ff;
    color: #6e4ff5;
}
.container.callback .info .value .copy-hint {
    display: block;
    direction: rtl;
    margin-top: 4px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    color: #9a97ad;
}
.container.callback .info .value.is-copied {
    background: #e6f7ef;
    color: #2f9e6f;
}


/* --------------------------------------------------------------------------
   Download panel. What the buyer just paid for gets a titled frame of its own.
   Before this the cards were an unlabelled strip wedged under the banner, with
   the far louder cross-sell block right beneath them — the eye landed on the
   upsell and buyers reported missing their file on first look.
   -------------------------------------------------------------------------- */
.container.callback .download-panel {
    background: #ffffff;
    border: 1px solid #e6e2fb;
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(75, 58, 156, 0.10);
    margin: 26px 20px 0;
    direction: rtl;
    overflow: hidden;
}

.container.callback .download-panel-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px 16px;
}

.container.callback .download-panel-check {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e8f8f0;
    color: #1f9d63;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px rgba(64, 193, 133, 0.12);
}

.container.callback .download-panel-heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.container.callback .download-panel-heading strong {
    font-size: 17px;
    font-weight: 800;
    color: #1f2937;
    line-height: 1.6;
}

.container.callback .download-panel-count {
    font-size: 12px;
    color: #6b7280;
}

.container.callback .download-panel-body {
    background: #faf9ff;
    border-top: 1px solid #efecfd;
    border-bottom: 1px solid #efecfd;
    padding: 6px 0;
}

.container.callback .download-panel-hint {
    margin: 0;
    padding: 13px 20px 15px;
    font-size: 12px;
    line-height: 1.9;
    color: #8a8f98;
    text-align: right;
}

/* Whatever follows the panel — today the cross-sell — is a separate section. */
.container.callback .download-panel + .promo-section {
    margin-top: 42px;
    padding-top: 34px;
    border-top: 1px dashed #dcd8ee;
}

/* Inside the panel the frame is already drawn, so a card keeps only enough
   edge to separate it from the next document. */
.container.callback .download-panel .box-download {
    margin: 8px 12px;
    background: #ffffff;
    border-color: #e9e5fb;
    box-shadow: none;
}

.container.callback .download-panel .box-download:hover {
    box-shadow: 0 8px 18px rgba(75, 58, 156, 0.12);
}

.container.callback .box-download {
    --download-accent: #6e4ff5;
    --download-accent-strong: #7b61ff;
    --download-accent-rgb: 110, 79, 245;
    --download-surface: #f4f2ff;
    background: linear-gradient(135deg, #ffffff 0%, var(--download-surface) 100%);
    margin: 10px 20px;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px solid rgba(var(--download-accent-rgb), 0.18);
    box-shadow: 0 6px 16px rgba(75, 58, 156, 0.10);
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    min-height: 78px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: download-card-reveal 0.45s ease both;
    animation-delay: var(--download-delay, 0s);
}

.container.callback .box-download::before {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    left: -60px;
    bottom: -90px;
    background: radial-gradient(circle at center, rgba(var(--download-accent-rgb), 0.12), rgba(var(--download-accent-rgb), 0));
    pointer-events: none;
}

.container.callback .box-download::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--download-accent) 0%, var(--download-accent-strong) 100%);
    opacity: 0.6;
}

.container.callback .box-download:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px rgba(75, 58, 156, 0.18);
}

.container.callback .box-download .download-body {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
    min-width: 0;
}

.container.callback .box-download .download-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--download-accent) 0%, var(--download-accent-strong) 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 19px;
    box-shadow: 0 6px 12px rgba(var(--download-accent-rgb), 0.24);
    flex-shrink: 0;
}

.container.callback .box-download .subject {
    text-align: right;
    flex: 1;
    min-width: 0;
}

.container.callback .box-download .subject .download-title,
.container.callback .box-download .subject a {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.7;
    color: #1f2937 !important;
    display: block;
}

.container.callback .box-download .download-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
    flex-wrap: wrap;
}

.container.callback .box-download .download-badge {
    background: rgba(var(--download-accent-rgb), 0.1);
    border: 1px solid rgba(var(--download-accent-rgb), 0.3);
    color: #4c3fb0;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.4px;
}

.container.callback .box-download .download-size {
    font-size: 10px;
    color: #6b7280;
}

.container.callback .box-download .download {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    /* One button per format, so the row has to wrap on narrow screens. */
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.container.callback .box-download .download a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--download-accent) 0%, var(--download-accent-strong) 100%);
    padding: 12px 18px;
    color: white;
    font-size: 12px;
    font-weight: 700;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 10px 18px rgba(var(--download-accent-rgb), 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    white-space: nowrap;
    min-width: 120px;
    justify-content: center;
}

.container.callback .box-download .download a:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 24px rgba(var(--download-accent-rgb), 0.36);
}

.container.callback .box-download .download a:active {
    transform: translateY(0);
    box-shadow: 0 8px 14px rgba(var(--download-accent-rgb), 0.24);
}

.container.callback .box-download .download a i {
    font-size: 16px;
}

/* --------------------------------------------------------------------------
   Format buttons. A document ships in one or more formats and each button
   carries its own colour (set inline from App\Enums\FileFormat), so the buyer
   tells PDF from Word before reading the label. Every button keeps the same
   weight — they are all paid content, only the format differs.
   -------------------------------------------------------------------------- */
.container.callback .box-download .download a .download-format-label {
    font-size: 14px;
    letter-spacing: .2px;
}

.container.callback .box-download .download a .download-size {
    font-size: 11px;
    font-weight: 500;
    opacity: .75;
}

.container.callback .box-download .download a {
    min-width: 136px;
    /* The storefront underlines links; these read as buttons, not links. */
    text-decoration: none;
}

.container.callback .box-download .download a:hover,
.container.callback .box-download .download a:focus {
    text-decoration: none;
    color: #fff;
}

@keyframes download-card-reveal {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.container.callback  .download-container .send-comment {
    background: white;
    margin: 50px 20px;
    max-width: 600px;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 5px 5px 15px #ccc;
    margin: 30px auto 20px;
}
.container.callback  .download-container {
    margin: 0 20px;
}
.container.callback  .download-container .send-comment  textarea {
    width: 100%;
    border-radius: 3px;
    border: 1px solid #ccc;
    padding: 8px;
    color: #555;
}

/* Error */
.error-laravel {
    display: flex;
    justify-content: center;
    align-content: center;
    padding:15px
}


section.container-fluid.navgation.just_view_admin {
    background-color: #fd875b;
}
.tools-admin {
    position: fixed;
    bottom: 0;
    height: 70px;
    background: linear-gradient(0deg, #72baef 0%, #5d77fb2e );
    right: 0;
    width: 100%;
    /* box-shadow: 0px -5px 15px #ccc; */
    display: flex;
    justify-content: center;
    align-items: center;
}

a.support_telegram {
    text-decoration: none !important;
    cursor: pointer;
    width: 100%;
    padding: 10px 0;
    border-radius: 5px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
a.support_telegram img{
    margin-left: 15px;
    margin-right: -5px;
}
a.support_telegram_static {
    display: flex;
    flex-direction: column;
    font-size: 8px;
    background: white;
    box-shadow: 0 0 1px;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 10px;
    left: 10px;
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.3s ease;
}


#reasonable-price-report .close {
    margin-left: 0 !important;
}
#reasonable-price-report  .modal-header h5 {
    font-size: 14px;
}
#reasonable-price-report label {
    font-size: 14px !IMPORTANT;
    color: #888;
}


.container-floud.products-latest.box-suggests-online-test {
    padding: 0 0 1px 0;
    border-radius: 8px;
    box-shadow: 0 0 15px #ccc;
    border-top: 10px solid #3A6CFF;
    margin-top: 40px;
    margin-bottom: 25px;
}
.container-floud.products-latest.box-suggests-online-test > h2 {
    padding: 20px 20px 10px 20px;
    font-size: 20px !important;
    font-weight: bold;
    color: #3A6CFF;
    margin-bottom: 0;
}
.container-floud.products-latest.box-suggests-online-test > p{
    padding: 5px 20px;
    color: #777;
}
.container-floud.products-latest .products-box article .information .info {
    border: none !important;
}
.container-floud.products-latest .products-box article .information .info  .author {
    border: none !important;
    font-size: 13px !important;
}
.container-floud.products-latest .products-box article .information .info{
    margin: 0;
}


.box.product_test {
    box-shadow: 0 0 10px 1px #0000ff94 !important;
    border-radius: 10px !important;
    border-bottom: 8px solid blue;
}

@media only screen and (max-width: 768px) {
    .container.product-info .col-md-8 > img {
        min-height: auto;
    }
    .search-box-mobile .searchBox {
        width: 100% !important;
    }
    .row.d-mobile.search-box-mobile {
        width: 82%;
        margin: 5px 4% 0 ;
    }
    header.upSection > nav:first-child {
        padding: 7px 0 !important;
    }
    .container.shop .shop_cart form > input {
        font-size: 12px;
    }


        .container.shop .shop_cart form .submit_discount > button {

            padding: 8px;
            font-size: 18px;
            font-weight: 600;

        }
}