#tab-cards.deal-cards-reference-page{
  direction:rtl;
  background:#f5f7fb;
}

@media(max-width:860px){

  #tab-cards.active{
    display:block !important;
    width:100% !important;
    padding:0 8px 24px !important;
    overflow-x:hidden;
  }

  .dc-header{
    width:calc(100% + 16px);
    min-height:91px;
    margin:0 -8px 7px;
    padding:12px 16px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#fff;
    border-radius:0 0 23px 23px;
    background:
      radial-gradient(circle at 18% 0%,rgba(255,255,255,.13),transparent 37%),
      linear-gradient(135deg,#873cf4,#6127d2 55%,#42229f);
  }

  .dc-menu{
    width:40px !important;
    height:40px !important;
    min-height:40px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:11px !important;
    background:rgba(255,255,255,.14) !important;
    color:#fff !important;
    font-size:22px !important;
  }

  .dc-title{
    display:flex;
    align-items:center;
    gap:9px;
  }

  .dc-title h1{
    margin:0;
    font-size:18px;
    font-weight:900;
  }

  .dc-title p{
    margin:3px 0 0;
    font-size:8px;
    font-weight:700;
    color:rgba(255,255,255,.8);
  }

  .dc-logo{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:rgba(255,255,255,.16);
    font-size:12px;
  }

  .dc-nav{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:4px;
    margin:-13px 0 8px;
    padding:6px;
    position:relative;
    z-index:3;
    border:1px solid #ece9f2;
    border-radius:13px;
    background:#fff;
    box-shadow:0 5px 18px rgba(48,37,69,.07);
  }

  .dc-nav button{
    min-height:50px !important;
    padding:4px 2px !important;
    display:flex !important;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:3px;
    border:0 !important;
    border-radius:9px !important;
    background:#f7f5fa !important;
    color:#625873 !important;
    font-size:6.5px !important;
    font-weight:800 !important;
  }

  .dc-nav button span{
    font-size:14px;
  }

  .dc-nav button.active{
    background:linear-gradient(135deg,#8e39f2,#5d24ce) !important;
    color:#fff !important;
  }

  .dc-main-card{
    padding:10px;
    border:1px solid #ebe7f0;
    border-radius:15px;
    background:#fff;
    box-shadow:0 5px 18px rgba(52,41,69,.05);
  }

  .dc-head-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    margin-bottom:9px;
  }

  .dc-section-title{
    display:flex;
    align-items:center;
    gap:8px;
  }

  .dc-section-title h2{
    margin:0;
    color:#21182a;
    font-size:15px;
    font-weight:900;
  }

  .dc-section-title p{
    margin:3px 0 0;
    color:#81778d;
    font-size:7px;
    font-weight:700;
  }

  .dc-section-icon{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:#eee2ff;
    color:#7130d4;
    font-size:17px;
  }

  .dc-refresh{
    min-width:92px !important;
    min-height:34px !important;
    padding:5px 9px !important;
    border:0 !important;
    border-radius:9px !important;
    background:#eee5ff !important;
    color:#6326c5 !important;
    font-size:8px !important;
    font-weight:900 !important;
  }

  .dc-toolbar{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
    margin-bottom:9px;
    padding:8px;
    border-radius:11px;
    background:#fafafd;
  }

  .dc-toolbar label{
    margin:0 !important;
    font-size:8px !important;
    font-weight:900 !important;
    color:#2d2437;
  }

  .dc-toolbar label > span{
    display:block;
    margin:0 3px 3px;
  }

  .dc-toolbar input,
  .dc-toolbar select{
    width:100% !important;
    height:36px !important;
    min-height:36px !important;
    margin:0 !important;
    padding:5px 8px !important;
    border:1px solid #dedbe4 !important;
    border-radius:8px !important;
    background:#fff !important;
    color:#29212f !important;
    font-size:8.5px !important;
    font-weight:800 !important;
  }

  .dc-list{
    display:grid;
    gap:7px;
  }

  .dc-deal-card{
    padding:8px;
    border:1px solid #e9e7ed;
    border-radius:12px;
    background:#fff;
    box-shadow:0 3px 11px rgba(40,32,52,.035);
  }

  .dc-card-top{
    display:grid;
    grid-template-columns:22px auto minmax(0,1fr) auto;
    align-items:center;
    gap:6px;
    margin-bottom:6px;
  }

  .dc-card-arrow{
    color:#6b27cf;
    font-size:22px;
    font-weight:900;
  }

  .dc-sale-id{
    padding:4px 7px;
    border-radius:999px;
    background:#eee3ff;
    color:#6925ce;
    font-size:8px;
    font-weight:900;
  }

  .dc-card-date{
    color:#687085;
    font-size:7px;
    font-weight:800;
  }

  .dc-client-name{
    display:flex;
    align-items:center;
    gap:5px;
    color:#20172a;
  }

  .dc-client-name strong{
    font-size:10px;
    font-weight:900;
  }

  .dc-person-icon{
    width:27px;
    height:27px;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:#eee3ff;
    color:#6d28d2;
    font-size:12px;
  }

  .dc-card-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:5px;
  }

  .dc-side-panel{
    border:1px solid #e8e6ec;
    border-radius:9px;
    overflow:hidden;
    background:#fff;
  }

  .dc-data-row{
    min-height:36px;
    display:flex;
    align-items:center;
    gap:5px;
    padding:4px 5px;
    border-bottom:1px solid #f0eef3;
  }

  .dc-data-row:last-child{
    border-bottom:0;
  }

  .dc-data-icon{
    width:26px;
    height:26px;
    display:grid;
    place-items:center;
    flex:0 0 26px;
    border-radius:7px;
    font-size:11px;
    font-weight:900;
  }

  .dc-data-icon.blue{
    background:#e2f0ff;
    color:#1777d1;
  }

  .dc-data-icon.pink{
    background:#ffe1ec;
    color:#d84b7d;
  }

  .dc-data-icon.purple,
  .dc-data-icon.violet{
    background:#eee3ff;
    color:#6d28d2;
  }

  .dc-data-icon.green{
    background:#dcf6ed;
    color:#07866b;
  }

  .dc-data-icon.orange{
    background:#fff0dc;
    color:#dc861e;
  }

  .dc-data-row small{
    display:block;
    color:#756d80;
    font-size:5.8px;
    font-weight:800;
  }

  .dc-data-row strong{
    display:block;
    margin-top:1px;
    color:#172035;
    font-size:8.5px;
    font-weight:900;
  }

  .dc-final-bar{
    min-height:39px;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:7px;
    margin-top:6px;
    padding:6px 9px;
    border-radius:8px;
    background:linear-gradient(90deg,#e2fff5,#edfdf8);
  }

  .dc-final-bar strong{
    direction:ltr;
    color:#087a69;
    font-size:15px;
    font-weight:900;
  }

  .dc-final-bar span{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:5px;
    color:#087466;
    font-size:9px;
    font-weight:900;
  }

  .dc-final-bar b{
    width:24px;
    height:24px;
    display:grid;
    place-items:center;
    border-radius:7px;
    background:#cdf3e7;
    color:#087a69;
  }

  .dc-empty{
    margin-top:7px;
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #ebe7f1;
    border-radius:9px;
    background:#fafafd;
    color:#81778d;
    font-size:8px;
  }

}