:root {
    --primary-blue:#1f286d;
    --primary-orange:#f07f3c;
    --primary-red:#e10600;
    --primary-gray:#d3d4d5;
    --primary-gray-alpa:#d3d4d580;
    --primary-green:#00862f;
    --primary-blue-rgba:0, 92, 169;
    --primary-red-rgba:225, 6, 0;
    --primary-orange-rgba:240, 127, 60;
    --sidebar-width:185px;
    --sidebar-alt-width:60px;
    --text-color:#444;
}
.w-10 { width:10% !important; }
.w-30 { width:30% !important; }
.w-35 { width:35% !important; }
.w-40 { width:40% !important; }
.w-55 { width:55% !important; }
.w-65 { width:65% !important; }
@media (max-width:1300px) { :root { --sidebar-width:200px; } }
body { font-family:"Montserrat", sans-serif; font-size:15px; line-height:1.5em; }
@media (max-width:1300px) { body {font-size:13px;} }

.btn-pai { padding:10px 15px; font-size:16px; border-radius:5px; transition:background-color 0.3s ease; }
.btn-red { background-color:var(--primary-red); border:1px solid var(--primary-red); color:white; }
.btn-red:hover { background-color:rgba(var(--primary-red-rgba), 0.8); border-color:rgba(var(--primary-red-rgba), 0.8); color:white; }
.btn-red-inverted { background-color:white; border:1px solid var(--primary-red); color:var(--primary-red); }
.btn-red-inverted:hover { background-color:rgba(var(--primary-red-rgba), 0.8); border-color:rgba(var(--primary-red-rgba), 0.8); color:white; }

