/* @media screen and (min-width: 768px) {
  .w-5 {
    width: 5%;
  }
  .w-8 {
    width: 8%;
  }
  .w-10 {
    width: 10%;
  }
  */

.w-15 {
    width: 15% !important;
}

/*
  .w-17 {
    width: 17%;
  }
  .w-20 {
    width: 20% !important;
  }
  .w-26 {
    width: 25% !important;
  }
  .w-70 {
    width: 70%;
  }
  .w-80 {
    width: 80% !important;
  }
} */
@media screen and (max-width: 768px) {
    .md-name h3 {
        font-size: 14px;
        padding: 0 !important;
    }

    .login-2-left h1 {
        font-size: 2rem !important;
    }

    .login-2-left p {
        font-size: 14px !important;
    }

    .login-2-right {
        box-shadow: none !important;
    }

    .login-2-form-wrapper {
        width: 90% !important;
    }

    .login-board-wrapper .login-board {
        max-width: 95%;
        width: 100%;
    }

    .pd-div {
        width: 100% !important;
    }

    .add-ie-btn {
        display: block;
    }

    .add-ie-btn .ab-btn {
        margin-top: 15px;
    }

    /*---------------header-css-start-----------*/

    .navbar .navbar-brand {
        font-size: 22px;
    }

    .toggle-btn {
        left: 130px !important;
    }

    /*---------------header-css-end-------------*/

    /*---------progress-board-css-start---------*/

    .progress-board .party-data {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
    }

    /*---------progress-board-css-end-----------*/
    .us-filter-header {
        padding: 15px !important;
    }

    .us-filter-wrapper {
        margin: 0 15px;
        padding: 15px !important;
    }

    .bd-title {
        padding: 15px;
    }

    .w-sm-100 {
        width: 100% !important;
    }

    .up-db-header {
        padding: 16px;
    }

    .re-chart .chart-lable-wrapper {
        width: 100% !important;
    }
}

@media screen and (max-width: 990px) {

    .login-2-wrapper {
        display: block;
        height: auto !important;
    }

    .login-2-left {
        width: 100%;
        padding: 110px 0;
    }

    .login-2-right {
        width: 100%;
    }

    .login-2-form-wrapper {
        margin: 100px auto !important;
    }



    /*-----------top-bar-css-start--------------*/

    .sidebar .user-id .dropdown-menu {
        top: -150px !important;
        transform: unset !important;
    }

    .navbar {
        padding: 14px 20px !important;
        box-shadow: 0 3px 25px -5px;
    }

    .sidebar .navbar-brand {
        position: sticky;
        top: 0;
        background: var(--color-d-blue);
        z-index: 2;
    }

    .sidebar .fa-chevron-down {
        display: none;
    }

    .sidebar ul li .fa-angle-down {
        display: none;
    }

    /* .sidebar ul{
      padding: 90px 0;
  } */
    .navbar .admin-name {
        padding: 0;
    }

    .navbar .navbar-nav .nav-item {
        text-align: center;
        padding: 15px 0;
    }

    .navbar-light .navbar-toggler {
        border-color: transparent !important;
    }

    button:focus {
        outline: none !important;
    }

    .toggle-btn {
        left: 160px;
        top: 21px;
    }

    /*----------top-bar-css-end-----------------*/

    /*----------dashboard-css-start-------------*/

    .portfolio {
        z-index: unset !important;
        left: 80px !important;
    }

    .portfolio .dashboard .overall-data-bar {
        display: grid;
        grid-gap: 0;
        grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
        margin-bottom: -15px;
    }

    .portfolio .dashboard .overall-data-bar .overall-data-box {
        margin-bottom: 20px;
    }

    /*---------------dashboard-css-end-------------*/

    /*--------portfolio-css-start------------------*/

    /* .slide-btn{
  left: 62px;
} */

    .sidebar {
        z-index: 1;
        transition: 0.5s;
        width: 80px;
    }

    input:checked~.sidebar {
        width: 250px;
    }

    .sidebar .fa-angle-down {
        display: none;
        transition: 1s;
    }

    .sidebar .dd-c ul li a {
        padding: 10px 24px;
    }

    .sidebar .dd-c ul li i {
        font-size: 0.9rem;
        width: 2rem !important;
        margin: auto;
    }

    input:checked~.sidebar .fa-angle-down {
        display: block !important;
        transition: 1s
    }

    input:checked~.sidebar ul li a span {
        display: unset;
        transition: 0.3s;
    }

    .slide-btn {
        left: 60px;
    }

    #slide-sidebar:checked~.slide-btn {
        left: 235px;
    }

    .sidebar ul li a span {
        display: none;
    }

    /*---------------portfolio-css-end--------------*/

    /*--------------add-details-css-start-----------*/

    .main-wrapper {
        max-width: 95% !important;
        margin: 100px auto 30px;
    }

    /*---------add-details-css-end------------------*/

    /*-----------progress-board-css-start-----------*/

    .wrapper-bottom-right {
        width: 100% !important;
    }

    .progress-board .party-data {
        border-top: 1px solid #ebebeb;
    }

    .progress-board .wrapper-bottom {
        display: block;
    }

    .progress-board .wrapper-bottom-left p {
        margin: 0 7px 7px;
        float: left;
    }

    .progress-board .wrapper-botom-left-rate,
    .progress-board .wrapper-botom-left-process {
        display: inline-block;
        overflow: hidden;
        padding-left: 8px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .progress-board .wrapper-bottom .wrapper-bottom-left {
        width: 100%;
    }

    /*--------progress-board-css-end--------------*/
}

