﻿@import url("../../reset.css");
@import url('../../fonts.css');
@import url('../../../Script/menu/style.css');
@import url('footer.css');
@import url('../../../Script/Swiper/swiper-bundle.min.css');
@import url('banner.css');
@import url('pager.css');
@import url('product.css');
@import url('pcat.css');
@import url('pdetail.css');
@import url('sc.css');
@import url('ship.css');
@import url('login.css');
@import url('profile.css');
@import url('../../../Script/Tooltip/tooltip.css');
@import url('../../../Script/Modal/jquery.modal.min.css');
@import url('../../../Script/Toast/jquery.toast.min.css');
@import url('../scombo.css');
@import url('../../../Script/Alert/main.css');
@import url('../../gridView2.css');

body {
    background: #f6f6f6;
    font-family: IranSans;
    font-size: 10pt;
}

.page-wrapper {
    position: relative;
    direction: rtl;
}

@media only screen and (max-width: 2100px) {
    .master {
        padding: 0 5%;
    }
}
@media only screen and (min-width: 2100px) {
    .head1 {
        padding: 13px 0 !important;
    }
}

.master {
    max-width: 2000px;
    margin: 0 auto;
}

.header {
    z-index: 200;
    padding-bottom:10px;
}
.head1 {
    padding: 13px 5%;
    position: relative;
    display: flex;
}
.Logo {
    display: block;
    width: 190.48px;
    height: 64px;
}

    .Logo img {
        width: 190.48px;
        height: 64px;
    }
@media only screen and (max-width: 760px) {
    .Logo img {
        width: 150px;
        height: 51.02px;
    }

    .head1 {
        padding: 8px 3% 1px 3%;
    }
}
@media only screen and (max-width: 400px) {
    .FullName span {
        display: none;
    }
}
@media only screen and (max-width: 300px) {
    .Logo img {
        display: none;
    }
    .CHldr{
        width:100% !important;
    }
}
.Menu {
    border: 1px solid #d9e4ea;
    background-color: #fff;
    position: relative;
    z-index: 100;
}

.LogoH {
    width: 50%;
}

.CHldr {
    width: 50%;
    padding-top: 10px;
}

.Icon {
    font-family: 'Font Awesome 6 Pro';
}

.CartBtn {
    position: relative;
    padding: 0 8px;
    background-color: #fff;
    border-radius: 3px;
    overflow: unset;
    height: 42px;
    cursor: pointer;
    color: #666;
    font-size: 16pt;
    float: left;
    display: inline-block;
    line-height: 30pt;
    margin-right: 30px;
    border:1px solid #fff;
}

.CartIco {
    font-family: IranSans;
    position: absolute;
    border-radius: 50%;
    background-color: #2dc08d;
    color: #fff;
    width: 20px;
    height: 20px;
    top: -11px;
    right: -11px;
    line-height: 22px;
    font-size: 11px;
    text-align: center;
}

.clear {
    clear: both;
}

.FullName {
    float: left;
    cursor: pointer;
    padding: 10px;
    position: relative;
}

    .FullName > a {
        display: inline-block;
    }

        .FullName > a::after {
            content: '';
            font-family: 'Font Awesome 6 Pro';
            position: absolute;
            top: 12px;
            left: -10px;
        }

        .FullName > a::before {
            content: '';
            font-family: 'Font Awesome 6 Pro';
            position: absolute;
            top: 12px;
            right: -10px;
            font-size: 12pt;
        }

