:root{

    --bs-primary: #5c7d97 !important; /* Ana renk */
    --bs-secondary: #333333 !important; /* İkincil renk */
    --bs-success: #28a745 !important; /* Başarı rengi */
    --bs-danger: #dc3545 !important; /* Hata rengi */
    --bs-warning: #ffc107 !important; /* Uyarı rengi */
    --bs-info: #17a2b8 !important; /* Bilgi rengi */
    --bs-light: #f8f9fa !important;
    --bs-dark: #343a40 !important;

    --theme-color-0: #e2e7e8 !important; /* read only */
    --theme-color-1: #5c7d97 !important; /* Yazı Rengi */
    --theme-color-2: #ff4d4d !important; /* Başlık Rengi */
    --theme-color-3: #526b84 !important; /* Menü DropDown */
    --theme-color-4: #95a5a6 !important; /* Menü İtem */
    --theme-color-5: white !important; /* Zemin Rengi */
    --theme-color-6: #edf2f9 !important; /* Menu Text */
    --theme-color-7: #d75802 !important; /* DashBoard Settings */
    --theme-color-8: #edf2f9 !important; /* DashBoard Title */
    --theme-color-9: white !important; /* Body */
    --theme-color-10: #526b84 !important; /* User Name */
    --theme-color-11: coral !important; /* Menu Btn ON */
    --theme-color-12: #34c389 !important; /* Menu Btn OFF */
    --theme-color-13: #d7dce4 !important; /* Modal Header */
    --theme-color-14: #526b84 !important; /* Modal Header Text */
    --theme-color-15: #b6c2c3 !important; /* progress bar */
    --theme-color-16: #ff4d4d !important; /* progress */

    --theme-color-17b: #86b7bb !important; /* ay */
    --theme-color-17t: white !important; /* ay */
    --theme-color-18b1: #dfe4e5 !important; /* cell BoşGün */
    --theme-color-18b2: #c6c9ca !important; /* cell BoşGün */
    --theme-color-18t: #526b84 !important; /* cell BoşGün */
    --theme-color-19b: #ed5eb8 !important; /* cell1 RezervasyonluGün*/
    --theme-color-19t: white !important; /* cell1 RezervasyonluGün*/
    --theme-color-20b: #6add35 !important; /* cell2 DoluGün*/
    --theme-color-20t: #526b84 !important; /* cell2 DoluGün*/
    --theme-color-21b: tomato !important; /* cmts-pazar */
    --theme-color-21t: white !important; /* cmts-pazar */
    --theme-color-22b: #7a9be8 !important; /* now */
    --theme-color-22t: white !important; /* now */

    --pos-color-menu: #b6c2c3 !important;
    --pos-color-body: #526b84 !important;
    --pos-color-addpanel: #2c3e50 !important;
    --pos-color-selected-bg: white !important;
    --pos-color-selected-txt: #ff4d4d !important;
    --pos-color-group: #ff4d4d !important;
    --pos-color-group-txt: white !important;
    --pos-color-group-hover: #d7a644 !important;
    --pos-color-refresh-on: #10ac84 !important;
    --pos-color-refresh-off: #e84118 !important;

    --grid-back-color: #dfdfdf !important;
    --grid-left-border-color: #e74c3c !important;
    --text-danger: #e6776b !important;
    --text-primary: #6264e7 !important;

    --button-backcolor-01: #ff4d4d !important;
    --button-backcolor-02: #10ac84 !important;
    --button-backcolor-03: #2c3e50 !important;
    --button-backcolor-04: #526b84 !important;

    --button-color-01: white !important;
    --button-color-02: white !important;
    --button-color-03: #ffffff !important;
    --button-color-04: #ffffff !important;

}

@media screen and (max-width: 400px) {
    :root {
        --search-item-box-width: 100% !important;
        --search-item-box-height: 70px !important;
        --pos-urun-box: 100px !important;
        --pos-masa-box: 200px !important;
        --pos-urun-box-text: 11px !important;
        --pos-urun-box-line: 11px !important;
        --pos-urun-box-noimage: 14px !important;
        --pos-urun-box-noimage-line: 14px !important;
    }
}
@media screen and (min-width: 401px) and (max-width: 1024px) {
    :root {
        --search-item-box-width: 210px !important;
        --search-item-box-height: 70px !important;
        --pos-urun-box: 110px !important;
        --pos-masa-box: 220px !important;
        --pos-urun-box-text: 11px !important;
        --pos-urun-box-line: 11px !important;
        --pos-urun-box-noimage: 16px !important;
        --pos-urun-box-noimage-line: 16px !important;
    }
}
@media screen and (min-width: 1025px) {
    :root {
        --search-item-box-width: 237px !important;
        --search-item-box-height: 70px !important;
        --pos-urun-box: 150px !important;
        --pos-masa-box: 333px !important;
        --pos-urun-box-text: 16px !important;
        --pos-urun-box-line: 16px !important;
        --pos-urun-box-noimage: 20px !important;
        --pos-urun-box-noimage-line: 20px !important;
    }
}

