.msc_modal_overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 15, 0.750);
  backdrop-filter: blur(3px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.msc_modal {
  border-radius: 12px;
  width: 90vw;
  max-width: 90vw;
  overflow: hidden;
  color: #d9d9d9;
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.25s ease;
  max-height: 90vh;
  background: linear-gradient(90deg,rgba(117, 117, 117, 0.164) 0%, rgba(14, 14, 14, 0.164) 100%);
    /* background: rgba(87, 87, 87, 0.164); */
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) 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);
}

@keyframes fadeIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Заголовок */
.msc_modal_header {
  flex: 0 0 auto;
  padding: 2.5vh 2vw;
  text-align: center;
}

.msc_modal_header h3 {
  font-family: "RubikLight";
  margin: 0;
  font-size: 1.2rem;
  color: #eeeeee;
}
.msc_modal_header h3 span{
  font-family: "RubikRegular";
}

.status-active { background-color: #3daf372d; }
.status-pending { background-color: #caad1a21; }
.status-done { background-color: #7a7a7a1c; }
.status-info { background-color: #7a7a7a1c; }


.msc_modal_search{
  margin: 3vh 0;
}

.modal_search_wrapper{
  position: relative;
  display: flex;
  justify-content: center;
}
.modal_search_wrapper::before{
  position: absolute;
  left: 8.4vw;
  content: "\f002";
  font-family: "Font Awesome 6 Pro";
  font-weight: 300;
  font-size: 1.1rem;
}
.modal_search_wrapper > input{
  width: calc(100% - 13.4vw);
  background: transparent;
  outline: none;
  border: none;
  border-bottom: 1px solid #cccccc;
  padding: 0 1rem .5rem 2.5rem;
  color: #d8d8d8;
  font-family: "RubikLight";
  font-size: 1rem;
}


/* Контент */
.msc_modal_body {
  flex: 1 1 auto;
  padding: 6.70vw;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #555 transparent;
}

#modal_aop_brand_car .msc_modal,
#modal_aop_add_order .msc_modal{
  height: 90vh;
}

#modal_aop_brand_car .msc_modal_body,
#modal_aop_add_order .msc_modal_body{
  min-height: 0;
}

.mscbo_field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #49494956;
  padding: 2.5vw 0;
}
.mscbo_fields .mscbo_field:last-child {
  border-bottom: none;
}

#modal_work_day .mscbo_fields .mscbo_field:nth-child(2) {
  border-bottom: none !important;
}

.mscbo_field p {
  margin: 0;
  color: #eeeeee;
  font-family: "RubikRegular";
  font-size: 1rem;
  display: flex;
  align-items: center;
}
.mscbo_field .brand_car {
    width: 1rem;
  height: auto;
  margin-right: .5rem;
  aspect-ratio: 1 / 1;
}
.mscbo_field i {
  margin-left: .35rem;
  transform: translateY(1px);
  color: #66AC63;
}
.mscbo_field input {
  background: transparent;
  outline: none;
  border: none;
  border-bottom: 1px solid #828282;
  font-size: 1rem;
  text-align: center;
  font-family: "RubikMedium";
  color: #C4C4C4;
  padding-bottom: .5vh;
  transform: translateY(.2vh);
}

.mscbo_field .it_time_order input {
  color: #C4C4C4;
  max-width: 13.5vw;
  font-family: "RubikMedium";
}
.mscbo_field .it_date_order input {
  color: #C4C4C4;
  max-width: 23vw;
  font-family: "RubikMedium";
}
.mscbo_field .it_client_number input {
  color: #C4C4C4;
  max-width: 33vw;
  font-family: "RubikMedium";
}

.mscbo_field p:last-child {
  color: #C4C4C4;
  font-family: "RubikMedium";
}

#modal_work_day .mscbo_field p:last-child {
  color: #C4C4C4;
  font-family: "RubikMedium";
}

.mscbo_services h4 {
  text-align: center;
  margin-top: 2vh;
  font-family: "RubikRegular";
  font-size: 1.1rem;
}

.mscbo_service_items {
  max-height: 10.5vh;
  height: 10.5vh;
    overflow-y: auto;
}

#modal_work_day .mscbo_service_items{
  max-height: 22vh;
  height: auto !important;
    overflow-y: auto;
}

.mscbo_service_item {
  background: #252525;
  border-radius: .75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 5vh;
  padding: 0 0 0 4vw;
  margin-bottom: .5vh;
  overflow: hidden;
}


#modal_work_day .mscbo_service_item{
  padding: 0;
}