.Fade {
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.Unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.CMenu {
    position: absolute;
    width: 200px;
    background: #fff;
    z-index: 201;
    top: 45px;
    left: -10px;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 20px #ccc;
    list-style: none;
    padding: 0;
    margin: 0;
    display:none;
}

    .CMenu:after, .CMenu:before {
        bottom: 100%;
        left: 30%;
        border: solid transparent;
        content: "";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .CMenu:after {
        border-color: rgba(136, 183, 213, 0);
        border-bottom-color: #fff;
        border-width: 10px;
        margin-left: -10px;
    }

    .CMenu:before {
        border-color: rgba(255, 225, 255, 0);
        border-bottom-color: #ccc;
        border-width: 12px;
        margin-left: -12px;
    }
.CMenu li{
    list-style:none;
    padding:0;
    margin:0;
}
    .CMenu a {
        display: block;
        padding: 5px 10px;
        text-decoration: none;
        color: #809eb0;
    }
        .CMenu a:hover {
            background: #eff4f8;
        }
.FullName.active  .CMenu
{
    
}

.btnLogin {
    float: left;
    padding: 8px 20px;
    background-color: #fff;
    border-radius: 3px;
    overflow: hidden;
    font-size: 16px;
    line-height: 25px;
    color: #666;
    text-decoration: none;
    border:1px solid #fff;
}
    .HoverBorder:hover {
        border-color: #c2d1db;
    }
    .Footer {
        background-color: #222430;
        padding: 50px 0 30px;
    }
.Copyright {
    background-color: #434553;
    font-size: 12px;
    text-align: center;
    border-top: 1px solid #707070;
    color:#fff;
    padding:15px;
    font-family:Tahoma;
}
.Copyright a{
    color:#fff;
    text-decoration:none;
}
.page-wrapper-internal {
    min-height: 40vh;
}
.WLogo a {
    display: block;
    width: 190px;
    height: 64px;
    float:right;
}

.WLogo img {
    width: 190px;
    height: 64px;
}
.BnrFree {
    display: block;
}

    .BnrFree img, .BnrFree video {
        width: 100%;
        float:left;
    }
.Btn {
    display: inline-block;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 9pt;
    line-height: 1.5;
    background-color: #d7172f ;
    cursor:pointer;
}
    .Btn:hover {
        box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    }
    .Circle {
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
    }

.RangeBtn
{
    text-align:center;
    padding:20px 0 5px 0;
}
.Unselectable {
   -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.LogoWrp {
    text-align: center;
    border-bottom: 1px solid #d9e4ea;
    padding: 1rem !important;
}

    .LogoWrp .Logo {
        height: 50px;
        width: auto;
    }

    .LogoWrp img {
        height: 50px;
        width: auto;
    }

.loading {
    background: url('images/loading.gif') no-repeat center center;
    min-height:50px;
}


@media (min-width: 768px) {
    .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-pad-l {
        padding-left: 10px !important;
    }

    .col-pad-r {
        padding-right: 10px !important;
    }
    .col-4 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

.col-md-6, .col-4 {
    max-width: unset;
    width: 100%;
    margin-top:15px;
}

.col-fill {
    flex: 0 0 100%;
    max-width: 100%;
    margin-top:15px;
}

.Commandbar
{
    text-align:left;
    padding-top:20px;
}

.row .alert
{
    margin-bottom:0 !important;
    border-radius:3px !important;
}
.overal {
    background: #000000 url('images/loading.gif') center center no-repeat;
}

.FullPage {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    text-align:center;
    direction:rtl;
}
.BankLoading {
    background: url('images/loading.gif') no-repeat top center;
    padding:30px 0 150px 0;
}
.bAlert {
    color: #721c24;
    border-color: #f5c6cb;
    display: flex;
    position: relative;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    background: #f8d7da ;
}
.Btn[id*=Cancel], input[type=submit][id*=Cancel] {
    background: #fff;
    color: #000;
    border-radius: 3px;
    border: 1px solid #000;
}

.Btn[id*=OK], input[type=submit][id*=OK] {
    background: #d7172f;
    border: 1px solid #d7172f;
    min-width: 80px;
    border-radius: 3px;
}
.Btn[id*=Error], input[type=submit][id*=Error] {
    background: #efae11;
    color: #000;
    border-radius: 3px;
    border: 1px solid #000;
}
.BigTxt
{
    color:#000;
    font-size:20pt;
    padding-bottom:20px;
}
.invoice-flow-swiper
{
    margin:20px 0;
}
.invoice-flow-item {
    border-bottom: 4px double #e0e0e0;
    margin: 0 0 10px 0 !important;
    padding: 0 0 15px 0 !important;
}
    .invoice-flow-item img, .invoice-flow-item h5{
        opacity: .2;
    }
    .invoice-flow-item.active img, .invoice-flow-item.active h5{
        opacity: 1;
    }
    .invoice-flow-item h5{
        position:relative;
    }
        .invoice-flow-item h5::after {
            position: absolute;
            border-radius: 50%;
            background: #ccc;
            content: " ";
            height: 8px;
            width: 8px;
            left: 50%;
            bottom: -21px;
        }
    .invoice-flow-item.active h5::after {
        background: #d7172f;
        border: 5px solid #d7172f;
    }
hr {
    margin-top: 1rem;
    border: 0;
    border-top: 1px solid rgba(0,0,0,.1);
}
.InvBtnHolder .Btn {
    margin-top: 0 !important;
}
.grdPTitle img{
    width:70px;
}
.grdPTitle span
{
    margin-right:10px;
}
.grdPTitle {
    align-items: center;
    text-align:right;
}
.grdHolder
{
    overflow:auto;
}
.Pad{
    margin:20px 0;
}
.opItm {
    display: flex;
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    justify-content:space-between;
}
.opItm_1, .opItm_2 {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}
.opItm_4, .opItm_6 {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}
.opItm_3, .opItm_5 {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.opItm img {
    width: 20px;
    filter: grayscale(100%);
    float: right;
    margin:1px 0 0 5px;
}
.opItm .PODel
{
    cursor:pointer;
}
    .opItm .PODel:hover{
        color:#f00;
    }
    .prices .label {
        color: #999;
        text-align: left;
    }

.col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
}
.col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
}
.text-danger {
    color: #dc3545 !important;
}
.text-success {
    color: #28a745 !important;
}
.UserAddressList .address-item-content:hover
{
    background:#f6ecec;
}
.JobRecord {
    border: 1px solid #dedede;
    margin: 15px 2px;
    display: block;
}

.JobList {
    padding: 7px;
    border-bottom: 1px solid #dedede;
}
.JobAddr {
    text-align: right;
    direction: rtl;
    font-size: 10pt;
    padding: 5px 0;
}

    .JobAddr span {
        float: unset;
        text-align: center;
        font-family: IranSans;
        font-size: 10pt;
    }
.JobTools a {
    text-decoration: none;
    color: #c00;
}

.JobAddr a {
    float: left;
    text-decoration: none;
    color: #c00;
}

    .JobAddr a:hover, .JobTools a:hover {
        color: #d80546;
    }


.OrderList {
    border-bottom: 1px solid #dedede;
}

    .OrderList a {
        float: left;
        width: 50px;
        padding: 5px;
    }

    .OrderList img {
        width: 100%;
    }

.JobTools, .BranchTools {
    padding: 7px;
    background: #dedede;
}
.JobRecord:hover{
    background:#f3edee;
}
.alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}
.payItm svg {
    font-size: 27px;
    line-height: 44px;
    color: #ff9800;
    width: 35px;
    text-align: center;
}
.AjaxUploader {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    cursor: pointer;
    width: 0;
    height: 0;
    float: right;
}
.FileUp
{
    width:100%;
    border:1px solid #ccc;
    border-radius:3px;
    position:relative;
    background:#fff;
}
.tleft {
    text-align: left;
}
.fright{
    float:right;
}
.fleft{
    float:left;
}
.flbl
{
    padding:4px 5px 3px 5px;
}
.btnAttach
{
    cursor:pointer;
    border:none;
    padding:5px;
    border-radius:3px;
    border-right:1px solid #ccc;
}
.fcmd
{
    padding:5px 0 5px 5px;
    margin:0 0 0 5px ;
    cursor:pointer;
    display:none;
}

#progressbar {
    width: 0;
    background: #28a745;
    height: 1px;
    z-index: 20;
    text-align: center;
    color: #fff;
    padding: 1px 0;
    position: absolute;
    bottom: -1px;
    right: 0;
}
.mcol3 {
    flex: 0 0 33.33333%;
    width: 33.33333%;
}
.col2 {
    flex: 0 0 50%;
    width: 50%;
}
@media only screen and (max-width: 760px) {
    .mrow {
        flex-direction:column;
    }
    .mcol2, .mcol3 {
        flex: unset;
        width: unset;
        text-align: center;
    }
    .mkey, .mval{
        width:unset;
    }
}

.ljust
{
    justify-content:left;
}
    .ljust input[type=button] {
        border: 1px solid #28a745;
        background: #28a745;
        color:#fff;
        cursor:pointer;
        padding:5px 10px;
        border-radius:3px;
    }
        .ljust input[type=button]:hover {
            background: #218838;
        }
.fwrow
{
    width:100%;
}
    .fwrow textarea {
        width: 100%;
        border:1px solid #ccc;
    }

.sPMethod, .payItm {
    position: relative;
}
    .sPMethod .DeactivePane, .piDeactivePane {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #ccc;
        opacity: .2;
        z-index: 10;
        display: none;
    }


.back-to-top {
    position: fixed;
    bottom: -40px;
    right: 40px;
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    background: #000;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
    opacity: 0;
    -webkit-transform: scale(0.3);
    -ms-transform: scale(0.3);
    transform: scale(0.3);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 9;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

    .back-to-top:focus {
        color: #fff;
    }

    .back-to-top.show {
        bottom: 10px;
        right: 10px;
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        z-index: 100;
    }

        .back-to-top.show:hover {
            color: #fff;
            bottom: 5px;
            opacity: 1;
        }

    .back-to-top .arrow {
        background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHN0eWxlPi5zdDB7ZmlsbDojZmZmfTwvc3R5bGU+PHBhdGggY2xhc3M9InN0MCIgZD0iTTMxOS4xIDIxN2MyMC4yIDIwLjIgMTkuOSA1My4yLS42IDczLjdzLTUzLjUgMjAuOC03My43LjZsLTE5MC0xOTBjLTIwLjEtMjAuMi0xOS44LTUzLjIuNy03My43UzEwOSA2LjggMTI5LjEgMjdsMTkwIDE5MHoiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzE5LjEgMjkwLjVjMjAuMi0yMC4yIDE5LjktNTMuMi0uNi03My43cy01My41LTIwLjgtNzMuNy0uNmwtMTkwIDE5MGMtMjAuMiAyMC4yLTE5LjkgNTMuMi42IDczLjdzNTMuNSAyMC44IDczLjcuNmwxOTAtMTkweiIvPjwvc3ZnPg==);
        position: absolute;
        width: 12px;
        height: 12px;
        background-size: contain;
        transform: rotate(-90deg);
        top: 30%;
        left: 40%;
    }

        .back-to-top .arrow:nth-child(2) {
            top: 42%;
        }

@keyframes bounceAlpha {
    0% {
        opacity: 1;
        transform: rotate(-90deg) translateX(0px) scale(1);
    }

    25% {
        opacity: 0;
        transform: rotate(-90deg) translateX(10px) scale(0.9);
    }

    26% {
        opacity: 0;
        transform: rotate(-90deg) translateX(-10px) scale(0.9);
    }

    55% {
        opacity: 1;
        transform: rotate(-90deg) translateX(0px) scale(1);
    }
}

.back-to-top:hover .arrow {
    animation-name: bounceAlpha;
    animation-duration: 1.4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

    .back-to-top:hover .arrow:nth-child(2) {
        animation-name: bounceAlpha;
        animation-duration: 1.4s;
        animation-delay: 0.2s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

@media only screen and (max-width: 575px) {
    .back-to-top {
        width: 40px;
        height: 40px;
        line-height: 40px;
    }

        .back-to-top.show {
            bottom: 10px;
            right: 10px;
        }

            .back-to-top.show:hover {
                bottom: 10px;
            }

        .back-to-top .arrow {
            top: 27%;
            left: 37%;
        }
}

.PTls a {
    display: inline-block;
    padding: 0 5px;
    color: #17a2b8;
    font-weight: bold;
    font-size: 12pt;
    cursor: pointer;
    text-decoration: none;
}
    .PTls a:hover {
        color: #0f6674;
    }
.PtlsaPay {
    color: #fff !important;
    background-color: #28a745;
    border-color: #28a745;
    border-radius:3px;
    padding:5px;
}
.PtlsaPay span {
    font-size: 9pt;
    font-weight:normal;
    padding-right:5px;
}
    .PtlsaPay:hover {
        background: #0f6674;
    }
.mkey3 {
    padding: 5px 10px;
    width: 100%;
}
.centered
{
    text-align:center;
}

.padLeft
{
    padding-left:10px;
}
.padTop {
    padding-top: 20px;
}
.mngCmt textarea {
    width: 100%;
    height: 50px;
}