.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}
.btn-outline-primary {
    color: var(--bs-primary) !important; /* Metin rengi */
    border-color: var(--bs-primary) !important; /* Kenarlık rengi */
}
.btn-outline-primary:hover {
    background-color: var(--bs-primary) !important; /* Üzerine gelince arka plan */
    color: white !important; /* Üzerine gelince metin rengi */
}

.btn-secondary {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
}

.btn-success {
    background-color: var(--bs-success) !important;
    border-color: var(--bs-success) !important;
}

.btn-danger {
    background-color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
}
.btn-outline-danger {
    color: var(--bs-danger) !important; /* Metin rengi */
    border-color: var(--bs-danger) !important; /* Kenarlık rengi */
}
.btn-outline-danger:hover {
    background-color: var(--bs-danger) !important; /* Üzerine gelince arka plan */
    color: white !important; /* Üzerine gelince metin rengi */
}

.btn-warning {
    background-color: var(--bs-warning) !important;
    border-color: var(--bs-warning) !important;
}

.btn-info {
    background-color: var(--bs-info) !important;
    border-color: var(--bs-info) !important;
}

.btn-light {
    background-color: var(--bs-light) !important;
    border-color: var(--bs-light) !important;
}

.btn-dark {
    background-color: var(--bs-dark) !important;
    border-color: var(--bs-dark) !important;
}

.svg {
    width: 25px;
    height: 20px;
    background-position: center;
    background-repeat: no-repeat;
}
.svg-img {
    background-position: center;
    background-repeat: no-repeat;
}

/* .button01 {
    position: fixed !important;
    bottom: 66px !important;
    right: 20px !important;
    height: 70px !important;
    width: 70px !important;
    border: solid 5px white !important;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 10px 0 rgba(0, 0, 0, 0.19) !important;
    border-radius: 50% !important;
    padding: 2px !important;
    z-index: 1000 !important;
}
.color-button01 {
    background-color: var(--button-backcolor-01) !important;
    color: var(--button-color-01) !important;
}
.button02 {
    position: fixed !important;
    bottom: 145px !important;
    right: 20px !important;
    height: 70px !important;
    width: 70px !important;
    border: solid 5px white !important;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 10px 0 rgba(0, 0, 0, 0.19) !important;
    border-radius: 50% !important;
    z-index: 1000 !important;
}
  .color-button02 {
    background-color: var(--button-backcolor-02) !important;
    color: var(--button-color-02) !important;
}
.button03 {
    position: fixed !important;
    bottom: 66px !important;
    right: 100px !important;
    height: 70px !important;
    width: 70px !important;
    border: solid 5px white !important;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 10px 0 rgba(0, 0, 0, 0.19) !important;
    border-radius: 50% !important;
    padding: 3px 8px !important;
    z-index: 1000 !important;
}
.color-button03 {
    background-color: var(--button-backcolor-03) !important;
    color: var(--button-color-03) !important;
}
.button03-01 {
    position: fixed !important;
    bottom: 66px !important;
    right: 20px !important;
    height: 70px !important;
    width: 70px !important;
    border: solid 5px white !important;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 10px 0 rgba(0, 0, 0, 0.19) !important;
    border-radius: 50% !important;
    padding: 3px 8px !important;
    z-index: 1000 !important;
}
.button04 {
    position: fixed !important;
    bottom: 145px !important;
    right: 100px !important;
    height: 70px !important;
    width: 70px !important;
    border: solid 5px white !important;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 10px 0 rgba(0, 0, 0, 0.19) !important;
    border-radius: 50% !important;
    padding: 4px 8px 8px 8px !important;
    z-index: 1000 !important;
}
.color-button04 {
    background-color: var(--button-backcolor-04) !important;
    color: var(--button-color-04) !important;
} */