@media screen and (max-width: 1440px) {
    /*----------progress-board-css-start----------*/

    .progress-board .party-data-box {
        padding: 10px 10px !important;
    }

    .progress-board .party-data-box h4 {
        font-size: 16px;
    }

    .progress-board .party-data .tag p {
        padding: 8px 8px;
        border-radius: 8px 0 20px 0;
        text-align: center;
        font-size: 12px;
    }

    .progress-board .party-data .tag p::after {
        right: -2px;
        height: 34px;
    }

    .progress-board .wrapper-bottom-right .stones-counter-board {
        grid-gap: 10px;
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    }

    .progress-board .wrapper-bottom-right .stones-counter-fill-board {
        display: grid;
        grid-gap: 10px;
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)) !important;
    }

    .progress-board .wrapper-bottom-right .stones .stone-box {
        padding: 10px 5px;
    }

    .progress-board .wrapper-bottom-right .stones .stone-box h4 {
        font-size: 15px;
    }

    .progress-board .wrapper-bottom-left p {
        font-size: 14px;
    }

    /*------------progress-board-css-end---------*/

    /*-----------dashboard-css-start-------------*/
    .portfolio .dashboard .overall-data-bar .overall-data-box h5 {
        font-size: 16px;
    }

    .portfolio .dashboard .overall-data-bar .overall-data-box p {
        font-size: 24px;
    }

    /*-------------dashboard-css-end-------------*/

    /*-------------fees-css-start-------------*/

    .us-data-card {
        display: block;
        padding: 0 20px !important;
    }

    .mwb-main-wrapper {
        margin: 20px 0 20px 0px;
    }

    .user-wrapper {
        width: 220px;
    }

    /*-------------fees-css-end-------------*/

    /* .upcoming-us-d-table{
      overflow-x: scroll;
  } */

    .re-chart {
        display: block;
    }

    .re-chart .chart-wrapper {
        width: 100%;
        margin-right: 50px;
        height: 300px;
    }

    .re-chart .chart-lable-wrapper {
        width: 50%;
    }

    .re-chart #membership_data {
        width: 100%;
    }

    /* .user-id{
      position: static;
  } */
    /* .us-d-table {
    padding: 20px 0;
    overflow-x: scroll;
    margin: 20px;
 }  */
    .pd-div {
        width: 50%;
    }
}

@media screen and (min-width: 1025px) {
    .up-db-wrapper {
        display: flex;
    }
}