.btn-red-sec { background-color:rgba(var(--primary-red-rgba), 0.1) !important; color:var(--primary-red) !important; }
.btn-red-sec:hover, .btnShowModal:hover { background-color:rgba(var(--primary-red-rgba), 0.2); color:var(--primary-red); }
.btn-red-sec-alt { background-color: #fce7e6; color: var(--primary-red); }
.btn-red-sec-alt:hover { background-color: #facecd; color: var(--primary-red); }

.btn-gray { background-color:var(--primary-gray); border:1px solid #aaa; color: var(--text-color); }
.btn-gray:hover { background-color: var(--primary-gray-alpa); border-color:#aaa; color:var(--text-color); }

.btn-disabled { pointer-events:none; opacity:0.4; }
.btn-sec { background-color:#fff; color:var(--text-color); border:1px solid #d2d2d2; }

.btn-sec:hover, #header .circle:hover, #header .dropdown .dropdown-toggle:hover, #listOfOrders .card:hover, #listOfArchiveOrders .card:hover { background-color:#f8f9fa; border:1px solid var(--text-color) !important; }
.pai-tabs .btn-sec.active { background-color:rgba(var(--primary-red-rgba), 0.8); border-color:rgba(var(--primary-red-rgba), 0.8); color:white; }
::placeholder, ::-ms-input-placeholder { font-size:14px; color: rgba(33, 37, 41, 0.5)}
.form-control:focus { border-color:#dee2e6 !important;box-shadow:none !important;  }

.pointer:hover { cursor:pointer !important; }

.text-red { color:var(--primary-red) !important; }
.text-sec { color:var(--text-color) !important; }
.text-small { font-size:0.8em; }
.border-red { border: 1px solid var(--primary-red); }

.pai-card { background:white; padding:0 16px; border-radius:5px; }
.pai-title { font-size:1.3em; font-weight:600;}
.pai-tabs { display:flex; }
.pai-tabs #contact_name { font-weight:900; font-size:16px; margin-top:10px; display:inline-block; border-right:1px solid var(--text-color); padding-right:16px; margin-right:32px; color:var(--primary-blue);}
.pai-tab-content { display:none; }
.pai-tab-content.active { display:block; }

.icon-container { margin-left:auto; display:flex; gap:10px; }

.category-item { border-bottom:1px solid #ebebeb; color:var(--text-color); padding-right:40px }
#categoryContainer .category-item:last-child { border-bottom: none; }
.category-item:hover { border:1px solid #dddddd; background-color: var(--primary-gray-alpa);}
.category-item.active { background-color: var(--primary-red); color:white; border-color:var(--primary-red); }

.dropdown-item:focus, .dropdown-item:active { background-color: transparent !important; color: inherit !important; outline: none !important; box-shadow: none !important; }

.dx-datagrid .dx-data-row:hover { background-color:#f8f8f8 !important; cursor:pointer; }
.dx-datagrid .dx-header-row:hover { background-color:inherit; cursor:default; }
.dx-datagrid .dx-link { color:var(--text-color); }
.dx-datagrid .dx-link:hover { color:var(--primary-orange); }

input[type="checkbox"]:checked { background-color: var(--primary-red) !important;border-color: var(--primary-red) !important; }
input[type="checkbox"]:focus { box-shadow: 0 0 0 0.25rem rgba(var(--primary-red-rgba), 0.1); border-color: var(--primary-red) !important; }

input[type="radio"]:checked { background-color: var(--primary-red) !important;border-color: var(--primary-red) !important; }
input[type="radio"]:focus { box-shadow: 0 0 0 0.25rem rgba(var(--primary-red-rgba), 0.1); border-color: var(--primary-red) !important; }


#login-forms { display:flex; }
#login-forms img { display:none; width:200px; margin:20px auto; margin-top:5% }
#login-forms > .card { margin:15px auto; }
.togglePassword { top:50%; right:10px; transform:translateY(-50%); cursor:pointer; color:#6c757d; font-size:1.2rem; }
@media (max-width:1180px) {
    #login-forms { width:100% !important; }
    #login-forms img { display:block; }
}

#sidebar { background-color:#fff; height:100vh; min-height:370px; width:var(--sidebar-width);/* box-shadow:0 0 10px rgba(0, 0, 0, 0.1); */ z-index:50; position:relative; }
#sidebar #logoAG { width:160px; margin:15px 0; }
#sidebar .nav-link { color:var(--text-color); display:flex; align-items:center; padding:10px 25px; transition:background-color 0.3s, color 0.3s; font-weight:600; }
#sidebar .nav-link:hover { background-color:#f8f9fa; }
#sidebar .nav-link.active { background-color:rgba(var(--primary-red-rgba), 0.1); color:var(--primary-red); }
#sidebar #copyright { font-size:.8em; text-align:center; width:100%; position:absolute; bottom:10px; color:#888; }
#sidebar #contactUsLink { position: absolute; width: 100%; bottom: 40px; }

#main-content { /*background-color:#f8f8f8;*/ min-height:100vh; width:calc(100vw - var(--sidebar-width)); overflow:auto; transition:width 0.4s; }
#main-content > div:first-child { background:white; padding:8px 16px; /*box-shadow:0 0 10px rgba(0, 0, 0, 0.1);*/ color:var(--text-color); position:fixed; width:calc(100% - var(--sidebar-width)); z-index:10; }
/* #main-content > div:first-child a { margin:0 auto; background:white; padding:15px 10px 15px 15px; border-radius:5px; } */
#main-content > div:first-child a.active { background:#e9ecef; color:black !important; }
#main-content > div:last-child { margin-top:58px; /*padding:20px;*/ max-width:calc(100vw - var(--sidebar-width)); max-height:calc(100vh - 70px); overflow:auto; }

#dashboard .pieChart {width:100%; height:150px; margin:10px auto; }

#user_profile #imgAvatar { width:150px; height:150px; box-shadow:0 5px 10px rgba(0, 0, 0, 0.1); }

/* NEW CUSTOM STYLE */
#menuPage #mainCategories > div { width:260px; display:inline-block; margin-right:16px; }
#menuPage #mainCategories > div:hover { background:#fff9f9 }
#menuPage #mainCategories > div b { font-size:18px; }
#menuPage #mainCategories > div span { font-size:12px; }
#foodPage #selectElements { height: auto; background-color:#eaeaea; }
#modalDishDetail #foodImage { height:200px; background-position:center; background-size:cover; }
input#searchItem::placeholder { color:var(--text-color) !important; opacity:0.75; } 
input#searchItem:-ms-input-placeholder { color:var(--text-color) !important; opacity:0.75; } 
input#searchItem::-webkit-input-placeholder { color:var(--text-color) !important; opacity:0.75; }
.goBackLink { font-size:14px; font-weight:600; }
.circle { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid var(--primary-red); }
#foodItemList .card:hover { background-color:#f8f9fa;}
.rightColumn ul li { background-color:transparent; border-color:transparent; }
.navLink { font-size:14px; }
#header .circle { border: 1px solid #d2d2d2 !important; }
#modalLoginPin .dot { width: 20px; height: 20px; margin: 0 5px; border: 1px solid #ccc; border-radius: 50%; transition: background 0.3s; }
#modalLoginPin .dot.filled { background-color: rgba(0, 0, 0, 0.2);}
#modalLoginPin .buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 200px; margin: auto; }
#modalLoginPin .buttons button { padding: 16px; font-size: 18px; border: none; cursor: pointer; border-radius: 50%; background-color: rgba(var(--primary-red-rgba), .1); transition: background 0.3s; color: var(--primary-red); font-weight: bold; }
#modalLoginPin .buttons button:hover { background-color: rgba(var(--primary-red-rgba), .4); }
#modalLoginPin .buttons button:last-child { background-color: #fff !important; color: var(--text-color); }
#modalLoginPin .buttons button:last-child:hover { background-color: rgba(0, 0, 0, 0.2) !important; }
.tempOrderItemBox, .tempOrderItemBox input { border: 1px solid var(--primary-gray); background-color: transparent; }
.tempOrderItemBox.active, .tempOrderItemBox.active input { border: 1px solid var(--primary-red); background-color: transparent; }
.redBorderCard { border-color: var(--primary-red); }
#mainCategories .dropdown-menu li { border-bottom: 1px solid #dee2e6; }
#mainCategories .dropdown-menu li a:hover { background-color:rgba(0, 0, 0, 0.10); }
#mainCategories .dropdown-menu li:last-child { border-bottom: none; }
#mainCategories .btn.show { color: var(--primary-red) !important; background-color: rgba(var(--primary-red-rgba), 0.1) !important; border: 1px solid rgba(var(--primary-red-rgba), 0.1) !important; }
.hoverEffect:hover { background-color: #f8f9fa; }
#qrcode img { width: 100%; }
.steps { display: flex; justify-content: space-between; margin-bottom: 20px; }
.step { text-align: center; font-weight: 600; z-index: 9; background: white; padding: 0 20px; }
.stepNumber { display: flex; border-radius: 50%; height: 40px; width: 40px; align-items: center; justify-content: center; }
.stepNumber.active { background-color: var(--primary-red) !important; color: white !important; }
.step-content { display: none; }
.step-content.active { display: block; }
.steps::before { content: ''; position: absolute; top: 40px; height: 2px; background-color: #ccc; z-index: 0; left: 10%; right: 10%;}
.contactPersonRow {background-color:rgba(var(--primary-red-rgba), 0.1);}
.containerCkbox { display: block; position: relative; padding-left: 35px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.containerCkbox input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.checkmark { position: absolute; top: 2px; left: 0; height: 20px; width: 20px; background-color: #fff; }
.containerCkbox:hover input~.checkmark { background-color: #eee; }
.containerCkbox input:checked~.checkmark { background-color: red; }
.checkmark:after { content: ""; position: absolute; display: none; }
.containerCkbox input:checked~.checkmark:after { display: block; }
.containerCkbox .checkmark:after { left: 7px; top: 2px; width: 6px; height: 12px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
.disableRefForm { pointer-events: none; opacity: 0.4; }

#modalLoginPin.modal.fade .modal-dialog { transform: scale(0.8); transition: transform 0.1s ease-in-out; }
#modalLoginPin.modal.show .modal-dialog { transform: scale(1); }

.slideFromBottom.modal.fade .modal-dialog { transform: translate3d(0, 100%, 0); }
.slideFromBottom.modal.show .modal-dialog { transform:  translate3d(0, 0, 0); }

#feMenuCategories #imgMerchant { background-position:center; background-size:cover;height:200px; border-radius: 20px; position:relative }
#feMenuCategories #imgMerchant > img { position:absolute; top:10px; right: 10px; border-radius:10px; height:50px }
.btn.show { border-color: transparent !important; }
#feOrderSummary .list-group-item { line-height: 1.5; }
.highlight { color: var(--primary-red); }