.mscb_records_page{
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding-top: 11.16%;
  width: 100%;
  position: relative;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  display: none;
}

body:not(.kt_workeradm) .workeradm_only,
body:not(.kt_workeradm) .mscb_records_page{
  display: none !important;
  pointer-events: none !important;
}

body.kt_workeradm .mscf_nav_button.workeradm_only{
  display: flex;
}

.mscbrp_header{
  position: absolute;
  transform: translateY(-1px);
  width: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to bottom, rgba(15, 15, 15, 1) 0%, rgba(15, 15, 15, 1) calc(1.75rem + 7.3333%), rgba(15, 15, 15, 0) 100%);
  padding-bottom: 1.4rem;
}

.mscbrp_header > h2{
  margin: 0 !important;
  font-size: 1.5rem;
  font-family: "RubikRegular";
  color: #D9D9D9;
}

.mscbrp_filters{
  width: 100%;
  margin-top: 7.3333%;
  padding: 0 5.3%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: .5rem;
}

.mscbrp_filter{
  min-height: 2.8rem;
  border: 0;
  outline: 0;
  border-radius: .9rem;
  background: linear-gradient(90deg,rgba(87, 87, 87, 0.164) 0%, rgba(34, 34, 34, 0.164) 100%);
  backdrop-filter: blur(6px) saturate(160%);
  -webkit-backdrop-filter: blur(6px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.055);
  box-shadow:
      0 4px 12px rgba(0, 0, 0, 0.466),
      0 0 20px rgba(255, 255, 255, 0.027);
  color: #cfcfcf;
  font-family: "RubikLight";
  font-size: .82rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: 0 .55rem;
  line-height: 1;
}

.mscbrp_filter.active{
  background: linear-gradient(90deg,rgba(91, 218, 110, 0.295) 0%, rgba(60, 146, 73, 0) 100%);
  color: #ededed;
}

.mscbrp_filter i{
  font-size: .95rem;
  transform: translateY(.5px);
}

.mscbrp_body{
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10.6rem 5.3% calc(7rem + 4vh) 5.3%;
  position: relative;
}

.mscbrp_list{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

.mscbrp_row{
  width: 100%;
  min-height: 4.75rem;
  border-radius: 1rem;
  background: linear-gradient(90deg,rgba(100, 100, 100, 0.164) 0%, rgba(7, 7, 7, 0.164) 100%);
  backdrop-filter: blur(6px) saturate(160%);
  -webkit-backdrop-filter: blur(6px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.055);
  box-shadow:
      0 4px 12px rgba(0, 0, 0, 0.466),
      0 0 20px rgba(255, 255, 255, 0.027);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  padding: .75rem .75rem .75rem .9rem;
  color: #d9d9d9;
  overflow: hidden;
  position: relative;
}

.mscbrp_row::before{
  content: '';
  position: absolute;
  left: 0;
  top: .7rem;
  bottom: .7rem;
  width: 3px;
  border-radius: 999px;
  background: rgba(91, 218, 110, .55);
  box-shadow: 0 0 22px rgba(91, 218, 110, .24);
}

.mscbrp_row[data-status="processing"]::before{
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 0 22px rgba(255, 255, 255, .18);
}

.mscbrp_row[data-status="planned"]::before{
  background: rgba(214, 198, 87, .62);
  box-shadow: 0 0 22px rgba(214, 198, 87, .2);
}

.mscbrp_row[data-status="completed"]::before{
  background: rgba(170, 170, 170, .55);
  box-shadow: 0 0 22px rgba(170, 170, 170, .16);
}

.mscbrp_row_main{
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .75rem;
}

.mscbrp_brand_icon{
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 2.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .85rem;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .045);
}

.mscbrp_brand_icon svg{
  width: 68%;
  height: 68%;
  color: #93e6889a !important;
}

