html, body{background-color: #212121;color: #eee;margin: 0;padding: 0;font-family: system-ui;direction: rtl;overflow-x: hidden;scrollbar-width: thin;scrollbar-color: #606060 #323232;}
#ablack{display:block;background-color: rgb(0 0 0 / 42%);position: fixed;width: 100%;height: 100%;z-index: 3;}
#ablack2{display:none;background-color: rgb(0 0 0 / 42%);position: fixed;width: 100%;height: 100%;z-index: 3;}
#load{display:block;width: 50px;height: 50px;background-image: url(../img/load.svg);background-size: 50px 50px;background-position: center;background-repeat: no-repeat;margin: auto;margin-top: 200px;}
.clear{clear: both;}
#container{padding: 0px 0px 10px 0px;}
.topcont{background-color: #212121;height: 85px;}
#slogo{background-image: url(../img/logobg11.png);background-size:auto;background-position:center;background-repeat:no-repeat;width:200px;height:50px;margin: 20px 20px 0px 0px;float: right;}
#cen1{padding: 10px 0px 10px 0px;margin: 0px 15px 0px 15px;position: relative;}
.txcenttop{font-size: 13px;text-align: center;padding: 15px 40px;margin: 0px 0px 40px 0px;}
.brselfr{background-color: #454545;background-image: url(../img/down2.png);background-size:25px 25px;background-position:center right 10px;background-repeat:no-repeat;box-shadow: 0px 0px 2px 0px #d7d7d7;margin: 0px 20px 20px 20px;border-radius: 5px;padding: 15px 50px 15px 20px;font-size: 13px;transition: 0.3s;cursor: pointer;}
.brselfr:active{filter: brightness(0.9);}
.menbtn{background-color: #454545;background-image: url(../img/menu.png);background-size: 25px 25px;background-position: center;background-repeat: no-repeat;box-shadow: 0px 0px 2px 0px #bbbbbb;margin: 20px 0px 0px 20px;border-radius: 5px;padding: 20px 20px;transition: 0.3s;cursor: pointer;float: left;}
.menbtn:active{filter: brightness(0.9);}
.logscont{display: flex;margin: 5px 0px 0px 0px;}
.brlog{background-size: 50px 48px;background-position: center;background-repeat: no-repeat;padding: 30px 0px;width: 100%;}
.stscont{margin: 5px 0px 0px 0px;}
.stscontx{margin: 0px 0px 0px 0px;}
.stsin{float: right;padding: 0px 0px 0px 0px;margin: 10px 20px;}
.stsinx{float: right;padding: 0px 0px 0px 0px;margin: 0px 0px 0px 0px;}
.sttxt{font-size: 11px;margin: 0px 7px 0px 0px;}
/* --- Base Dot Structure --- */
.status-dot {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
/* Base ripple styling (used ONLY by Online) */
.status-dot.is-online::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #22c55e;
  box-sizing: border-box;
  animation: ripple 1.5s infinite ease-out;
}
/* ==========================================
   1. ONLINE (Green + Ripple)
   ========================================== */
.status-dot.is-online {
  background-color: #22c55e; /* Green */
}
/* ==========================================
   2. BUSY / OFFLINE (Solid Red - No Ripple)
   ========================================== */
.status-dot.is-busy {
  background-color: #ef4444; /* Solid Red */
}
.status-dot.is-wait {
  background-color: #ff8a00; /* Solid Orange */
}
.status-dot.is-ok {
  background-color: #00ff11; /* Solid Green */
}
/* --- Ripple Animation --- */
@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}
.gbtnclk{background-color: #008d2a;border-radius: 5px;text-align: center;font-size: 14px;margin: 30px 30px 50px 30px;padding: 12px 0px 12px 0px;border: 1px solid #999999;transition: 0.3s;cursor: pointer;}
.gbtnclk:active{background-color: #00671f;}
.gbtnclkchk{background-color: #008d2a;border-radius: 5px;text-align: center;font-size: 14px;margin: 30px 30px 50px 30px;padding: 12px 0px 12px 0px;border: 1px solid #999999;transition: 0.3s;cursor: pointer;}
.gbtnclkchk:active{background-color: #00671f;}
.selsty{width: 90%;height: auto;max-height:400px;margin: auto;margin-top: 100px;border-radius: 5px;background-color: #212121;border: 1px solid #444;overflow:auto;transition: 0.3s;}
.thisbrsty{background-image: url(../img/car.png);background-size: 25px 25px;background-position: center right 20px;background-repeat: no-repeat;width: auto;background-color: #2b2b2b;border-bottom: 1px solid #444;text-align: right;font-size: 17px;padding: 15px 65px 15px 0px;cursor: pointer;transition: 0.3s;}
.thisbrsty:first-child{border-top-right-radius: 5px;border-top-left-radius: 5px;}
.thisbrsty:last-child{border-bottom: 0px;}
.thisbrstysec{background-image: url(../img/car2.png);background-size: 25px 25px;background-position: center right 20px;background-repeat: no-repeat;width: auto;background-color: #2b2b2b;border-bottom: 1px solid #444;text-align: right;font-size: 17px;padding: 15px 65px 15px 20px;cursor: pointer;transition: 0.3s;}
.thisbrstysec:first-child{border-top-right-radius: 5px;border-top-left-radius: 5px;}
.thisbrstysec:last-child{border-bottom: 0px;}
.yofsub{background-image: url(../img/car3.png);background-size: 25px 25px;background-position: center right 20px;background-repeat: no-repeat;width: auto;background-color: #2b2b2b;border-bottom: 1px solid #444;text-align: right;font-size: 17px;padding: 15px 65px 15px 20px;cursor: pointer;transition: 0.3s;}
.yofsub:first-child{border-top-right-radius: 5px;border-top-left-radius: 5px;}
.yofsub:last-child{border-bottom: 0px;}
#brsel{display: none;}
#brsel2{display: none;}
#brsel3{display: none;}
#brselfr:empty::before {
    content: "المركبة";
    color: #adadad;
    pointer-events: none;
}
#secrselfr:empty::before {
    content: "الموديل";
    color: #adadad;
    pointer-events: none;
}
#thrselfr:empty::before {
    content: "سنة الصنع";
    color: #adadad;
    pointer-events: none;
}
#neselc{display: none;}
#cen2{display: none;position: relative;margin: 30px 15px 0px 15px;}
#cen3{display: none;background-color: #272727;border: 1px solid #444;margin: 30px 15px 0px 15px;border-radius: 5px;padding: 0px 0px 20px 0px;position: relative;}
.inpcont{margin: 15px 30px;position: relative;}
.inpcontitms{margin: 15px 30px;position: relative;}
.reqsy{background-color: #454545;border-radius: 5px;padding: 13px 20px 13px 40px;font-size: 13px;color: #eee;border: 0px;box-shadow: 0px 0px 2px 0px #d7d7d7;box-sizing: border-box;width: 100%;transition: 0.3s;}
.reqsy::placeholder{color:#adadad;}
 .reqsy:focus{background-color: #4d4c4c;box-shadow: 0px 0px 3px 0px #fff;outline: 0;border: 0px;}
 .reqsytxtarea{background-color: #454545;border-radius: 5px;padding: 13px 20px 13px 40px;font-size: 14px;color: #eee;border: 0px;box-shadow: 0px 0px 2px 0px #d7d7d7;box-sizing: border-box;width: 100%;min-height: 150px;resize:none;transition: 0.3s;}
.reqsytxtarea::placeholder{color:#adadad;}
 .reqsytxtarea:focus{background-color: #4d4c4c;box-shadow: 0px 0px 3px 0px #fff;outline: 0;border: 0px;}
.orcont{background-color: #272727;border: 1px solid #444;margin: 0px 15px;border-radius: 5px;}
.orcontoptxt{text-align: center;font-size: 11px;margin: 15px 20px 0px 20px;}
#addreqitm{background-image: url(../img/pitm2.png);background-size: 25px 25px;background-position: center;background-repeat: no-repeat;width: 25px;height: 25px;float: left;transition: 0.3s;cursor: pointer;}
#addreqitm:active{filter: brightness(0.5);}
.remitm{background-image: url(../img/x.png);background-size: 20px 20px;background-position: center;background-repeat: no-repeat;width: 25px;height: 25px;float: left;transition: 0.3s;cursor: pointer;position: absolute;top: 9px;left: 9px;}
.remitm:active{filter: brightness(0.5);}
#pg2nxt{display: none;pointer-events: none;opacity: 0.6;}
#pg3nxt{display: none;pointer-events: none;opacity: 0.6;}
.confsty{background-color: #313131;text-align: center;border-bottom: 1px solid #444;font-size: 16px;padding: 12px 0px 12px 0px;border-top-right-radius: 5px;border-top-left-radius: 5px;margin: 0px 0px 5px 0px;}
.vehinfo{font-size: 12px;padding: 10px 15px;}
.perinfo{font-size: 12px;padding: 10px 15px;}
.prcont{margin: 0px 0px 5px 0px;}
.lreqitms{font-size: 12px;padding: 10px 15px;}
.thitmv{display:none;margin: 5px 15px 5px 15px;}
.notescont{display:none;font-size: 12px;text-align: center;padding: 10px 15px;}
.backbtn{display:none;background-image: url(../img/back.png);background-size: 30px 30px;background-position: center;background-repeat: no-repeat;width: 30px;height: 30px;position: absolute;top: -50px;right: 20px;transition: 0.3s;cursor: pointer;}
.backbtn:active{filter: brightness(0.5);}
.menucont{background-color: #212121;height: 100%;width: 200px;z-index: 1;position: absolute;left: -210;top: 0;border-right: 1px solid #444;overflow: hidden;transition: 0.3s;}
.topmencont{position: relative;height: 40px;margin: 0px 0px 40px 0px;}
.xmenu{background-image: url(../img/x.png);background-size: 20px 20px;background-position: center;background-repeat: no-repeat;width: 30px;height: 30px;position: absolute;margin: 10px 10px 0px 0px;transition: 0.3s;cursor: pointer;}
.xmenu:active{filter: brightness(0.5);}
.menaitms{}
.itmcontyu{background-color: #272727;background-size: 18px 18px;background-position: center right 10px;background-repeat: no-repeat;border-top: 1px solid #444;font-size: 13px;padding: 15px 45px 15px 0px;transition: 0.3s;cursor: pointer;}
.itmcontyu:last-child{border-bottom: 1px solid #444;}
.itmcontyu:active{filter: brightness(0.5);}
#neworn{background-image: url(../img/neworn.png);}
#orchk{background-image: url(../img/enq.png);}
.brainfocont{margin: 80px 0px 0px 0px;}
.brainftxtv{font-size: 10px;text-align: center;padding: 2px 10px 7px 10px;}
.brainftxt{font-size: 11px;text-align: center;padding: 2px 10px 0px 10px;}
#brphn{color: #36feff;text-decoration: none;}
#brphn:hover{color: #36feff;text-decoration: none;}
#brphn:visited{color: #36feff;text-decoration: none;}
#pg1nxt{pointer-events: none;opacity: 0.6;}
#cen4{display: none;background-color: #272727;border: 1px solid #444;margin: 30px 15px 0px 15px;border-radius: 5px;padding: 0px 0px 20px 0px;position: relative;}
.phinqc{margin-top: 30px;}
#chorbtnb{pointer-events: none;opacity: 0.6;}
#winqsec{}
.whordet{background-color: #313131;text-align: right;border: 1px solid #444;margin: 40px 20px 20px 20px;border-radius: 5px;transition: 0.3s;}
.whordet:hover{border: 1px solid #a5a5a5;}
.orstatsn{float: right;background-color: #272727;margin: -13px 15px 5px 15px;border: 1px solid #444;border-radius: 5px;padding: 0px 10px 5px 10px;}
.vehdina{margin: 0px 30px 30px 30px;font-size: 14px;}
.aoritmsint{margin: 0px 30px 30px 30px;font-size: 14px;}
.pdinitm{margin: 0px 0px 10px 0px;}
.inptscomm{font-size: 14px;text-align: center;margin: 0px 30px 30px 30px;padding: 0px 10px 0px 10px;}
#cen5{display: none;background-color: #272727;border: 1px solid #444;margin: 30px 15px 0px 15px;border-radius: 5px;padding: 0px 0px 20px 0px;position: relative;}
.okcont{}
.oklog{background-image: url(../img/ok.png);background-size: 100px 100px;background-position: center;background-repeat: no-repeat;width: 100px;height: 100px;margin: auto;margin-top: 30px;}
.oktxt{font-size: 16px;text-align: center;padding: 0px 20px 0px 20px;}
.oktxt2{font-size: 14px;text-align: center;padding: 10px 20px 20px 20px;}
#ornumun{border-bottom: 1px solid #444;color: #00bed3;cursor: pointer;transition: 0.3s;}
#ornumun:active{filter: brightness(0.6);}
.errcont{position: fixed;width: 100%;z-index: 2;top: -100px;transition: 0.3s;}
#ermsgbox{background-color: #811717;border: 1px solid #444;margin: 30px 30px 30px 30px;border-radius: 5px;color: #eee;font-size: 13px;padding: 15px 15px;}
.darea{margin: 25px 0px 0px 0px;font-size: 13px;text-align: left;padding: 0px 0px 0px 30px;direction: ltr;}
.botomensec{border-top: 1px solid #444;position: absolute;width: 100%;bottom: 0;}
#admnlog{background-image: url(../img/adm1.png);background-size:25px 25px;background-position:center;background-repeat:no-repeat;width: 50px;height: 50px;transition: 0.3s;cursor: pointer;}
#admnlog:active{filter: brightness(0.6);}