body, h1, h2, h3, h4, h5, h6, a, span, p, strong, ul, li, input, button, textarea, span, option, label, td, th {
    font-family: Yekan;
}

.date{
    direction: ltr;
    text-align: right;
}

.empty{
    text-align: center;
    background-color: #c1c1c1;
    display: inline-block;
    color: white;
    padding: 1px 8px;
    border-radius: 5px;
}

.disable{
    pointer-events: none;
    cursor: default;
    background-color: #f1f0f0 !important;
    color: #a7a7a7;
}

.inline-block{
    display:inline-block;
}

.page-number{
    padding-top: 30px;
}

/* COLOR */
.brand-primary{
    color: #337ab7 !important;
}
.brand-success{
    color: #5cb85c !important;
}
.brand-info{
    color: #5bc0de !important;
}
.brand-warning{
    color: #f0ad4e !important;
}
.brand-danger{
    color: #d9534f !important;
}
.gray-light{
    color: #777 !important;
}
.brand-dark{
    color: #333333 !important;
}

.custom-padding{
    padding-left: 14px;
    padding-right: 14px;
}

dl{
    margin:0;
}
.dl-horizontal dt{
    text-align: right;
}
.dl-horizontal dd{
    padding-bottom: 6px;
}

.glyphicon{
    top: 3px;
    padding-left: 3px;
}

.no-padding{
    padding:0;
}

.document-img{
    border: 1px solid #d0cece;
    padding: 5px;
    background-color: #e4e4e4;
}

.small-control{
    max-width: 170px;
}

.form-inline .form-group{
    margin-bottom:5px;
}

.datepicker.datepicker-dropdown.dropdown-menu.datepicker-rtl{
    max-width: 300px;
    right:inherit;
}

.panel-footer{
    padding: 5px 5px;
    border-top:none;
    text-align:left;
}
.panel-footer .form-group{
    margin-bottom: 0;
}

/* LOGIN */
#loginForm .form-control{
    max-width: 190px;
}
#loginForm{
    margin-top:100px;
}
/*#loginForm .panel-heading{
    background-image:url("backgrounds/bg-content.png");
    background-repeat:repeat-x;
}*/

/* NAVBAR */
.navbar.navbar-inverse.navbar-fixed-top{
    background-image:url("backgrounds/bg-header.jpg");
    background-repeat:repeat-x;
    /*border-bottom: 2px solid #970b0b;*/
    border-bottom: 2px solid #3d3d3d;
    
}
.navbar.navbar-inverse.navbar-fixed-top a {
    color:white;
}

/* ORDER LIST */
.panel.order{
    border-radius: 0;
}

/* glyphicon */
.glyphicon{
    top:0;
}


/*order*/
.order
{
    /*margin-right:100px;*/
}
.order > .panel-body{
    padding-left:0px;
    padding-right:0px;
}
.order .panel-heading img{
    visibility:hidden; 
    display:none;
}
.order .panel-heading{
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}
.new-order{
    margin-top:-238px;
}
.new-order .panel-default.order, .update-order .panel-default.order{
     box-shadow: rgb(46, 127, 175) 0px 0px 13px 5px;
}
/*info*/
.info{
    margin-bottom:10px;
}
.info .panel-body{
    padding-top:0px;
    padding-bottom:0px;
}
.info p{
    margin-right: 10px;
}
.info .customer-status{
    font-size: 12px;
    margin-top: 12px;
    margin-bottom: 12px;
}
.order .extra{
    text-align:left;
}

/*bikeman*/
.bikeman .panel-heading img{
    width: 25px;
    margin-left: 5px;
    visibility:visible !important;
    display:inline-block !important;
}
.bikeman .panel-heading .panel-title{
    /*font-size: 25px;*/
}
.bikeman .order{
    margin-right:0;
}
/*requested*/
.requested .panel-heading{
    background-color:#f0ad4e;
    color: white;
}
.requested .order{
    border-color:#f0ad4e;
}
/*paymented*/
.paymented .panel-heading{
    background-color:#d9534f;
    color: white;
}
.paymented .order{
    border-color:#d9534f;
}
/*beginned*/
.beginned .panel-heading{
    background-color:#28a745;
    color: white;
}
.beginned .order{
    border-color:#28a745;
}
/*received*/
.received .panel-heading{
    background-color:#428bca;
    color: white;
}
.received .order{
    border-color:#428bca;
}

