body{
    --color-active-button: #254D23;
    --color-inactive-button: #252525;
    --color-active-bar: #316127;
    --color-planned-bar: #615727;
    --color-completed-bar: #5e5e5e;
}


.mscb_orders_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;
}

.mscbop_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%);
}
.mscbop_header > h2 {
  margin: 0 !important;
  font-size: 1.5rem;
  font-family: "RubikRegular";
  color: #D9D9D9;
}

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

.mscbop_header_counters{
  position: absolute;
  left: 0;
  transform: translate(.25rem, -.25rem);
    width: 100%;
    margin-top: 7.3333%;
    padding: 0 15vw;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    justify-items: end;
    gap: 5vw;
  z-index: 100;
  pointer-events: none;
}

.mscbop_button_counter{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .25rem;
  min-width: 1.3rem;
  height: 1.3rem;
}
.mscbop_button_counter > p{
  margin: 0;
  line-height: .8;
  font-family: "RubikLight";
  font-size: .85rem;
  color: #d9d9d9b6;
}

.mscbop_button{
    aspect-ratio: 1.2 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    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);
    color: #c4c4c4;
    transition: background 0.1s ease-in-out;
}

.mscbop_button.active {
    background: linear-gradient(90deg,rgba(91, 218, 110, 0.295) 0%, rgba(60, 146, 73, 0) 100%);
}
.mscbop_button > i{
    font-size: 4.25vw;
    color: #e0e0e0ef;
}

.mscbop_body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 9rem 5.3% 9.3333% 5.3%;
  position: relative;
}

.mscbop_orders {
    width: 100%;
    display:none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out .05s;
    margin-bottom: calc(5.2rem + 4vh);
}

.mscbop_orders.null {
    width: 100%;
    height: 100%;
}
.mscbop_orders_nulled {
    width: 100%;
    height: 70%;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.mscbop_orders.null .mscbop_orders_nulled{
    display: flex;
}

.mscbop_orders_nulled i{
    font-size: 40vw;
    color: #252525;
    font-weight: 100 !important;
}
.mscbop_orders_nulled h2{
    font-size: 1.2rem;
    font-family: "RubikRegular";
    font-weight: 400;
    color: #3f3f3f;
    margin: 12% 0 0 0 !important;
}

@media only screen and (max-width: 385px) {
  .mscbop_orders_nulled i{
    font-size: 30vw;
    color: #252525;
  }
  .mscbop_orders_nulled h2{
      font-size: 1rem;
  }
}

.mscbop_orders.active {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    opacity: 1;
    gap: 1rem;
}
.mscbop_orders.active.null {
    display: flex; align-items: start; opacity: 1 !important;
}

.mscbop_orders_item {
  display: flex;
  flex-direction: column;
  align-items: center; /* Вирівнює по вертикалі */
  justify-content: space-between; /* Розподіл елементів */
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 1rem;
    background: linear-gradient(90deg,rgba(100, 100, 100, 0.164) 0%, rgba(7, 7, 7, 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);
    overflow: hidden;
    position: relative;
    filter: blur(0px);
    transform: scale(1);
    transition: filter .2s ease-in-out, transform .2s ease-in-out;
}

.mscbop_orders_item h4, .mscbop_orders_item h2 {
  margin: 0 !important;
}

.mscbop_oi_name_car {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3.5vw;
  flex: 1 1 100%;
  transform: translateY(-5%);
}

.oi_car_brand{
    width: 30%;
    height: auto;
    aspect-ratio: 1 / 1;
    color: #93e6889a !important;
}


.mscbop_oi_name_car > i {
  font-size: 1.2rem;
  color: #D9D9D9;
}

.mscbop_oi_name_car > h2 {
  font-size: 1.2rem;
  font-family: "RubikLight";
  color: #D9D9D9;
  display: flex; flex-direction: column;
  align-items: center;
}
.mscbop_oi_name_car > h2 > p {
  margin: 0;
  font-size: .85rem;
  font-family: "RubikLight";
  font-weight: 100;
  color: #7e7e7e;
  margin-top: .5rem;
}



.mscbop_oi_date_time {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-evenly;
  align-items: center;
  background: #2a2a2a3b;
  width: 100%;
  padding: .5rem 0;
}

#orders_active .mscbop_orders_item > .mscbop_oi_date_time {
  box-shadow:
        0 4px 4rem rgba(42, 151, 65, 0.658),
        0 0 20px rgba(255, 255, 255, 0.027);
}
#orders_planned .mscbop_orders_item > .mscbop_oi_date_time {
  box-shadow:
        0 4px 4rem rgba(175, 173, 41, 0.658),
        0 0 20px rgba(255, 255, 255, 0.027);
}
#orders_completed .mscbop_orders_item > .mscbop_oi_date_time {
  box-shadow:
        0 4px 4rem rgba(182, 182, 182, 0.658),
        0 0 20px rgba(255, 255, 255, 0.027);
}
#orders_processing .mscbop_orders_item > .mscbop_oi_date_time {
  box-shadow:
        0 4px 4rem rgba(255, 255, 255, 0.658),
        0 0 20px rgba(255, 255, 255, 0.027);
  animation: blink_processing 1s infinite ease-in-out;
}

@keyframes blink_processing {
    0% {
        box-shadow:
            0 4px 4rem rgba(255, 255, 255, 0.658),
            0 0 20px rgba(255, 255, 255, 0.027);
    }
    50% {
        box-shadow:
            0 4px 6rem rgba(42, 151, 65, 0.658),
            0 0 40px rgba(255, 255, 255, 0.2);
    }
    100% {
        box-shadow:
            0 4px 4rem rgba(255, 255, 255, 0.658),
            0 0 20px rgba(255, 255, 255, 0.027);
    }
}

.mscbop_oi_date_time > .oi_time {
    font-size: 1rem;
    font-family: "RubikMedium";
    color: #c4c4c4;
    line-height: 1;
    transform: translateY(1px);
}
.mscbop_oi_date_time > .oi_date {
    font-size: .85rem;
    font-family: "RubikLight";
    color: #c4c4c4;
    line-height: 1;
}

.mscbop_oi_button_call {
    height: 100%;
  background: #40404079;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  padding: 0 3.1%;
  color: #66AC63;
  width: 10vw;

}

.mscbop_orders_item.is_blured{
  transform: scale(1.05);
}
.mscbop_orders_item.is_blured > *:not(.mscbop_oi_buttons){
  filter: blur(2px);
}
.mscbop_orders_item.is_blured > .mscbop_oi_buttons{
  opacity: 1;
  pointer-events: all;
}
.mscbop_oi_buttons{
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  opacity: 0;
  pointer-events: none;
  background: #0c0c0cbe;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  transition: opacity .2s ease-in-out;
}

.mscbop_oib_show{
  background: #8d8d8d3a;
  font-size: 1.4rem;
  padding: .65rem;
  border-radius: .85rem;
  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);
}
.mscbop_oib_show > i{
  transform: translateY(1px);
  color: #b9b9b9;
}
.mscbop_oib_call{
  background: #669e6d3a;
  font-size: 1.4rem;
  padding: .65rem;
  border-radius: .85rem;
  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);
}
.mscbop_oib_call > i{
  transform: translateY(1px);
  color: #b9b9b9;
}