.renewal .name{
     white-space: nowrap;
 }
@media (max-width: 1536px){
    .navbar {
        height: 70px;
    }
    .navbar .navbar-container { 
        padding: 0 20px;
    }
    .navbar .navbar-container .btn-icon svg {
        min-width: 20px;
        width: 20px;
        height: 20px;
        line-height: 20px;
    }
    .navbar .navbar-container .right-card, .navbar .navbar-container .left-card {
        gap: 10px;
    }
    .navbar .navbar-container .left-card {
        gap: 10px;
    }
    .navbar .navbar-container .search-card {
        max-width: 240px !important;
        height: 40px;
    }
    .navbar .navbar-container .search-card .icon {
        min-width: 20px;
        width: 20px;
        height: 30px;
        line-height: 30px;
    } 
    .agent-balance {
        padding: 4px 14px;
    }
    .aside {
        max-width: 240px;
    } 
    .aside .aside-container {
        position: absolute; 
        z-index: 2;
        top: 0;
        bottom: 0;
        left:0;
        right: 0;
        background: var(--white-color);
        padding: 1rem;
    }
    .wrapper {
        padding-inline-start: 240px;
    }
    .wrapper-card {
        padding: 1rem;
    }
    .btn {
        font-size: 12px;
        padding: 0 12px;
        gap: 5px;
    }
    .main-card {
        padding: 24px;
    }
    .main-card .fillter-card {
        margin-bottom: 1rem;
    }
    .main-card .header .content .title {
        font-size: 16px;
    }
    [dir="ltr"] .main-card .header .back{
        transform: rotateY(180deg);
    }
    .table-content tr th {
        font-size: 12px;
    }
    .aside .aside-container .list-card .nav .nav-item .nav-link {
        height: 48px;
        padding: 14px;
        border-radius: 12px;
    }
    .aside .aside-container .list-card .nav .nav-item .nav-link .title {
        font-size: 12px;
    }
    .aside .aside-container .logo{
        font-size: 16px;
    }
    .aside .aside-container .logo .icon {
        width: 36px;
        min-width: 36px;
        height: 36px;
    }
    .dashboard-profile {
        padding: 20px;
        margin-bottom: 1rem;
    }
    .dashboard-profile .user-card .content .welcome {
        font-size: 12px;
    }
    .dashboard-profile .user-card .content .name {
        font-size: 16px;
        line-height: 24px;
    }
    .dashboard-profile .user-card .pic {
        min-width: 48px;
        width: 48px;
        height: 48px;
        font-size: 16px;
    }
    .numbers-card{
        margin-bottom: 1rem;
    }
    .numbers-card .numbers{
        flex-wrap: wrap;
    }
    .numbers-card .numbers .name {
        width: 100%;
        font-size: 14px;
        margin-inline-start: 0 !important;
    }
    .chart-card .header{
        margin-bottom: 1rem;
    }
    .chart-card .header .action {
        display: flex;
        gap: 10px;
    }
    .chart-card .sales-card .profits {
        font-weight: 700;
        font-size: 28px;
    }
    .main-card .header {
        margin-bottom: 16px;
    }
    .main-card .header .tabs .nav.nav-pills .nav-link {
        font-size: 12px;
    }
    .form-card {
        padding: 20px;
    }
    .form-group .form-select, .form-group .form-control {
        min-height: 46px;
        padding: 10px 16px;
    }
    .form-group .input-addon .icon {
        position: absolute;
        width: 46px;
        height: 44px;
    }
    .form-group .input-addon .icon-circle {
        position: absolute;
        width: 26px;
        height: 24px;
    }
    .form-group .input-addon.start .form-control {
        padding-inline-start: 50px;
    }
    .form-group .form-label { 
        font-size: 12px;
    }
    .support-card {
        gap: 0;
        padding: 16px;
    }
    .support-card .content .title {
        font-size: 1rem;
        margin-bottom: 5px;
    }
    .support-card .content .info {
        font-size: 12px;
    }
    .faqs-card .accordion-item {
        margin-bottom: 1rem
    }
    .faqs-card .accordion-item .accordion-button::after {
        width: 12px;
        height: 12px;
        background-size: 14px;
    }
    .faqs-card .accordion-item .accordion-button { 
        font-size: 14px; 
        padding: 1rem;
    }
    .faqs-card .accordion-item .accordion-button .number {
        font-size: 14px;
        margin-inline-end: 10px;
    }
    .faqs-card .accordion-item .accordion-body .details{
        font-size: 14px;
    }
    .form-group {
        margin-bottom: 1rem;
    }
    .dropdown-menu-shortcuts {
        min-width: 280px;
        border-radius: 12px;
        padding: 1rem;
    }
    .dropdown-menu-shortcuts .shortcuts-card {
        padding: 10px;
    }
    .dropdown-menu-shortcuts .shortcuts-card .title {
        font-size: 12px;
    }
    .nodata .title {
        font-size: 16px;
    }
    table.dataTable>tbody>tr>th,
    table.dataTable>tbody>tr>td {
        padding: 10px;
    }
    .dropdown-menu-notifications .body,
    .dropdown-menu-notifications .header .title {
        font-size: 14px;
    }
    .dropdown-menu-notifications .header .make-all-read .title {
        font-size: 10px;
    }
    .main-card .header .actions{
        gap: 10px;
    }
    .settings-sidebar {
        max-width: 240px;
        padding: 1rem;
    }
    .settings-sidebar .nav .settings-card {
        height: 46px;
        padding: 8px;
    }
    .settings-sidebar .nav .settings-card .title {
        font-size: 12px;
        line-height: 18px;
    }
    .settings-contaiers .settings-card {
        padding: 1rem; 
        max-width: 180px;
    }
    .settings-contaiers .settings-card .title { 
        font-size: 14px;
    }
    .settings-header .title {
        font-size: 16px;
    }
    .settings-header{
        padding: 1rem;
        padding-bottom: 0;
    }
    .settings-wrapper { 
        padding: 1rem;
    }
    .avatar-card .pic {
        min-width: 34px;
        width: 34px;
        height: 34px;
    }
    .profile .pic {
        width: 75px;
        height: 75px;
        font-size: 30px;
        margin-bottom: 1rem;
    }
    .profile .content .name {
        font-size: 16px;
        margin-bottom: 5px;
    }
    .profile .more-details p{
        font-size: 12px;
        margin-bottom: 10px;
    }
    .account-type-card .account-type .title {
        font-size: 12px;
    }
    .avatar-select {
        width: 24px;
        height: 24px;
    }
    .h4, h4 {
        font-size: 1rem;
    }
    .msg-count .icon svg {
        width: 40px;
        height: 40px;
    }
    .msg-count .content .count {
        font-size: 20px;
    }
    .auth-layout .logo-card .logo {
        margin-bottom: 30px;
    }
    .auth-layout .logo-card .logo .icon {
        width: 50px;
        height: 50px;
    }
    .auth-layout .auth-card .header-card{
        margin-bottom: 20px;
    }
    .auth-layout .auth-card .header-card .title {
        font-size: 24px;
        margin-bottom: 1rem;
    }
    .collapses .collapse-card .header .content .title {
        font-size: 14px;
    }
    .collapses .collapse-card .header .features .item .title {
        font-size: 12px;
    }
    .collapses .collapse-card .header .form-check-input[type=checkbox] {
        width: 20px;
        height: 20px;
    }
    .collapses .collapse-card-body{
        margin-top: 0;
    }
    .dashboard-profile .action,
    .dashboard-profile .user-card {
        gap: 10px;
    }
    .numbers-card .numbers .pic {
        min-width: 42px;
        width: 42px;
        height: 42px;
    }
    .numbers-card .numbers .pic svg{
        width: 20px;
        height: 20px;
    }
    .numbers-card .numbers .count {
        font-size: 20px;
    }
    .subscription-card .header .title {
        font-size: 16px;
    }
    .subscription-service-item .subscription-service-card {
        gap: 20px;
    }
    .subscription-tab-content .title {
        font-size: 16px;
    }
    .subscription-action-card .icon{
        min-width: 42px;
        width: 42px;
        height: 42px;
    }
    .subscription-action-card .icon svg{
        width: 22px;
        height: 22px;
    }
    .subscription-action-card .name{
        font-size: 14px;
    }
}
@media (max-width: 1280px){
}
@media (max-width: 1024px){
    .aside {
        right: -240px;
        z-index: 999;
    }
    .aside.collapsed {
        right: 0;
    }
    [dir="ltr"] .aside {
        right: auto;
        left: -240px;
    }
    [dir="ltr"] .aside.collapsed {
        right: auto;
        left: 0;
    }
    /*.aside.collapsed::before{*/
    /*    position: fixed;*/
    /*    content: "";*/
    /*    top: 0;*/
    /*    left: 0;*/
    /*    width: 100%;*/
    /*    height: 100%;*/
    /*    z-index: 1;*/
    /*    background-color: #00000080;*/
    /*    right: 0;*/
    /*    transition: all 0.5s ease .5s;*/
    /*}*/
    .aside-overlay {
        position: fixed;
        inset: 0;
        background: #00000080;
        z-index: 9;
        display: none; /* مخفية */
        transition: all 0.5s ease .5s;
    }
    
    .aside.collapsed + .aside-overlay {
        display: block;
    }
    /*[dir="ltr"] .aside.collapsed::before{*/
    /*    left: 0;*/
    /*    right: auto;*/
    /*}*/
    .wrapper {
        padding-inline-start: 0;
    }
}
@media (max-width: 992px){
    .numbers-card .numbers .name {
        width: auto;
        margin-inline-start: auto !important;
    }
    .navbar .navbar-container .right-card, .navbar .navbar-container .left-card{
        gap: 5px;
    }
    .agent-balance .title, .agent-balance .balance {
        font-size: 12px;
    }
    .navbar .navbar-container .search-card {
        max-width: 200px !important;
    }
    .dropdown-menu-profile .user-card .content .name {
        font-size: 14px;
    }
    .dropdown-menu-profile {
        min-width: 280px;
    }
    .subscription-package-card .header,
    .subscription-package-card .content .package-duration {
        flex-wrap: wrap;
    }
    .subscription-package-card .header .package-featuers .featuers-card:last-child,
    .subscription-package-card .content .package-duration .package-duration-item:last-child{
        border: none;
    }
}
@media (max-width: 768px){
    .chart-card{
        padding: 20px;
    }
    .chart-card .header .action,
    .chart-card .header { 
        flex-wrap: wrap;
    }
    .main-card .header{
        gap: 1rem;
    }
    .subscription-tab-content {
        padding: 16px;
    }
}
@media (max-width: 640px){
    .navbar .navbar-container .search-card,
    .navbar .navbar-container .agent-balance{
        display: none;
    }
    .numbers-card .numbers .name { 
        width: 100%;
        margin-inline-start: 0 !important;
    }
    .dashboard-profile {
        gap: 1rem;
    }
    .dashboard-profile .action{
        width: 100%;
        margin-inline-start: 0 !important;
    }
    .main-card .header .actions .btn .title,
    .dashboard-profile .action .btn .title{
        display: none;
    }
    .chart-card .sales-card .profits {
        font-size: 16px;
    }
    .chart-card .sales-card .title {
        margin-inline-end: 0;
    }
    .upload-avatar .button-wrapper .d-flex{
        flex-wrap: wrap;
        gap: 0 !important;
    }
    .wrapper-card > .main-card{
        padding: 1rem;
    }
    .subscription-action-card {
        max-width: calc((100% / 2) - 11px);
    }
    .subscription-package-card .header{
        gap:0;
    }
    .subscription-package-card .content .package-duration .package-duration-item{
        border: none;
    }
}
@media (max-width: 475px){
    .numbers-card .see-all .title {
        font-size: 12px;
    }
    .modal-subscription {
        max-width: 720px;
        width: auto;
        padding: 1rem 20px;
    }
    .package-data-row .header .package-name { 
        flex: 1;
    }
    .package-data-row .package-price { 
        margin-bottom: 1rem;
    }
    .swal-modal .swal-footer .swal-button-container .btn {
        width: 140px;
    }
    .subscription-status{
        padding: 1rem 0;
    }
    .modal-subscription .header{
        flex-wrap: wrap;
        padding-bottom: 1rem;
    }
    .form-card .form-content .form-action { 
        flex-wrap: wrap;
    }
    .dropdown-menu.show {
        display: block;
        position: fixed;
        width: 100%;
        left: 0;
        right: auto;
        top: 70px;
    }
    .subscription-action-card {
        max-width:100%;
    }
    .settings-wrapper{
        flex-wrap: wrap;
    }
    .settings-wrapper .settings-sidebar{
        max-width: 100%;
        position: relative;
        margin-bottom: 1rem;
    }
    .wrapper-card .main-card .form-card{
        padding: 1rem 0;
    }
}