.order .comment{
    background-color: #eaeae4;
    padding: 6px 9px;
    border-radius: 4px;
}
.order .comment p{
    margin-bottom: 0;
}

.square {
    display:inline-block;
    height: 60px;
    width: 60px;
    text-align: center;
    border-radius: 100px;
    color: white;
}
.pay .square{
    background-color: #d9534f;
}
.req .square{
    background-color: #f0ad4e;
}
.def .square{
    background-color: #999999;
}
.def p{
    color: #999999;
}
.square span.number{
    font-size:45px;
}
.summary{
    margin-bottom:20px;
    margin-top:10px;
}
.summary .col-md-3{
    text-align:center;
}
.summary p{
    font-size: 20px;
}

/* MODAL */
.modal{
    /*overflow-y: visible;*/
}


.count p{
    border: 2px solid #c7c4c4;
    padding: 5px 10px 5px 10px;
    border-radius: 14px;
    background-color: #fff;
    color:#999999;
}

.connection-status{
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 5px 15px 5px 15px;
    color: white;
    border-radius: 15px;
}
.success{
    background-color: #5cb85c;
}
.warning{
    background-color: #f0ad4e;
}
.danger{
    background-color: #d9534f;
}
.provider-summery{
    border: 1px solid #ddd;
    padding: 5px 9px;
    margin-bottom: 20px;
}


#loading-div, #success-div, #error-div,
#loading-div2, #success-div2, #error-div2,
#loading-div3, #success-div3, #error-div3{
    display:none;
}
#success-div img, #error-div img,
#success-div2 img, #error-div2 img,
#success-div3 img, #error-div3 img{
    width:50px;
}

.modal-footer{
    text-align: inherit;
}

@media (min-width: 768px){
    .sidebar-links{
        display: none;
    }
}

.in-delivering{
    display: inline-block;
    color: #299bfd;
    border-radius: 4px;
}
.in-delivering img{
        width: 20px;
    padding-left: 3px;
}

.not-delivered{
    display: inline-block;
    color: white;
    background-color: #ff5252;
    padding: 3px 12px;
    border-radius: 4px;
}

    .not-delivered span {
        top:3px;
    }

    .problem-notice{
        color:red;
    }

    .hide{
        display:none;
        visibility:hidden;
    }

    .sub-nav {
        display: none;
        width: 100%;
        background-color: #f7f7f7;
        position: absolute;
        padding-top: 3px;
        padding-bottom: 3px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .group:hover .sub-nav {
            display: block;
        }

    .sub-nav > li > a {
        margin-right:7px;
    }

    .text-bold{
        font-weight: bold;
    }

.requested .cornometer {
    color: #f0ad4e;
}
.paymented .cornometer {
    color: #d9534f;
}

.cornometer {
    display: inline-block;
    text-align: center;
    font-size: 16px;
    background-color: white;
    width: 50px;
    border-radius: 4px;
    margin-right: 10px;
    font-family: monospace;
}

.phone{
    text-decoration: none;
    border: 1px solid #9a9a9a;
    border-radius: 12px;
    padding: 3px 5px 0px 5px;
    margin-right: 2px;
    color: #333333;
}

.phone:hover, .phone:active{
    color: #428bca;
    text-decoration: none;
    border-color: #428bca;
}

.eagle{
    position: absolute;
    bottom: 0;
    font-weight: bold;
}

.nav-sidebar
{    margin-bottom: 5px;

}

.left-space{
    margin-left: 30px;
}

.pay-type{
    width: 30px;
}

.call{
    margin-right: 10px;
    color: #5cb85c;
    border: 1px solid #5cb85c;
    border-radius: 12px;
    padding: 2px 5px 0px 5px;
}
.call .glyphicon{
    top: 2px;
}

.sms{
    border: 1px solid #f0ad4e;
    border-radius: 12px;
    padding: 1px 5px 1px 5px;
    color: #f0ad4e;
    margin-right: -1px;
}

.table-responsive{
    overflow-y: hidden;
    overflow-x: scroll;
}

.support{
    padding-right: 7px;
    color: #01b730;
}

.react-logo {
    border-radius: 50px;
    padding: 1px;
    background-color: #222;
}

.text-muted a.btn{
    color:#999999;
}

.provider-close{
    background-color: gray;
    color: white;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 50px;
}

.text-muted .provider-close{
    background-color: #e5e5e5;
}

.provider-open{
    background-color: rgb(116, 194, 57);
        color: white;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 50px;
}

.text-muted .provider-open{
    background-color: #e5e5e5;
}

.problem-count-header {
    top: 14px;
    font-size: 20px;
}

@media (min-width: 768px) {
    .problem-count-header {
        display: none;
    }
}

.call-status{
    margin-right: 10px;
    background-color: #f9f6dd;
    padding: 3px 5px;
    border-radius: 5px;
}

select.form-control.small-control{
    width:170px;
}

.eye{
    top: 3px;
    margin-right: 5px;
    color: green;
    background-color: #5cb85c;
    border-radius: 50px;
    padding: 3px 4px 5px 5px;
    color: white;
}
/* لودر */
.loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 8px solid rgba(0, 0, 0, 0.1);
    border-top: 8px solid #3498db; /* رنگ خط بالای لودر */
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 1s linear infinite; /* انیمیشن چرخش */
    z-index: 9999; /* برای نمایش روی دیگر عناصر */
}