.mscbrp_info{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.mscbrp_title{
  display: flex;
  align-items: baseline;
  gap: .45rem;
  min-width: 0;
}

.mscbrp_title h3{
  margin: 0 !important;
  color: #f0f0f0;
  font-family: "RubikRegular";
  font-weight: 400;
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mscbrp_title span{
  color: #858585;
  font-family: "RubikLight";
  font-size: .78rem;
  white-space: nowrap;
}

.mscbrp_meta{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  color: #bcbcbc;
  font-family: "RubikLight";
  font-size: .78rem;
  line-height: 1;
}

.mscbrp_meta_item{
  display: inline-flex;
  align-items: center;
  gap: .28rem;
}

.mscbrp_meta_item i{
  color: #8d8d8d;
  font-size: .8rem;
}

.mscbrp_status{
  padding: .28rem .5rem;
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  color: #cfcfcf;
}

.mscbrp_actions{
  display: flex;
  align-items: center;
  gap: .45rem;
}

.mscbrp_action{
  width: 2.45rem;
  height: 2.45rem;
  border-radius: .85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #8d8d8d3a;
  border: 1px solid rgba(255, 255, 255, 0.055);
  box-shadow:
      0 4px 12px rgba(0, 0, 0, 0.144),
      0 0 20px rgba(255, 255, 255, 0.027);
  color: #cfcfcf;
  font-size: 1.05rem;
}

.mscbrp_action.call{
  background: #669e6d3a;
}

.mscbrp_empty{
  min-height: 55vh;
  width: 100%;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.mscbrp_list.empty .mscbrp_empty{
  display: flex;
}

.mscbrp_empty i{
  font-size: 32vw;
  color: #252525;
  font-weight: 100 !important;
}

.mscbrp_empty h2{
  font-size: 1.2rem;
  font-family: "RubikRegular";
  font-weight: 400;
  color: #3f3f3f;
  margin: 10% 0 0 0 !important;
}

.mscbrp_empty p{
  margin: .6rem 0 0 0;
  font-size: .9rem;
  font-family: "RubikLight";
  color: #383838;
}

#custom_calendar_records{
  width: 100%;
  box-sizing: border-box;
  user-select: none;
}

#records_cal_days div.selected{
  background: linear-gradient(90deg, rgba(87, 211, 105, 0.315) 0%, rgba(87, 211, 105, 0.096) 100%) !important;
  backdrop-filter: blur(6px) saturate(160%);
  -webkit-backdrop-filter: blur(6px) saturate(160%);
  outline: 1px solid rgba(255, 255, 255, 0.103);
  box-shadow:
      0 4px 12px rgba(0, 0, 0, 0.466),
      0 0 20px rgba(255, 255, 255, 0.027);
}

@media only screen and (max-width: 385px){
  .mscbrp_filters{ gap: .4rem; }
  .mscbrp_filter{ font-size: .74rem; padding: 0 .35rem; }
  .mscbrp_body{ padding-top: 10rem; }
  .mscbrp_row{ grid-template-columns: minmax(0, 1fr) auto; padding-right: .55rem; }
  .mscbrp_brand_icon{ width: 2rem; height: 2rem; flex-basis: 2rem; }
  .mscbrp_action{ width: 2.25rem; height: 2.25rem; }
}

.mscbrp_row[data-status="moved"]::before{
  background: rgba(82, 180, 98, .72);
  box-shadow: 0 0 22px rgba(82, 180, 98, .26);
}

.mscbrp_row[data-status="accepted"]::before{
  background: rgba(214, 198, 87, .68);
  box-shadow: 0 0 22px rgba(214, 198, 87, .22);
}

.mscbrp_row[data-status="new"]::before{
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 0 22px rgba(255, 255, 255, .16);
}

.mscbrp_status.new{ color:#eeeeee; }
.mscbrp_status.accepted{ color:#e7d872; background: rgba(214,198,87,.09); }
.mscbrp_status.moved{ color:#83e28e; background: rgba(82,180,98,.10); }

#records_cal_days div{
  position: relative;
}

#records_cal_days div span{
  position: relative;
  z-index: 2;
}

#records_cal_days div small{
  position: absolute;
  right: .28rem;
  bottom: .22rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 .25rem;
  border-radius: 999px;
  background: rgba(91, 218, 110, .18);
  color: #b8f1bd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .58rem;
  font-family: "RubikMedium";
  line-height: 1;
}

#records_cal_days div.has-records::after{
  content: '';
  position: absolute;
  width: .32rem;
  height: .32rem;
  border-radius: 50%;
  left: .35rem;
  bottom: .35rem;
  background: rgba(91, 218, 110, .9);
  box-shadow: 0 0 10px rgba(91, 218, 110, .45);
}

#modal_client_record .msc_modal_body{
  padding-bottom: 1rem;
}

#modal_client_record .cr_fields .mscbo_field p:last-child{
  text-align: right;
}

#modal_client_record .cr_brand_car{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .45rem;
}

#modal_client_record .brand_car{
  width: 1.4rem;
  height: 1.4rem;
  color: #d9d9d9;
}

#modal_client_record .cr_moved_status{
  color: #e6d777 !important;
}

#modal_client_record .cr_moved_status.done{
  color: #83e28e !important;
}

#modal_client_record .cr_services{
  margin-top: 1rem;
}

#modal_client_record .cr_services h4{
  margin: 0 0 .75rem 0;
  font-family: "RubikRegular";
  color: #d9d9d9;
  font-size: 1rem;
  font-weight: 400;
}

#modal_client_record .cr_service_items{
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-height: 28vh;
  overflow-y: auto;
}

#modal_client_record .cr_service_item,
#modal_client_record .cr_empty_services{
  min-height: 2.75rem;
  border-radius: .9rem;
  background: linear-gradient(90deg,rgba(87, 87, 87, 0.164) 0%, rgba(34, 34, 34, 0.164) 100%);
  border: 1px solid rgba(255, 255, 255, 0.055);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 .85rem;
  color: #d9d9d9;
  font-family: "RubikLight";
  font-size: .92rem;
  gap: .8rem;
}

#modal_client_record .cr_service_item p{
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#modal_client_record .cr_service_item span{
  flex: 0 0 auto;
  font-family: "RubikMedium";
  color: #efefef;
}

#modal_client_record .cr_empty_services{
  justify-content: center;
  color: #777;
}

#modal_client_record .mscbo_btn.success.disabled{
  opacity: .45;
  pointer-events: none;
  filter: grayscale(1);
}