@media screen and (max-width: 1024px) {
    /*-----------------typefprm-css-start-----------------*/

    .w-md-50 {
        width: 50%;
    }

    .w-md-100 {
        width: 100%;
    }

    /*-----------------typefprm-css-end-----------------*/

    .ua-data .ms-box-wrapper {
        display: block;
        width: 80%;
    }

    .abw-main {
        width: 20%;
    }

    .ms-box-deep {
        width: auto;
        margin: 20px 10px;
    }

    .md-board .d-board a {
        padding: 15px 25px;
    }

    /* .up-db h5{
  white-space: nowrap;
  max-width: 50ch;
  overflow: hidden;
  text-overflow: ellipsis;
} */

    .user-img {
        height: fit-content;
    }

    .upcoming-us-d-table {
        padding: 15px;
    }

    .us-filter-wrapper {
        padding: 20px;
    }

    .action-block .a-btn {
        width: auto !important;
    }



    .text-left.user-wrapper.p3 {
        width: 100%;
        max-width: 500px;
    }

    .fh-membership-wrapper {
        display: block;
    }

    .fh-membership {
        width: 100%;
        margin: 0 0 10px !important;
    }

    .uf-history {
        padding: 55px 0 0 30px;
    }

    .uf-history::after {
        top: 51%;
    }

    .uf-history::before {
        bottom: 47%;
    }

    .img-fh {
        width: 70px;
        height: 70px;
        margin: auto 0;
    }

    .sidebar ul ul {
        padding: 10px 0;
    }
}

@media screen and (max-width: 1200px) {

    .login-2-left h1 {
        font-size: 4rem;
    }

    .login-2-left p {
        font-size: 18px;
    }

    .tx-hidden h6 {
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 10ch;
        /* display: flex; */
        white-space: nowrap;
    }

    .us-d-table {
        /* width: 1200px; */
        overflow-x: scroll;
    }

    .table {
        width: 1000px !important;
        max-width: unset !important;
    }
}

@media screen and (min-width: 664px) and (max-width: 767px) {

    .progress-board .wrapper-top .party-data div:nth-child(1),
    .progress-board .wrapper-top .party-data div:nth-child(2),
    .progress-board .wrapper-top .party-data div:nth-child(3),
    .progress-board .wrapper-top .party-data div:nth-child(4),
    .progress-board .wrapper-top .party-data div:nth-child(5) {
        border-bottom: 0.5px solid #ebebeb;
    }
}

@media screen and (min-width: 539px) and (max-width: 663px) {

    .progress-board .wrapper-top .party-data div:nth-child(1),
    .progress-board .wrapper-top .party-data div:nth-child(2),
    .progress-board .wrapper-top .party-data div:nth-child(3),
    .progress-board .wrapper-top .party-data div:nth-child(4) {
        border-bottom: 0.5px solid #ebebeb;
    }

    .progress-board .wrapper-bottom .party-data div:nth-child(1),
    .progress-board .wrapper-bottom .party-data div:nth-child(2),
    .progress-board .wrapper-bottom .party-data div:nth-child(3),
    .progress-board .wrapper-bottom .party-data div:nth-child(4) {
        border-bottom: 0.5px solid #ebebeb;
    }

    .progress-board .party-data .tag p {
        width: 80%;
    }
}