/* انیمیشن چرخش */
@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: white;
    width: 100%;
    margin: 0;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-container {
    text-align: center;
    flex-grow: 2;
}

.logo {
    height: 40px;
}

.cart-icon-container {
    position: relative;
}

.cart {
    position: relative;
}

.cart-icon {
    font-size: 22px;
    color: #32ba78;
}

.cart-badge {
    position: absolute;
    top: -12px;
    left: -12px;
    background-color: red;
    color: white;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 10px;
}

.navbar {
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
}

.nav-item.active {
    font-weight: bold;
    color: #3498db;
}

.cart-item {
    margin-bottom: 10px;
}

.close {
    cursor: pointer;
}
.order-badge {
    width: 12px;
    height: 12px;
    background-color: #28a745; /* رنگ سبز */
    border-radius: 50%;
    position: absolute;
    top: 0; /* تغییر موقعیت برای مطابقت بهتر با آیکون */
    left: 50px; /* تغییر موقعیت برای مطابقت بهتر با آیکون */
}

/* برای موقعیت‌یابی صحیح نشانگر سبز رنگ */
#orders {
    position: relative; /* برای قرار دادن دایره سبز رنگ در موقعیت درست */
}

.loading {
    text-align: center; /* مرکز کردن تصویر */
    margin: 20px auto; /* فاصله اطراف تصویر */
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading img {
    max-width: 100px; /* اندازه تصویر */
    max-height: 100px;
}

/* Overlay برای مرکز کردن لودینگ */
.loading-overlay {
    position: fixed; /* ثابت کردن overlay */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8); /* پس زمینه شفاف */
    display: flex; /* استفاده از Flexbox برای مرکز کردن */
    justify-content: center; /* مرکز کردن افقی */
    align-items: center; /* مرکز کردن عمودی */
    z-index: 9999; /* بالاترین لایه */
}

/* Spinner لودینگ */
.loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading-spinner img {
    max-width: 40px; /* تنظیم اندازه تصویر */
    max-height:40px;
}

/* Shimmer Effect CSS */
.shimmer {
    background: #f6f7f8;
    background-image: linear-gradient(to right, #f6f7f8 0%, #e9e9e9 20%, #f6f7f8 40%, #f6f7f8 100%);
    background-repeat: no-repeat;
    background-size: 800px 104px;
    display: inline-block;
    position: relative;
    animation: shimmer 1.5s infinite linear;
}

@keyframes shimmer {
    0% {
        background-position: -468px 0;
    }

    100% {
        background-position: 468px 0;
    }
}

/* استایل‌های مربوط به Shimmer برای بخش‌های مختلف */
.shimmer-card {
    width: 100%;
    height: 100px;
    margin-bottom: 10px;
    border-radius: 8px;
}

.shimmer-text {
    width: 100%;
    height: 20px;
    margin-bottom: 10px;
    border-radius: 4px;
}

.shimmer-image {
    width: 100%;
    height: 150px;
    margin-bottom: 10px;
    border-radius: 8px;
}