@font-face {
    font-family: 'Aeonik';
    src: url('/assets/fonts/Aeonik-Medium.woff2') format('woff2'),
        url('/assets/fonts/Aeonik-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aeonik';
    src: url('/assets/fonts/Aeonik-Regular.woff2') format('woff2'),
        url('/assets/fonts/Aeonik-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


.order_customer_name{
    font-size: 12px;
}


.driver_title{
    font-size: 35px;
    text-align: center;
    font-weight: bold;
    color:wheat;
    text-transform: uppercase;
}

.driver_main_title{
    margin-bottom: 40px;
}

.margin-2{
margin-bottom: 20px;
}

.driver_title2{
    font-family: 'Aeonik';
    font-size: 35px;
    text-align: left;
    font-weight: 500;
    color:black;
    display: inline-block;
}

.brand-logo{
    float:right;
}

.kds_user {
    position: fixed;
    bottom: 11px;
    left: 24px;
    font-size: 35px;
    color: white;
}

.kds_multi_name{
    position: fixed;
    bottom: 10px;
    right: 50px;
    font-size: 35px;
}

.kds_patties{
    position: fixed;
    bottom: 50px;
    right: 320px;
    font-size: 35px;
    color: white;
    background: red;
    padding: 10px;
    border-radius: 10px;
    font-weight: bold;
}

.kds_name{
    position: absolute;
    bottom: 0px;
}


.kds_wrapper{
    display: flex;
}

.kds_view{
    flex: 50%;
    min-height: 90vh;
}

.kds_view.kds_error{
    background: darkred;
}

.kds_full_view{
   width: 100%;
}

.kds_view.selected{
    border-top: 3px solid #CCCC00;
    border-left: 3px solid #CCCC00;
    border-right: 3px solid #CCCC00;
    border-bottom: 3px dashed #CCCC00;
}

.kds_view{
    border-top: 3px solid white;
    border-left: 3px solid white;
    border-right: 3px solid white;
    border-bottom: 3px dashed white;

}

.kds_orders{
    overflow: auto;
    min-height: 100%; 
}

.operator_container{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 100px;
    gap: 5px;
    margin-bottom: 20px;
    max-height: 500px;
    overflow: auto;
    padding: 10px;
    color: #004A55;
    text-align: center;
    font-weight: bold;
    background: white;
    overflow: visible;
}

.operator_item{
    font-size: 25px;
    cursor: pointer;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 10px;
    border: 2px solid #004A55;
    color: #004A55;
    text-align: center;
    font-weight: bold;
    background: white;
}

.operator_item:focus,.operator_item:active,.operator_item:hover{
    outline: none;
    background-color: #004A55;
    color: white;
}

.recall_item{
    font-size: 19px;
    cursor: pointer;
}
.recall_item.selected {
    background: red;
    color:white;
}
.limited_body{
    max-height: 500px;
    overflow: auto;
}

.scroll_kds{
    overflow: auto;
    max-width: 100%;
}

.kds_screen{
    background-color: #262E42;
}

.order .overdue{
    color:white;
}

.order_comments{
    margin-top:20px;
    font-size: 22px;
}

.order_modifier{
    margin-left:20px;
}

.orders_preparing,.orders_prepared{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows:70px;
    gap: 10px;
}

.orders_preparing div{
    background-color: red;
    color:white;
    text-align: center;
    padding: 5px;
}

.orders_prepared div{
    background-color: green;
    color:white;
    text-align: center;
    padding: 5px;
}  

.orders_preparing2,.orders_prepared2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    min-height: 280px;
}
.orders_preparing2 div{
    background-color: white;
    color:black;
    border: 3px solid #004A55;
    text-align: center;
    padding: 5px;
}

.orders_prepared2 div{
    background-color: #004A55;
    color:white;
    text-align: center;
    padding: 5px;
}


.driver_order{
    text-transform: uppercase;
    font-size: 25px;
    font-weight: normal;
    line-height: 64px;
    font-family: 'Aeonik';
}

.flex-container {
    display: flex;
}

.flex-child {
    flex: 1;
}  

.flex-child:first-child {
    margin-right: 20px;
} 


.kds_orders{
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    max-height: 750px;
}

.order{
    width:300px;
    height:auto;
    background:white;
    font-size: 22px;
    font-weight: bold;
    padding:15px;
    cursor: pointer;
    break-inside:avoid;
    margin:12px;
    color:black;
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
    transition: delay 0;

}

.late{
    animation: blink-animation 1s steps(4, end) forwards;
        animation-iteration-count: infinite;
        transition: none;
}

    .near{
        color:white;
        background-color: red;
    }

    .near .order_title,.near .ticket_order_item {
        color:white;
        background-color: red;
    }

    .blink {
        animation: blink-animation 0.7s steps(4, end) forwards;
        animation-iteration-count: 7;
        transition: none;
      }
      
      @keyframes blink-animation {
      0% {
             background-color:white;
          color: black;
        }
    
   
        33% {
            background-color:black;
            color: white;
        }

        100% {
            background-color:white;
         color: black;
       }
      }


.order_title{
    border-bottom:2px solid black;
    text-transform: uppercase;
    font-size: 14px;

}


.order.selected
{
    outline:3px solid green;
}

.order.todo
{
    outline:5px dashed red;
}

.brand-location{
    color: white;
    font-size: 14px;
    margin-top: 10px;
    text-align: center;
}

.org-dropdown{
    position: fixed;
    top: 10px;
    right: 20px;
    z-index: 1050;
}
.org-dropdown select{
    padding: 4px 8px;
    border-radius: 4px;
}.loader-overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.8);
    z-index: 2000;
}
.loader-overlay.hidden{
    display:none;
}