@charset "utf-8"; *{margin:0; padding:0; box-sizing:border-box;} body{font-family:'Metropolis', sans-serif; font-weight:400; color:#333;} .container{width:100%;} .wrap{max-width:1200px; width:1200px; margin:0 auto; padding-bottom:50px;} h1{margin-top:7.55%; text-align:center;} .trackDiv{margin-top:5.5%; text-align:center;} .trackDiv p{font-size:42px; color:#ff3595; font-family:'tahoma'; font-weight:700; margin-bottom:15px;} .trackDiv span{font-size:27px; color:#001656; margin-bottom:38px; display:inline-block;} .trackInputDiv{width:83.4%; height:54px; border:2px solid #25376f; border-radius:30px; margin:0 auto; text-align:center; position:relative;} .trackInputDiv input{width:100%; height:100%; font-size:18px; text-align:center; border-radius:30px; border:none; outline:none;font-family: 'Montserrat'; font-weight:500;} .trackInputDiv input::placeholder{color:#999;} ::-webkit-input-placeholder {color: #999;} /* Firefox 4-18 */ :-moz-placeholder { color: #999; opacity: 1; } /* Firefox 19+ */ ::-moz-placeholder { color: #999; opacity: 1; } .trackInputDiv .okBtn{width:10%; height:54px; position:absolute; right:-2px; top:0; bottom:0; margin-top:-2px; border-radius:0 30px 30px 0; background:#0099ef; color:#fff; font-size:20px; cursor:pointer; border:2px solid #0099ef; transition:all 0.3s ease; font-family:'Metropolis'; font-weight:500;} /* OK-hover Effect */ .trackInputDiv .okBtn:hover{background:#0081da; border:2px solid #0081da;} .okBtn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.4), transparent ); transition: left 0.5s ease; pointer-events:none; } .okBtn.style::before { transition: left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .okBtn.style:hover::before { left: 100%; } .statusType{margin-top:4%;} .statusType table{width:662px; margin:0 auto; border:none; text-align:center;} .statusType table tr{} .statusType table td:first-child{width:190px;} .statusType table td:last-child{width:190px;} .statusType table span{padding:12px 30px; background:#011657; color:#fff; border-radius:25px; font-size:16px; margin-top:12px; display:inline-block;} .epChat{text-align:center; margin-top:60px;} .epChat p{margin-bottom:10px;} .epChat img{text-align:center; vertical-align:middle;} .epNum{margin-top:15px;} .epNum span{margin:0 10px; font-size:18px; font-weight:500;} .epChat strong{color:#333 !important; font-size:20px; font-weight:800;} .chatIcon{margin-top:22px; margin-bottom:10px;} .chatIcon a{display:inline-block; margin-bottom:5px; font-size:22px; font-family:'tahoma'; font-weight:400;} .chatIcon a:hover{text-decoration:none !important;} .epChat a{color:#0099ff !important;} .trackContent{width:60%; margin:0 auto; margin-top:4%;} .order-card{background:#fff; border-radius:15px; box-shadow:0 5px 20px rgba(0,0,0,0.08); padding:30px; margin-bottom:30px; transition:transform 0.3s ease;} .order-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:25px; padding-bottom:15px; border-bottom:2px solid #f0f0f0;} .order-id{font-size:24px; color:#001656; font-family:'Montserrat'; font-weight:700;} .order-date{font-size:16px; color:#666;} .status-badge{padding:12px 20px; border-radius:30px; font-weight:700; font-size:14px; margin:8px 0; text-align:center;} .status-in-production{background:#fff3cd; color:#ad6f0b;} .status-ready{background:#d4edda; color:#155724;} .status-completed{background:#cce5ff; color:#0042a9;} .status-cancelled{background:#f8d7da; color:#eb0016;} .status-pending-payment{background:#d9ccff; color:#6240c3;} .status-paused{background:#e2e3e5; color:#383d41;} .order-header:last-child{border-bottom:none; margin-bottom:0; padding-bottom:0;} .no-data{text-align:center; padding:40px 20px 60px; color:#666; font-family:'Metropolis'; font-size:18px;} .no-data-icon{margin-bottom:15px; /*opacity:0.85;*/} .no-data p{font-size:20px;} /*safari*/ .order-header > div:first-child{display:flex; flex-direction:column; overflow:hidden;} .order-id{float:left;} .order-date{float:right; margin-top:7px;} .phone-result-title { text-align: center; margin-bottom: 20px; padding:20px 15px; background: linear-gradient(135deg, #99acff 0%, #0f68d7 100%); border-radius: 10px; color: white; font-family: 'Montserrat'; font-weight: 600; } .phone-result-title h3 { font-size: 20px; margin-bottom: 5px; } .phone-result-title p { font-size: 14px; font-weight:normal; color:#6afff7; display:inline-block; text-shadow:0 0 8px rgba(106, 255, 247, 0.8), 0 0 12px rgba(106, 255, 247, 0.5); } .order-count { text-align: center; margin-bottom: 20px; padding: 10px; background: #f4f4f4; border-radius: 8px; color: #001656; font-size: 16px; } .order-count strong { color: #0099ef; font-weight: 700; } .no-found{text-align:center; padding:20px 20px;} .searchIcon{font-size:50px; margin-bottom:20px;} .no-found h3{font-family: 'Montserrat'; font-weight:700; color:#001656; margin-bottom:15px;} .no-found p{color:#666; margin-bottom:25px; line-height:22px;} .no-found .callBtn{display:flex; justify-content:center; gap:15px; flex-wrap:wrap;} .no-found .callBtn a{font-weight:500; padding:12px 25px; color:#fff; border-radius:25px; text-decoration:none;} .no-found .callBtn a:first-child{background:#25d366; cursor:pointer;} .no-found .callBtn a:last-child{background:#0099ef; cursor:auto;} .whatsAppBtn{ transition: all 0.3s ease; position: relative; overflow: hidden; z-index: 1; } .whatsAppBtn::before { content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgb(0 194 45); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease; opacity: 0; z-index: -1; } .whatsAppBtn:hover { background: #1da84b; } .whatsAppBtn:hover::before { width: 300px; height: 300px; opacity: 1; } .error-message { color: #ff0000; font-size: 16px; margin-top: 10px; text-align: center; display:none; } /* ============================== new: deleted job order ============================== */ .order-block{overflow:hidden; border-bottom:1px solid #bbbbbb; padding-bottom:15px; margin-bottom:15px;} .order-block:last-child{border:none; margin-bottom:0; padding-bottom:0;} .order-block .order-header{margin-bottom:0; padding-bottom:0; border-bottom:none; padding:10px;} .joborders-wrapper{overflow:hidden; padding-left:12px; padding-right:12px;} .jobOrder-deleted{display:flex; justify-content:space-between; align-items:baseline; border-top:1px dashed #e1e1e1; padding-top:15px; padding-bottom:15px;} .jobOrder-title{font-family:'Metropolis'; font-weight:500; color:#e13949;} .jobOrder-number{font-family:'Montserrat'; font-weight:500; color:#001656; width:70%; text-align:right;} .jobOrder-number span{display:inline-block; width:100px; line-height:26px; /*background:#f1f1f7;*/ border-radius:20px; margin-left:8px; margin-bottom:8px; text-align:center; color:#e13949; border:1px solid #e13949;}