: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-border: #858484 !important; /* Input Border */
    --theme-color-border-hover: red !important; /* Input Border */

    --theme-color-0: #e2e7e8 !important; /* read only */
    --theme-color-0b: #f6f7f7 !important; /* read only */
    --theme-color-1: #5c7d97 !important; /* Yazı Rengi */
    --theme-color-1b: #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-5b: 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 */
    --theme-color-filter: #e0e2e2 !important;

    --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-focused-row-color: #f7ddda !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: 110px !important; /* 150 */
        --pos-masa-box: 333px !important; /* 333px */
        --pos-urun-box-text: 11px !important; /* 16px */
        --pos-urun-box-line: 11px !important; /* 16px */
        --pos-urun-box-noimage: 16px !important; /* 20px */
        --pos-urun-box-noimage-line: 16px !important; /* 20px */
    }
}

.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;
} */

/* Ortak stil */
input.form-control,
select.form-select,
textarea.form-control {
    /* background-color: var(--theme-color-5); */
    border: 1px solid var(--theme-color-border);
    border-radius: 6px;
    /* padding: 12px 16px; */
    font-size: 15px;
    transition: all .2s;
}

/* Hover */
input.form-control:hover,
select.form-select:hover,
textarea.form-control:hover {
    border-color: var(--theme-color-border-hover);
}

/* Focus */
input.form-control:focus,
select.form-select:focus,
textarea.form-control:focus {
    /* background-color: var(--theme-color-5); */
    border-width: 2px;
    border-color: var(--theme-color-border-hover);
    box-shadow: 0 0 10px rgba(255, 102, 0, .2);
    outline: none;
}

/* INPUT + TEXTAREA → readonly çalışır */
input.form-control:read-only,
textarea.form-control:read-only {
    background-color: #e2e7e8 !important;
    outline: none;
    color: #666; /* metni biraz daha soluk gösterir */
}

.statuBox select,
.statuBox select option {
    background-color: white !important;
}

.searchBox input {
    border: none !important;
    box-shadow: none !important;
    background-color: white !important;
}

/* Textarea auto height için */
textarea.form-control {
    min-height: 80px;
    resize: vertical;
}

.table {
  border-color: #5c7d97 !important;
}

.table tr,
.table th,
.table td {
  border-color: var(--theme-color-1) !important;
}

.modal-header {
    background-color: var(--theme-color-13) !important;
}

/* .modal-content {
    background-color: var(--theme-color-5) !important;
}

.modal-body {
  background-color: var(--theme-color-5) !important;
  border-radius: 8px;
  margin: 4px;
} */

/* input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
} */

/* .modal-body input.form-control,
.modal-body select.form-select,
.modal-body textarea.form-control {
    background-color: var(--theme-color-5);
}

.modal-body input.form-control:focus,
.modal-body select.form-select:focus,
.modal-body textarea.form-control:focus {
    background-color: var(--theme-color-5);
} */

.appBtn {
    background-color: cadetblue;
    color: white;
    border: solid 5px white;
    padding: 10px;
    font-weight: bold;
    font-size: 20px;
    border-radius: 10px;
}

.appBtnActive {
    background-color: tomato;
    color: white;
    border: solid 5px tomato;
    padding: 10px;
    font-weight: bold;
    font-size: 20px;
    border-radius: 10px;
}