#modal_work_day .mscbo_service_item p{
  font-size: 1rem;
  padding-left: 4vw;
  flex: 1;
}

#modal_work_day .mscbo_service_item .wd_number_order{
  font-family: "RubikRegular";
}
#modal_work_day .mscbo_service_item > .msswd_check {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 3.5vw;
  background: #3579288c;
  flex: 0 0 auto;
}

#modal_work_day .mscbo_service_item .service_item_coast {
  flex: 0 0 auto;
}

#modal_work_day .mscbo_service_item > .msswd_check > .fa-check {
  font-size: 1.4rem;
  color: #d8d8d8;
}

#modal_work_day .mscbo_service_items .mscbo_service_item:last-child {
  margin: 0;
}

.mscbo_service_items .mscbo_service_item:last-child {
  margin: 0;
}

.mscbo_service_item > div:not(.msswd_check) {
  height: 100%;
  display: flex;
  align-items: center;
}

.mscbo_service_item p {
  margin: 0;
  flex: 1;
  font-size: .85rem;
  font-family: "RubikLight";
  white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 2vw;
}

.service_item_coast {
  height: 100%;
  display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3.5vw;
    background: #2b2b2b;
    font-family: "RubikMedium";
}
.service_item_remove {
  height: 100%;
  display: flex;
    align-items: center;
    padding: 0 2vw;
    background: #5f5f5f5d;
    border-top-right-radius: .75rem;
    border-bottom-right-radius: .75rem;
    font-size: 1.2rem;
    color: #d63c3cea;
}

.mscbo_total {
  background: #2a2a2a;
  border-radius: .75rem;
  padding: 3vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #00b86b;
  margin-top: 2vh;
  font-family: "RubikLight";
    color: #d9d9d9;
}

#modal_work_day .mscbo_total {
  margin-top: 3vh;
}

.mscbo_total p {
  margin: 0;
}
.mscbo_total span {
  font-family: "RubikMedium";
}
.mscbo_total span > i.fa-regular {
  margin-right: .5rem;
  color: #66AC63;
}

/* Нижня панель */
.msc_modal_footer {
  flex: 0 0 auto;
  background: #7a7a7a1c;
  display: flex;
  height: 6vh;
}

.mscbo_btn {
  border: none;
  padding: 8px 12px;
  font-family: "RubikRegular";
  cursor: pointer;
  color: #EEEEEE;
  background-color: #4b4b4b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: 0.2s;
  transition: flex .3s ease;
}

