* {
    margin: 0;
    box-sizing: border-box;
    font-family: "Inter Tight", sans-serif;
    font-size: 12px;
}
body {
    font-family: 'Inter';
}
a {
    text-decoration: none;
    color: black;
}
.fs-wrapper {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
div#br-apps div:hover {
    opacity: .4;
    cursor: pointer;
}
.brbutton {
    background-color: #F5F5F5;
    font-size: 12px;
    padding: 18px 30px;
    border-radius: 10px;
}
.brbutton.btn-sm {
    padding: 10px 20px;
}
.brbutton:hover {
    opacity: .4;
    cursor: pointer;
}
.brbutton.btn-green.disabled {
    opacity: .4;
}
#ft-left > img {
    width: 240px;
}
img.app-logo {
    max-width: 400px;
    margin-bottom: 20px;
}
.dial-pad {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}
.dial-pad-btn {
    width: 80px;
    text-align: center;
    background-color: gainsboro;
    padding: 30px;
    font-size: 20px;
    border-radius: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dial-pad-btn:hover {
    opacity: .4;
    cursor: pointer;
}

.dynamic_color_background {
    background-color: grey;
    width: 100%;
    height: 475px;
    box-shadow: 0px 6px 20px 0px #0000006e;
}
.dynamic_color_background.purple-black {
    background: rgb(65,17,73);
    background: linear-gradient(148deg, rgba(65,17,73,1) 0%, rgba(110,32,123,1) 100%);
}
.center-widget {
    width: 900px;
    margin: -300px auto 0;
}
.top-widget-1 {
    background-color: #F6F6F6;
    padding: 45px;
    border-radius: 10px;
    box-shadow: 1px 1px 20px 17px #00000033;
    position: relative;
}
.top-widget-1.no-padding {
    padding: 0px!important;
    overflow: hidden;
}
.locations-list {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.location-item {
    background-color: #FFF;
    border: 1px solid #D2D2D2;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 0px;
}
.locations-list > div:first-child {
    border-radius: 10px 10px 0px 0px;
    border-top: 1px solid #D2D2D2;
}
.locations-list > div:last-child {
    border-radius: 0px 0px 10px 10px;
}
.location-item:hover {
    cursor: pointer;
    background-color: #0000002b;
}
.location-name {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.top-widget-image {
    overflow: hidden;
    height: 375px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
img.location-image {
    max-width: 100%;
    object-fit: contain;
}
.image-gradient-bottom {
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,.9) 4%, rgba(0,0,0,0) 100%);
    width: 100%;
    height: 100%;
    position: absolute;
}
.top-widget-1.no-padding .image-text {
    position: absolute;
    bottom: 40px;
    color: white;
    left: 40px;
}
.location-address {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 8px;
}
.split-button-group {
    display: flex;
    justify-content: space-between;
    margin: 30px 0px;
    gap: 20px;
}
.split-button-group > div:first-child {
    width: 200%;
}
.lg-kiosk-btn {
    background-color: #E8E8E8;
    width: 100%;
    text-align: center;
    padding: 30px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 300;
}
.lg-kiosk-btn:hover {
    cursor: pointer;
    opacity: .6;
}
.lg-kiosk-btn.purple.text-cap {
    background-color: var(--primary);
    color: white;
    font-weight: 600;
}
.console-user {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    border-top: 25px solid var(--primary);
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 0px;
}
.console-user .left {
    overflow: hidden;
    width: 100%;
    position: relative;
}
.console-user .right {
    min-width: 460px;
    max-width: 460px;
    border-left: 1px solid #E8E8E8;
    padding: 40px 15px;
    box-sizing: border-box;
    position: relative;
}
.app-logo-back {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
}
.app-logo-back > img {
    width: 62%;
    opacity: .03;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}
.user-knock-object {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}
.user-avatar {
    overflow: hidden;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.user-avatar.user-small {
    width: 100px;
    margin: 10px;
}
.user-avatar > img {
    max-width: 100%;
    object-fit: contain;
}
.user-avatar {
    overflow: hidden;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: 30px;
    box-shadow: 0 0 20px 3px #00000038;
}
.app-logo {
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.app-logo > img {
    width: 70%;
}
.pricing-list {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 280px);
    overflow-y: scroll;
}
.with-action-bar .pricing-list {
    height: calc(100vh - 400px);
    overflow-y: scroll;
}
.pricing-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 10px;
    margin-bottom: -1px;
}
.pricing-item.indented {
    margin-left: 25px;
    padding: 0px;
    margin-right: 10px;
}
.pricing-item:not(.indented) {
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
}
.pricing-item.indented .pricing_item_stack > div:first-child {
    font-size: 14px;
    font-weight: 400;
}
.pricing-item .left {
    display: flex;
    gap: 10px;
}
.indent {
    margin-left: 10px;
}
.totals-list {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 85%;
    left: 30px;
    bottom: 116px;
}
.totals-list.no-ab {
    bottom: 40px;
}
.total-item {
    display: flex;
    justify-content: space-between;
    padding: 5px 10px;
}
.popup-square, .popup-rectangle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    background-color: #000000d9;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 60px;
    gap: 8px;
    text-align: center;
    backdrop-filter: blur(10px);
    color: white;
    box-shadow: 0px 0px 20px 3px #0000003d;
    padding: 70px;
}
.popup-rectangle {
    width: 1140px;
    gap: 60px;
    flex-direction: row!important;
    padding: 30px 80px;
}
.popup-text-block {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.popup-square > i {
    margin-bottom: 10px;
}
.popup-square.red, .popup-rectangle.red {
    background-color: #dc5454c9;
}
.popup-square.green {
    background-color: #83b47bd6;
}
.popup-square.gold {
    background-color: #F0C88C;
}
.popup-content {
    display: flex;
    flex-direction: column;
    text-align: left!important;
    gap: 20px;
    width: 80%;
}

.green-icon {
    color: #61825C;
}
.red-icon {
    color: #830B0B;
}
.gold-icon {
    color: #BA8E4D
}
.square-icon {
    text-decoration: blink;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:ease-in-out;
    -webkit-animation-direction: alternate;
}
@-webkit-keyframes blinker {
    from {opacity: 1.0;}
    to {opacity: 0.0;}
}
.pricing_item_stack {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.empty-alert {
    background-color: whitesmoke;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.black-blur {
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: 10;
    background-color: #411149d1;
    top: 0;
    backdrop-filter: blur(10px);
}
.form-action-card {
    position: absolute;
    z-index: 11;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 30px;
    color: white;
}
.fa-card-header {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
}
input.lg-form-control {
    padding: 20px 30px;
    width: 100%;
    border-radius: 10px;
    font-size: 20px;
    text-align: center;
    height: 100px;
}
.lg-btn.green {
    background-color: #83B47B;
    display: block;
    width: 230px;
    margin: 0 auto;
    padding: 20px 40px;
    font-size: 16px;
    border-radius: 10px;
}
.lg-btn.green:hover {
    cursor: pointer;
    opacity: .5;
}
.fa-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 800px;
}
.console-user.no-tb {
    border: 0px!important;
}
.action-bar {
    position: fixed;
    bottom: 0;
    z-index: 2;
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 85px;
    background-color: white;
    align-items: center;
    padding: 0px 30px;
    left: 0px;
    border-top: 1px solid #e8e8e8;
}
.with-action-bar {
    width: 100%;
    height: calc(100vh - 85px);
    display: flex;
    gap: 20px;
    position: fixed;
}
.app-menu {
    border-left: 20px solid #411149;
    padding-left: 25px;
    padding-right: 35px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding-top: 25px;
}
.app-mini-icon {
    text-align: center;
}
.apps-stack {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
}
.app-s-icon {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20%;
}
.app-s-icon.active, .app-s-icon:hover {
    background-color: #41114926;
}
.app-menu {
    border-left: 20px solid #411149;
    padding-left: 25px;
    padding-right: 25px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 25px;
}
.app-console {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 32px;
}
.app-header {
    display: flex;
    justify-content: space-between;
    padding-right: 35px;
}
.app-header-menu {
    display: flex;
}
.ahm-tab {
    font-size: 16px;
    text-align: center;
    border: 1px solid white;
    padding: 10px 14px 10px;
}
.ahm-tab.disabled {
    padding: 24px 0px 0px;
}
.ahm-tab.active, .ahm-tab:hover, .ahm-tab:not(.disabled):hover {
    font-weight: 600;
    cursor: pointer;
    background-color: #41114912;
    border-radius: 10px;
}
.app-header-right {
    display: flex;
    gap: 14px;
    align-items: center;
}
div#clock {
    font-size: 16px;
    width: 95px;
    text-align: right;
}
.app-flex {
    display: flex;
    gap: 15px;
}
.app-flex-item {
    border: 1px solid #cfcfcf;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 150px;
    border-top: 12px solid;
}
.app-flex-item:hover {
    opacity: .5;
    cursor: pointer;
}
.app-flex-item.purple {
    border-top-color: #411149;
}
.action-bar .left {
    display: flex;
    gap: 30px;
    align-items: center;
}
.action-user {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 12px;
}
.action-user:hover {
    background-color: #f3f3f3;
    cursor: pointer;
}
.mini-avatar {
    background-color: #e1e1e1;
    width: 50px;
    height: 50px;
    border-radius: 100px;
}
.action-bar .right {
    display: flex;
    gap: 8px;
}
.action-btn {
    background-color: #F5F5F5;
    font-weight: 400;
    padding: 16px 20px;
    border-radius: 10px;
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.action-btn:hover {
    opacity: .5;
    cursor: pointer;
}
.action-btn.red {
    background-color: #FFCBCB;
    color: #9D4C4C;
}
.action-btn.green {
    background-color: #83B47B;
    color: white;
}
.with-action-bar .pricing-item:hover {
    background-color: whitesmoke;
    border-radius: 10px;
    cursor: pointer;
}
.app-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(8, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    height: calc(100vh - 230px);
    margin-right: 40px;
    position: relative;
}
.app-grid div:nth-child(-n+8) {
    margin-bottom: 20px;
}
.grid-c-5 {
    grid-template-columns: repeat(5, 1fr)!important;
    width: calc(100vw - 730px);
}
.app-grid-item {
    display: flex;
    flex-direction: column;
}
.app-grid-item span {
    display: flex;
    flex-direction: column;
}
.app-grid-item.disabled {
    opacity: .2!important;
    cursor: not-allowed!important;
}
.app-grid-item:not(.blank) {
    border: 1px solid #C3C3C3;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    border-top-width: 12px;
    border-top-color: #411149;
    background-color: white;
}
.app-grid-item:not(.blank):hover {
    cursor: pointer;
    opacity: .5;
}
.app-grid-item.gold {
    border-top-color: #F0C88C;
}
.app-grid-item.green {
    border-top-color: #A0C29A;
}
.app-grid-item.red {
    border-top-color: #C35C5C;
}
.waiting-notice-bottom {
    background-color: #F0C88C;
    position: fixed;
    bottom: 96px;
    padding: 20px;
    left: 20px;
    right: 0px;
    text-align: center;
    padding-bottom: 28px;
}
.pop-btn {
    padding: 20px 50px;
    margin-top: 20px;
    border-radius: 10px;
    background-color: #4f4f4f;
}
.pop-btn.red {
    background-color: #E06767;
}
.pop-btn:hover {
    cursor: pointer;
    opacity: .5;
}
.black-back {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000000cf;
    z-index: 5;
    backdrop-filter: blur(10px);
}
.white-back {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #ffffff00;
    z-index: 5;
    backdrop-filter: blur(5px);
    top: 0px;
}
.drawer {
    position: fixed;
    z-index: 6;
    bottom: 0;
    width: 80%;
    background-color: #F1F1F1;
    left: 50%;
    transform: translate(-50%);
    border-radius: 10px 10px 0px 0px;
    max-height: 95vh;
    height: 100%;
}
.drawer-header {
    width: 100%;
    background-color: white;
    display: flex;
    justify-content: space-between;
    padding: 20px;
    border-radius: 10px 10px 0px 0px;
    align-items: center;
}
.drawer-header > div {
    display: flex;
    gap: 12px;
}
.mini-btn {
    background-color: #ededed;
    padding: 10px 22px;
    border-radius: 10px;
}
.mini-btn:hover {
    cursor: pointer;
    opacity: .5;
}
.mini-btn.red {
    background-color: #FFCBCB;
    color: #9D4C4C;
}
.mini-btn.green {
    background-color: #83B47B;
    color: white;
}
.drawer-body {
    padding: 120px 80px 250px 80px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
}
.drawer-body > div:last-child {
    overflow: scroll;
    width: 100%;
    max-width: 800px;
    height: calc(100vh - 280px);
}
.drawer-body.extended {
    padding-top: 50px;
}
.drawer-body.extended > div:last-child {
    max-width: 1100px;
}
.amount-tiles {
    display: flex;
    gap: 5px;
    text-align: center;
}
.amount-tile {
    color: white;
    background-color: #411149;
    padding: 30px;
    font-size: 20px;
    font-weight: 200;
    border-radius: 100%;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
.amount-tile:hover {
    cursor: pointer;
    opacity: .5;
}
.amount-tile.disabled {
    cursor: not-allowed!important;
    opacity: .2!important;
}
.app-flex-lg {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(8, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    height: calc(100vh - 230px);
    margin-right: 40px;
    position: relative;
}
.item-card {
    border: 1px solid #C3C3C3;
    border-radius: 10px;
}
.item-card:hover {
    opacity: .5;
    cursor: pointer;
}
.item-card.disabled {
    opacity: .3;
    cursor: not-allowed;
}
.soldout {
    position: absolute;
    z-index: 2;
    background-color: red;
    color: white;
    font-weight: 900;
    font-size: 20px;
    text-align: center;
    padding: 10px;
    top: 60px;
}
.card-image {
    background-color: #f3f3f3;
    width: 100%;
    height: 150px;
    border-radius: 10px 10px 0px 0px;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card-image img {
    width: 100%;
    position: absolute;
}
.card-body {
    padding: 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.card-body.purple {
    border-top: 8px solid #411149;
}
.card-body.gold {
    border-top: 8px solid #E79C2D;
}
.product-image {
    background-color: whitesmoke;
    width: 410px;
    height: 285px;
    overflow: hidden;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    margin-bottom: 20px;
}
.product-image img {
    position: absolute;
    width: 100%;
}
.list-object {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.list-object .list-item {
    padding: 20px;
    border-bottom: 0px;
}
.list-item {
    background-color: white;
    width: 100%;
    border: 1px solid #D2D2D2;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.list-item > div > span {
    font-weight: 600!important;
}
.list-item.disabled {
    opacity: .3;
    cursor: not-allowed;
}
.list-item.disabled > div > span {
    font-weight: 300!important;
}
.list-object > div:first-child {
    border-radius: 10px 10px 0px 0px;
}
.list-object > div:last-child {
    border-radius: 0px 0px 10px 10px;
    border-top-width: 1px;
    border-bottom: 1px solid #D2D2D2;
}
.list-item:hover {
    opacity: .3;
    cursor: pointer;
}
.list-item.selected {
    background-color: #00000038;
}
.order-tag {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #f3f3f3;
    border-radius: 10px;
    margin-bottom: 12px;
}
.order-tag > div:first-child {
    display: flex;
    gap: 10px;
}
input.drawer-form-control {
    width: 100%;
    font-size: 14px;
    padding: 22px;
    border-radius: 10px;
    border: 1px solid #D2D2D2;
    outline: none;
}
.loading {
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 10;
    color: white;
}
.loading > i {
    font-size: 50px;
}
.tab-switch {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #dbdbdb;
}
.tabs {
    display: flex;
}
.tab-item {
    padding: 10px 20px 18px;
    font-size: 14px;
    color: silver;
}
.tab-item.active {
    color: black;
    border-bottom: 1px solid black;
    margin-bottom: -1px;
    font-weight: 600;
}
.tab-item:hover {
    color: black;
    cursor: pointer;
}
.toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 20px;
    border-radius: 10px;
    height: 30px;
}
.toggle-btn.grey {
    background-color: #dfdfdf;
    color: #848484;
}
.toggle-btn.black {
    color: white;
    background-color: black;
}
.list-object.mini {
    min-width: 400px;
    max-width: 400px;
}
input.small-input {
    width: 100px;
    text-align: center;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #CCC;
}
.list-object.no-hover .list-item:hover {
    background-color: white;
    cursor: default!important;
    opacity: 1;
}
.toggle-btn.green {
    background-color: #28A758;
    color: white;
}
.toggle-btn.green:hover {
    opacity: .5;
    cursor: pointer;
}
.list-item.item-disabled {
    color: red;
    opacity: .5;
}
.empty-alert.red {
    background-color: #ffcbcb;
    color: #aa5c5c;
}
span.unitbadge {
    background-color: #383838;
    color: white;
    padding: 5px 0px;
    width: 43px;
    text-align: center;
    border-radius: 10px;
    font-size: 10px;
    text-transform: capitalize;
}
.drawer-body.guard {
    max-width: 700px;
    margin: 0 auto;
}
.action-box {
    position: absolute;
    bottom: 20px;
    background-color: white;
    padding: 20px 30px;
    border: 1px solid #e8e8e8;
    box-shadow: 0 0 20px 0px #00000014;
    z-index: 5;
    left: 45px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 500px;
}
.small-count {
    background-color: #8edcef;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 10px;
}
.prompt {
    position: absolute;
    z-index: 5;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 50px;
    border-radius: 10px;
    box-shadow: 0px 0px 20px 0px #00000036;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    min-width: 800px;
}
.terms-wrapper {
    max-width: 980px;
    margin: 60px auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: calc(100vh - 140px);
    overflow: scroll;
    padding-bottom: 30px;
}
.terms-wrapper li {
    font-size: 25px;
    font-weight: 200;
    line-height: 45px;
    text-align: justify;
    margin-top: 40px;
}
.login-form form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    gap: 10px;
}
.login-form form > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.login-form label {
    font-family: sans-serif;
    font-size: 12px;
}
.login-form input {
    padding: 20px;
    width: 500px;
    border: 1px solid #CCC;
    border-radius: 10px;
}
.login-form .block input {
    width: auto!important;
}
.login-form button {
    margin-top: 20px;
    padding: 20px 40px;
    border-radius: 10px;
    background-color: #86c6fc;
    border: none;
}
.no-back {
    background-color: transparent!important;
}
.action-btn.active {
    background-color: #E75454;
    color: white;
    font-weight: 800;
    width: 300px;
    box-shadow: 0px 3px 8px 1px #0000004f;
    transform: scale(1);
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgb(230 84 84);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgb(230 84 84 / 0%);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgb(230 84 84 / 0%);
    }
}
.kds {
    background-color: #ffffff;
    position: absolute;
    z-index: 2;
    height: 100vh;
    width: 100%;
}
.kds-header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    background-color: white;
    padding: 30px;
    align-items: center;
    border-bottom: 1px solid #e2e2e2;
}
.kds-logo {
    display: flex;
    gap: 10px;
    align-items: center;
}
.kds-logo i {
    font-size: 28px;
}
.kds-header span {
    font-size: 25px;
}
.view-switcher {
    display: flex;
}
.kds .view-item {
    font-size: 16px;
    padding: 10px 25px;
    border-radius: 10px;
}
.view-item.active {
    background-color: #e1e1e1;
    font-weight: 600;
}
.orders-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    padding: 30px;
    height: calc(100% - 100px);
}
.order-tile {
    background-color: white;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
}
.ordertile-header {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #e8e8e8;
    background-color: #ececec;
}
.ordertile-header div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ordertile-header > div:last-child {
    text-align: right;
}
.order-tile .pricing-item {
    border: none;
    padding: 5px 20px;
}
.ordertile-body {
    padding: 20px 0px;
}
.order-tile:hover {
    opacity: .3;
    cursor: pointer;
}
.order-tile.red .ordertile-header {
    background-color: #C92C2C;
    border-radius: 10px 10px 0px 0px;
    color: white;
}
.view-item.red {
    background-color: #FFCBCB;
    color: #9D4C4C;
}
.list-object.green > div {
    background-color: green;
    color: white;
    display: flex;
    justify-content: center;
}