@media (max-width: 767px) {

  /* Login Page  */
  #login-mobile-img {
    width: 50%;
    margin-top: 30%;

  }

  #min-size {
    text-align: center;
    margin-left: 5%;
    margin-right: 5%;
  }

  .fnt-24 {
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 26px;
  }

  .mgr-10 {
    margin-top: 30%;
  }

  #min-hide {
    display: none;
  }

  #content-desktop {display: none;}
  #content-mobile {display: revert;}
  #content-report-payment-mobile {display: revert;}

  .responsive-column-text { 
    display: block;
    max-width: 80%;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
  }

  .upcoming-bookings>tbody>tr>td:first-child {
    border-left: 15px solid #00BFFF !important;
    color: #768293 !important;
    font-weight: normal !important;
  }

  #datatable-membership>tbody>tr>td:first-child {
    border-left: 15px solid #8565c4 !important;
    color: #768293 !important;
    font-weight: normal !important;
  }

  .fc .fc-daygrid-day-number,
  .fc-col-header-cell a {
    color: black !important;
    font-size: 8px !important;
  }

  #calendar h2.fc-toolbar-title {
    position: relative !important;
    right: 6em !important;
    font-size: 8px !important;
  }

  .fc-daygrid-event-harness>.fc-daygrid-event {
    background-color: #3788d8 !important;
    color: white !important;
    padding: 9px 4px 14px !important;
    overflow: hidden !important;
    font-size: 8px !important;
  }

  .fc .fc-daygrid-day-number,
  .fc-col-header-cell a {
    color: black !important;
    font-size: 6px !important;
  }

  a.fc-daygrid-more-link,
  div.fc-timegrid-more-link-inner {
    color: white !important;
    font-size: 7px !important;
  }

  .fc-dayGridMonth-button,
  .fc-timeGridWeek-button,
  .fc-timeGridDay-button {
    font-size: 5px !important;
  }

  #calendar div.fc-button-group button.fc-prev-button,
  #calendar div.fc-button-group button.fc-next-button {
    border: 1px solid white;
    padding: 0.4em 0.65em 0em 0em;
    color: #959595;
    font-size: 8px !important;
  }

  #calendar button {
    background-color: white;
    border: 1px solid #d6d6d6;
    color: #222222;
    font-size: 8px !important;
  }

  .fc-day-today a.fc-daygrid-day-number {
    background: #3788d8 !important;
    border-radius: 50% !important;
    color: white !important;
    font-weight: bold !important;
    font-size: 8px !important;
  }

  .fc-timegrid-event {
    background-color: #3788d8 !important;
    color: white !important;
    font-size: 8px !important;
    padding: 9px 4px 14px !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    overflow: hidden !important;
  }

}

@media (min-width: 767px) and (max-width: 1024px) {
  #content-report-payment-mobile {
    display: none;
  }
  
  .fc .fc-daygrid-day-number,
  .fc-col-header-cell a {
    color: black !important;
    font-size: 8px !important;
  }

  #calendar h2.fc-toolbar-title {
    position: relative !important;
    right: 6em !important;
    font-size: 8px !important;
  }

  .fc-daygrid-event-harness>.fc-daygrid-event {
    background-color: #3788d8 !important;
    color: white !important;
    padding: 9px 4px 14px !important;
    overflow: hidden !important;
    font-size: 8px !important;
  }

  .fc .fc-daygrid-day-number,
  .fc-col-header-cell a {
    color: black !important;
    font-size: 6px !important;
  }

  a.fc-daygrid-more-link,
  div.fc-timegrid-more-link-inner {
    color: white !important;
    font-size: 7px !important;
  }

  .fc-dayGridMonth-button,
  .fc-timeGridWeek-button,
  .fc-timeGridDay-button {
    font-size: 5px !important;
  }

  #calendar div.fc-button-group button.fc-prev-button,
  #calendar div.fc-button-group button.fc-next-button {
    border: 1px solid white;
    padding: 0.4em 0.65em 0em 0em;
    color: #959595;
    font-size: 8px !important;
  }

  #calendar button {
    background-color: white;
    border: 1px solid #d6d6d6;
    color: #222222;
    font-size: 8px !important;
  }

  .fc-day-today a.fc-daygrid-day-number {
    background: #3788d8 !important;
    border-radius: 50% !important;
    color: white !important;
    font-weight: bold !important;
    font-size: 8px !important;
  }

  .fc-timegrid-event {
    background-color: #3788d8 !important;
    color: white !important;
    font-size: 8px !important;
    padding: 9px 4px 14px !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    overflow: hidden !important;
  }

  #content-desktop {
    display: block;
  }

  #content-mobile {
    display: none;
  }

  .upcoming-bookings>tbody>tr>td:first-child {
    border-left: 15px solid #00BFFF !important;
  }

  #datatable-membership>tbody>tr>td:first-child {
    border-left: 15px solid #8565c4 !important;
    color: #768293 !important;
    font-weight: normal !important;
  }
}

@media (min-width: 1025px) {
  #content-desktop {display: block;}
  #content-mobile {display: none;}
  #content-report-payment-mobile {display: none;}
}

@media (width: 280px) {
  .custom-col-3 {
    width: 35% !important;
  }

  .custom-col-6 {
    width: 55% !important;
  }

  .customer-download-template-btn {
    right: 0rem !important;
  }

  .add-customer-btn-section > button {
    font-size: 0.69rem !important;
  }
}

@media (width: 540px) {
  .customer-import-data-btn {
    right: 4rem !important;
  }

  .customer-download-template-btn {
    right: 7rem !important;
  }
}

@media (min-width: 360px) {
  .add-customer-btn-section {
    position: relative !important;
    left: 0.8rem !important;
  }
}

@media (min-width: 375px) {
  .add-customer-btn-section {
    position: relative !important;
    left: 1.35rem !important;
  }
}

@media (min-width: 390px) {
  .add-customer-btn-section {
    position: relative !important;
    left: 1.8rem !important;
  }
}

@media (min-width: 412px) {
  .add-customer-btn-section {
    position: relative !important;
    left: 2.4rem !important;
  }
}

@media (min-width: 414px) {
  .add-customer-btn-section {
    position: relative !important;
    left: 2.5rem !important;
  }
}

@media (min-width: 540px) {
  .add-customer-btn-section {
    position: relative !important;
    left: 6.5rem !important;
  }
}

#max-hide {
  display: none;
}

@media (width: 820px) {
  .download-customer-section {
    margin-top: 0rem !important;
    float: left !important;
    margin-right: 20rem !important;
  }
}

@media (width: 768px) {
  .download-customer-section {
    margin-top: 0rem !important;
    float: left !important;
    margin-right: 20rem !important;
  }
}

@media (max-width: 600px) {
  /* CSS rules for small phones */
  .bank_tag_search .select2-selection__rendered {
    padding: 2.6% !important;
  }
}