.mscbo_btn.success { background-color: #3fa53a4f; font-family: "RubikMedium"; }
.mscbo_btn.pending { background-color: #ad951a4f; font-family: "RubikMedium"; }
.mscbo_btn.danger { background-color: #b32d2da1; }
.mscbo_btn.add { background-color: #5a5a5a5d; font-family: "RubikLight"; }
.mscbo_btn.close { background-color: #4747475d; flex: 1; }
.mscbo_btn.done { background-color: #7c7c7c5d; color: #d4d4d4; font-family: "RubikMedium"; }
.mscbo_btn.empty { background-color: transparent; }
.mscbo_btn.empty_s { background-color: transparent; }

#modal_active .mscbo_btn.success{ transition: flex .3s ease-in-out; flex:6; position: relative; overflow: hidden; }
#modal_active .mscbo_btn.success > p{ display: block; }
#modal_active .mscbo_btn.success > i{ display: none; }
#modal_active .mscbo_btn.success.preused{ flex:1.5; }
#modal_active .mscbo_btn.success.preused > p{ display: none; }
#modal_active .mscbo_btn.success.preused > i{ display: block; }
#modal_active .mscbo_btn.success .msc_hold_progress {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: rgba(0, 0, 0, 0.151);
    pointer-events: none;
    transition: width 0s linear;
}
#modal_processing .mscbo_btn.success{ transition: flex .3s ease-in-out; flex:6; position: relative; overflow: hidden; }
#modal_processing .mscbo_btn.success > p{ display: block; }
#modal_processing .mscbo_btn.success > i{ display: none; }
#modal_processing .mscbo_btn.success.preused{ flex:1.5; }
#modal_processing .mscbo_btn.success.preused > p{ display: none; }
#modal_processing .mscbo_btn.success.preused > i{ display: block; }
#modal_processing .mscbo_btn.success .msc_hold_progress {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: rgba(0, 0, 0, 0.151);
    pointer-events: none;
    transition: width 0s linear;
}
#modal_planned .mscbo_btn.pending{ transition: flex .3s ease-in-out; flex:6; position: relative; overflow: hidden; }
#modal_planned .mscbo_btn.pending > p{ display: block; white-space: nowrap; }
#modal_planned .mscbo_btn.pending > i{ display: none; }
#modal_planned .mscbo_btn.pending.preused{ flex:1.5; }
#modal_planned .mscbo_btn.pending.preused > p{ display: none; }
#modal_planned .mscbo_btn.pending.preused > i{ display: block; }
#modal_planned .mscbo_btn.pending .msc_hold_progress {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: rgba(0, 0, 0, 0.151);
    pointer-events: none;
    transition: width 0s linear;
}
:where(#modal_active, #modal_planned) .mscbo_btn.danger.preused{ flex:6; }
:where(#modal_active, #modal_planned) .mscbo_btn.danger{ transition: flex .3s ease-in-out; flex:1.5; position: relative; overflow: hidden; }
:where(#modal_active, #modal_planned) .mscbo_btn.danger.preused > p{ display: block; }
:where(#modal_active, #modal_planned) .mscbo_btn.danger.preused > i{ display: none; }
:where(#modal_active, #modal_planned) .mscbo_btn.danger > p{ display: none; }
:where(#modal_active, #modal_planned) .mscbo_btn.danger > i{ display: block; }
:where(#modal_active, #modal_planned) .mscbo_btn.danger .msc_hold_progress {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: rgba(0, 0, 0, 0.151);
    pointer-events: none;
    transition: width 0s linear;
}
#modal_active .mscbo_btn.close{ flex:1; }
#modal_active .mscbo_btn.add{ flex:3; }

#modal_completed .mscbo_btn.done{ flex:6; }
#modal_completed .mscbo_btn.empty{ flex:3; }
#modal_completed .mscbo_btn.close{ flex:3; }

#modal_processing .mscbo_btn.success{ flex:6; }
#modal_processing .mscbo_btn.empty{ flex:3; }
#modal_processing .mscbo_btn.close{ flex:3; }

#modal_planned .mscbo_btn.add{ flex:3; }







.mscbo_call_client h4{
  text-align: center;
    margin: 0;
    font-family: "RubikLight";
    font-size: .8rem;
    color: #cccccc;
}

.mscbo_call_client h4 > i{
  margin: 0 2vw;
}

#modal_call .mscbo_btn.success{ flex:4; font-size: 1.5rem; }
#modal_call .mscbo_btn.close{ flex:1; }
#modal_call .mscbo_btn.empty{ flex:5; }
#modal_call .mscbo_btn.empty_s{ flex:3; }





.mscbo_tc_item {
  border-radius: 1rem;
    background: linear-gradient(90deg,rgba(87, 87, 87, 0.164) 0%, rgba(34, 34, 34, 0.164) 100%);
    /* background: rgba(87, 87, 87, 0.164); */
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) 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);
  padding: 3vw 5vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1vh;
  font-family: "RubikRegular";
    color: #eeeeee;
  transition: background .05s ease-in-out;
  transition: width .2s ease-in-out;
  overflow:visible;
}

#modal_aop_add_order .mscbo_tc_item{
  justify-content: end;
  position: relative;
}

#modal_aop_add_order .mscbo_tc_item > .pick_counter{
  position: absolute;
  left: -1rem;
  background: #547a64;
  width: 1.75rem;
  border-radius: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  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);
  opacity: 0;
  transition: opacity 0s ease-in-out;
}

#modal_aop_add_order .mscbo_tc_item p{
  flex: 1;
  padding-right: 2.5vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#modal_aop_add_order .mscbo_tc_item p.coast{
  flex: 0 0 auto !important;
  margin-right: 2vw;
  font-family: "RubikRegular";
  padding: 0;
}
#modal_aop_add_order .mscbo_tc_item i{
  flex: 0 0 auto !important;
}

.mscbo_tc_item.brand{
  justify-content: inherit;
}
.mscbo_tc_item.brand img{
  flex: 1;
  max-width: 10%;
  height: auto;
}
.mscbo_tc_item.brand p{
  flex: 9;
  padding-left: 3vw;
  font-family: "RubikLight";
}
.mscbo_tc_item.brand p.coast{
  flex: 3 !important;
  text-align: right;
}
.mscbo_tc_item.brand i{
  flex: 1;
}

.mscbo_tc_item.active {
  background: linear-gradient(90deg,rgba(87, 211, 105, 0.315) 0%, rgba(87, 211, 105, 0.096) 100%);
}

.mscbo_tc_item p {
  margin: 0;
  font-family: "RubikLight";
}
.mscbo_tc_item span {
  font-family: "RubikMedium";
}
.mscbo_tc_item i.fa-solid {
  color: #66AC63;
  font-size: 1.3rem;
  opacity: 0;
  transition: opacity .05s ease-in-out;
}
.mscbo_tc_item.active i.fa-solid{ opacity: 1; }
#modal_aop_type_car .mscbo_btn.success{ flex:6; }
#modal_aop_type_car .mscbo_btn.close{ flex:1; }
#modal_aop_type_car .mscbo_btn.empty{ flex:4; }
#modal_aop_type_car .mscbo_btn.empty_s{ flex:2; }

#modal_aop_brand_car .mscbo_btn.success{ flex:6; }
#modal_aop_brand_car .mscbo_btn.close{ flex:1; }
#modal_aop_brand_car .mscbo_btn.empty{ flex:4; }
#modal_aop_brand_car .mscbo_btn.empty_s{ flex:2; }

#modal_aop_add_order .mscbo_btn.success{ flex:6; }
#modal_aop_add_order .mscbo_btn.close{ flex:1; }
#modal_aop_add_order .mscbo_btn.empty{ flex:4; }
#modal_aop_add_order .mscbo_btn.empty_s{ flex:2; }

#modal_work_day .mscbo_btn.close{ flex:1; }
#modal_work_day .mscbo_btn.empty{ flex:12; }



#modal_start_work .mscbo_call_client > h4{
  font-size: .95rem;
}

#modal_start_work .mscbo_btn.success{ flex:4; }
#modal_start_work .mscbo_btn.add{ flex:4; }
#modal_start_work .mscbo_btn.close{ flex:1; }
#modal_start_work .mscbo_btn.empty{ flex:3; }
#modal_start_work .mscbo_btn.empty_s{ flex:1; }

:where(#modal_start_nav, #modal_end_nav, #modal_settings_theme, #modal_settings_applied_order, #modal_settings_show_order, #modal_settings_alerts) .mscbo_btn.success{ flex:6; }
:where(#modal_start_nav, #modal_end_nav, #modal_settings_theme, #modal_settings_applied_order, #modal_settings_show_order, #modal_settings_alerts) .mscbo_btn.close{ flex:1; }
:where(#modal_start_nav, #modal_end_nav, #modal_settings_theme, #modal_settings_applied_order, #modal_settings_show_order, #modal_settings_alerts) .mscbo_btn.empty{ flex:4; }
:where(#modal_start_nav, #modal_end_nav, #modal_settings_theme, #modal_settings_applied_order, #modal_settings_show_order, #modal_settings_alerts) .mscbo_btn.empty_s{ flex:2; }












#modal_active[data-rules="viewer"] .mscbo_service_item .service_item_coast{ background: #505050; }
#modal_active[data-rules="viewer"] :where(.mscbo_btn.success, .mscbo_btn.danger, .service_item_remove) { display: none !important; }
#modal_active[data-rules="viewer"] .mscbo_btn.add { flex: 11; opacity: 0; pointer-events: none; }
#modal_active[data-rules="viewer"] .mscbo_btn.close { flex: 1; }

#modal_planned[data-rules="viewer"] .mscbo_service_item .service_item_coast{ background: #505050; }
#modal_planned[data-rules="viewer"] :where(.mscbo_btn.pending, .mscbo_btn.danger, .service_item_remove) { display: none !important; }
#modal_planned[data-rules="viewer"] .mscbo_btn.add { flex: 11; opacity: 0; pointer-events: none; }
#modal_planned[data-rules="viewer"] .mscbo_btn.close { flex: 1; }
#modal_planned[data-rules="viewer"] .fa-pen { display: none; }
#modal_planned[data-rules="viewer"] :where(.it_type_car, .it_brand_car, input) { pointer-events: none; }
#modal_planned[data-rules="viewer"] input { padding: 0; transform: translateY(.05vh) translateX(.8vh); border-bottom: none; }





#modal_settings_about .msc_modal_body{display: flex; flex-direction: column; align-items: center; }
#modal_settings_about img{ max-width: 20vw; height: auto; }
#modal_settings_about h2{ font-family: "RubikRegular"; font-size: 1.7rem; font-weight: 500; margin: 3vh 0 3vh 0; }
#modal_settings_about h4{ font-family: "RubikRegular"; font-size: .9rem; font-weight: 500; margin: 0; color: #acacac; }
#modal_settings_about span{ font-family: "RubikLight"; margin: 0; }
#modal_settings_about .mscbo_btn.close { flex: 1; }
#modal_settings_about .mscbo_btn.empty { flex: 11; }