@media screen and (max-width: 538px) {

    .topnav #sidebarToggle {
        padding: 0.25rem 0.7rem !important;
    }

    .progress-board .wrapper-top .party-data div:nth-child(1),
    .progress-board .wrapper-top .party-data div:nth-child(2),
    .progress-board .wrapper-top .party-data div:nth-child(3),
    .progress-board .wrapper-top .party-data div:nth-child(4),
    .progress-board .wrapper-top .party-data div:nth-child(5),
    .progress-board .wrapper-top .party-data div:nth-child(6) {
        border-bottom: 0.5px solid #ebebeb;
    }

    .progress-board .wrapper-bottom .party-data div:nth-child(1),
    .progress-board .wrapper-bottom .party-data div:nth-child(2),
    .progress-board .wrapper-bottom .party-data div:nth-child(3) {
        border-bottom: 0.5px solid #ebebeb;
    }

    .progress-board .party-data .tag p {
        width: 80%;
    }

    .login-2-left {
        display: none;
    }

    .dashboard_title {
        flex-direction: column;
    }

    .modal-dialog {
        margin: auto !important;
    }

    .modal-lg,
    .modal-xl {
        max-width: 360px !important;
    }

    .notificationDiv {
        margin-top: 0.65rem !important;
        margin-right: 0.5rem !important;
    }

    .searchBar {
        margin-top: 15px;
        width: 260px !important;
    }

    .typeahead.dropdown-menu {
        width: 245px !important;
    }

    .notification_menu {
        right: auto !important;
        left: 0 !important;
        width: 18rem !important;
    }

    .d-board i {
        z-index: 0 !important;
    }

    .us-l-data {
        padding: 0 10px;
    }

    .us-db .user-details h6, 
    .us-db .user-details p, 
    .us-db .text-center {
        font-size: 0.8rem;
    }

    .us-filter-header {
        display: flex;
        row-gap: 10px;
    }

    .us-filter-header h3 {
        font-size: 1.0rem;
        color: #505050;
        line-height: 1.5;
    }

    .us-filter-header .ab-btn a {
        padding: 5px 10px 5px 8px !important;
        white-space: nowrap;
        font-size: 0.7rem !important;
        margin: 15px 0 !important;
        color: var(--color-white) !important;
        border-radius: 20px;
        background: var(--color-d-blue) !important;
    }

    .us-filter-header .ab-btn i {
        font-size: 0.8rem;
        height: 20px;
        width: 20px;
        text-align: center;
        margin-right: 2px;
    }

    .bg-title .fa-list,
    .bg-title .fa-columns,
    .bg-title .fa-list-check,
    .bg-title .fa-user-plus,
    .bg-title .fa-product-hunt {
        display: none;
    }

    .up-db-header h5 .fa-wpforms {
        display: none;
    }

    .bg-title h5 {
        font-size: 1.15rem;
        line-height: 1.5;
    }

    .bg-title .ab-btn i {
        font-size: 0.7rem;
        height: 20px;
        width: 20px;
        text-align: center;
        margin-right: 2px;
    }

    .action-block .a-btn {
        padding: 4px 9px !important;
        line-height: 1.5;
    }

    .submitBtnDiv {
        display: flex;
        flex-direction: column;
        row-gap: 10px;
    }

    .transactionBtnDiv {
        display: flex;
        justify-content: center;
    }

    .addShiftMembersDiv {
        display: table !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #editDayNameForm .data_form {
        width: 115px !important;
    }

    #editTemplateNameForm .data_form {
        width: 185px !important;
    }

    .user_details_md_board {
        flex-direction: column;
        row-gap: 100px;
    }

    .schedule-box .exe-day{
        --auto-grid-min-size: 18rem;
    }

    .exercise_unit_div {
        display: flex;
        justify-content: center;
    }

    .addCompanyDiv,
    .add_purchase_history_div {
        flex-direction: column;
        row-gap: 15px;
    }

    .product_data {
        overflow-x: hidden;
        padding: 10px;
    }

    .pd-div {
        padding: 10px;
        margin-bottom: 20px;
        margin-top: 10px;
    }

    .product_image {
        width: 75px;
        height: 75px;
    }

    .pd-details-wrapper p {
        font-size: 0.8rem;
    }

    .cp-box {
        margin-top: 20px;
        padding: 0 10px 10px !important;
    }

    .cp-box h5 {
        font-size: 14px;
    }

    .company_product_table {
        display: block;
        overflow-x: auto;
        font-size: 13px;
    }

    .modal-image-wrapper {
        width: 285px !important;
        height: 220px !important;
    }

    .re-chart .membership-chart-wrapper {
        width: 100%;
        margin-right: 0px;
        height: 300px;
    }

    .re-chart #membership_data {
        width: 100% !important;
    }

    .re-chart #membership_data h5 {
        font-size: 17px;
    }

    .labelDiv {
        background: #e0efff;
        display: block !important;
    }

    .gymImageDropdownMenu {
        transform: translate3d(-125px, 38px, 0px) !important;
    }

    .box_design_div {
        margin-left: 0.6rem;
        margin-right: 0.6rem;
    }

    .us_d_table {
        padding-left: 10px;
        padding-right: 10px;
    }

    .us_data_card {
        display: block !important;
    }

    .mwb_main_wrapper {
        padding: 25px 5px 15px !important;
    }

    .ua-data .ms-box-wrapper {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .user-wrapper {
        width: 280px;
    }

    .current_fee_state {
        font-size: 0.7rem !important;
    }

    .notes-box .pop-btn {
        font-size: 0.7rem;
        padding: 5px 5px !important;
    }

    .dropleft .action-pluse {
        font-size: 0.75rem !important;
        border-radius: 20%;
        background-color: ghostwhite !important;
    }

    .dropleft:hover .action-box-wrapper {
        right: -15px !important;
        top: 30px !important;
        padding: 0;
        background: bisque !important;
    }

    .ua-data .action-box {
        flex-direction: column;
    }

    .dropleft:hover .action-box-wrapper .action-box .btn {
        font-size: 0.8rem;
    }

    .flex-box-2 {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .ua-data .ms-box-header h6 {
        font-size: 0.7rem;
        padding: 6px;
        margin-left: -11px;
        margin-top: -6px;
        width: auto;
        border-radius: 0px 0px 10px 0px;
    }

    .ua-data .ms-box-header p {
        font-size: 0.7rem;
        padding: 6px;
        margin-right: -11px;
        margin-top: -6px;
        width: auto;
        border-radius: 0px 0px 0px 10px;
    }

    .ua-data .ms-box-header h6::after,
    .ua-data .ms-box-header p::after {
        display: none;
    }

    .us-data p {
        font-size: 0.75rem;
        padding: 4px 6px;
    }

    .amount-d-box {
        width: auto;
        margin-left: 0;
    }

    .amount-box p {
        font-size: 0.75rem !important;
    }

    .amount-box p:first-child {
        width: 120px;
    }

    .amount-box p:last-child {
        width: auto;
        margin-top: 0px;
    }

    .fh-shap {
        display: none;
    }

    .user-img-fh {
        padding: 15px 15px;
    }

    .user-img-fh .tx-hidden {
        padding: 0 20px;
    }

    .user-img-fh .tx-hidden  h6 {
        font-size: 1.0rem;
        max-width: 16ch;
    }
    
    .user-img-fh .tx-hidden  h4 {
        font-size: 1.0rem;
    }

    .uf-history-wrapper.sd-bar,
    .uf-history-wrapper.sp-bar {
        margin-left: 3px;
    }

    .uf-history {
        padding: 55px 0 0 15px;
    }

    .uf-header .notes-box {
        right: 5px;
        top: 15px;
    }

    .uf-header h5 {
        font-size: 1.0rem;
        margin-top: -40px;
    }

    .fh-membership-header {
        justify-content: space-between;
    }

    .fh-membership-header p{
        font-size: 0.7rem;
    }

    .fh-membership-header h5{
        font-size: 0.85rem;
    }

    .pagination .page-link {
        padding: 0.45rem 0.5rem !important;
    }

}

@media screen and (min-width: 539px) and (max-width: 1024px) {
    .take_snapshot_btn_div {
        margin-top: 0.25rem;
    }

    .modal-dialog {
        margin: auto !important;
    }

    .modal-lg,
    .modal-xl {
        max-width: 480px !important;
    }

    .amount-d-box {
        width: 420px;
    }

    .amount-d .amount-box p {
        width: 200px;
    }

    .partial_pay_tr th,
    td {
        font-size: 13px;
    }

    .company_product_table {
        display: block;
        overflow-x: auto;
    }

    .modal-image-wrapper {
        width: 385px !important;
        height: 220px !important;
        display: block !important;
        margin: auto !important;
    }

    .modal-image-wrapper img {
        max-width: 100% !important;
        max-height: 100% !important;
        display: block !important;
        margin: auto !important;
    }
}