:root {
    --bkg-color: #fff;
    --btn-bkg-color: #2d9cd4;
    --btn-txt-color: #fff;
    --right-box-bg: #ffe9d2;
    --navbar-bg: #bce4e9;
    --toolbar-bg: #1497a6;
}

@media only screen and (max-width: 600px) {
    .right {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto; /* Enable scroll if needed */
        background-color: var(--right-box-bg);
    }
}

@media only screen and (min-width: 601px) {
    .right {
        background-color: var(--right-box-bg);
        box-shadow: -7px 3px 9px 0px #b3afaf;
        margin-top: 5px;
        display: none;
        position: sticky;
        position: -webkit-sticky;
        top: 0;
        height: fit-content;
        height: -moz-max-content;
    }

    .page-index .search {
        float: right;
    }
}

button {
    background-color: var(--btn-bkg-color);
    color: var(--btn-txt-color)
}

.btn-danger{
    background-color: #e94291;
}

    button i {
        float: left;
    }

#rightclose {
    border-radius: 0px 20px 20px 0px;
    border: unset;
}

button[data-type="dispo"], button[data-type="pending"],#rightclose {
    background-color: #e94291 !important;
    border: none;
}
    button[data-type="dispo"]:hover, button[data-type="pending"]:hover, #rightclose:hover {
        color: #fff;
        background-color: #c82333 !important;
        border-color: #bd2130 !important;
    }

/*NAVBAR*/
.navbar-container > nav {
    background-color: var(--navbar-bg);
}

.navbar-brand {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 70%;
}

.nav-item i {
    float: left;
}

.badge {
    color: #fff;
    background-color: #28a745;
}

.navbar-light .navbar-nav .nav-link {
    color: #000;
}

.navbar-light .navbar-nav .active > .nav-link {
    border: 1px solid black;
    border-radius: 3px;
    box-shadow: 3px 3px 4px 0px rgb(0 0 0 / 75%);
}


/*TOOLBAR*/
.toolbar {
    padding: 10px 5px;
    background-color: var(--toolbar-bg);
    border-top: 2px solid black;
    box-shadow: 0px 6px 7px #828181;
}

    .toolbar .btn, #txtsearch {
        margin-top: 10px
    }

.btn.filter.active {
    box-shadow: 0 0 0 0.2rem rgba(38,143,255,.5);
}


/*LOGIN PAGE*/

.page-login .logo img, .page-logout .logo img {
    max-width: 50%
}

.page-login .container {
    margin: 20px auto;
    padding: 20px 20px;
    background-color: #0094ff;
    box-shadow: 0px 3px 20px 0px #000;
}

.page-login input, .page-login button {
    margin-top: 20px;
}

.messages-err {
    margin-top: 20px;
    color: red;
    font-weight: bold;
    text-align: center;
}

.hidden {
    display: none !important;
}

/*INDEX PAGE*/
.page-index .main {
    display: flex;
}

#tbdispo .img-prod {
    max-height: 50px;
}

.page-index .detail-view img {
    max-height: 24px;
    margin-right: 5px;
}

.page-index .detail-view input {
    margin-right: 15px;
    width: 60px;
}

.page-index .toast {
    position: absolute;
}

.add-cart {
    height: 30px;
    margin-left: 30px;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

.page-index .detail-view .row {
    padding-left: 14px;
}

.page-index .detail-icon i:before {
    font-family: "Material Icons";
    font-size: 25px;
    font-style: normal;
    content: "\e5cf";
}

#tbcart tbody img {
    max-height: 20px;
    margin-left: 12px;
}

#tbcart .material-icons {
    cursor: pointer;
}

#viewimg .modal-dialog {
    width: fit-content;
    width: -moz-fit-content;
    /*max-width: 50%;*/
}

#imgprodfull {
    max-width: 100%;
}

.page-index #conforder, .page-index #emptycart {
    margin: 10px;
}

.title-note {
    width: 100%;
    margin-top: 10px;
    margin-left: 5px;
    padding-left: 5px;
    font-weight: 600;
    box-shadow: 0px 6px 7px #828181;
}

.left.cardview {
    display: flex;
    flex-wrap: wrap;
}

.card {
    width: 400px;
    height: 650px;
    margin: 5px;
    box-shadow: 4px 4px 6px 2px #a5a5a5;
}

.card-title {
    text-align: center;
    height: 52px;
    overflow: hidden;
}

.card-img-top {
    height: 390px;
    object-fit: cover;
    border-bottom: 2px solid #333;
}

.card-body {
    padding: 5px 20px !important;
}

    .card-body .row img {
        height: 30px;
    }

    .card-body .input-cont input {
        width: 13%;
        height: 30px;
        margin-right: 5px;
        max-width:50px;
    }

    .card-body .row textarea {
        margin-top: 5px;
        margin-bottom: 5px;
        width: 80%;
    }

    .card-body .add-cart {
        margin: auto;
        width: 50px;
    }

    .card-body .row {
        margin-top: 5px;
    }

    .card-body .input-cont {
        margin-top: 15px;
    }

        .card-body .row div {
            background-color: #2196f317;
            margin-left: 2px;
            margin-right: 2px;
            padding-left: 3px;
            padding-right: 3px;
            font-size:15px;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;

        }

.fixed-table-pagination{
    width:100%;
}

#trolley1{
    display:none;
}
/*ORDERS PAGE*/
.page-orders .main {
    display: flex;
}

/* ORDER DETAIL BOX*/
.left {
    width: 100%
}

#tborddet tr:nth-last-child(-n+3) {
    font-weight: bold;
}

#tborddet tbody img, #tbcart tbody img {
    max-height: 25px;
    margin-left: 12px;
    border-radius: 9px 3px 9px 1px;
    background-color: #eee2b7;
    padding: 4px;
    border: 2px solid var(--toolbar-bg);
}

#rightclose i {
    padding-top: 5px;
}

/* CHANGE PASSWORD*/
.page-changepwd .main {
    margin-left: 15px;
    margin-top: 50px;
}

    .page-changepwd .main .submit {
        margin-top: 30px;
    }

/* SHOP CART*/
.page-shopcart .left {
    margin-top: 20px;
}

#doorder {
    display: none;
}

#altart, #selcat {
    max-width: 100%;
}

.page-shopcart #tbcart input {
    width: 60px;
}

.page-shopcart #tbcart textarea {
    margin-left: 12px;
    margin-right: 12px;
}

#tbcart .input-cont {
    margin-right: 0px;
}

#tbcart tbody tr:nth-of-type(odd) td:not(:last-child) {
    background-color: #ffc68c;
}