@media all and (max-width: 1023px) {.dot {  display: none;}}
#myBtn {display: none;position: fixed;bottom: 20px;right: 30px;z-index: 99;font-size: 18px;border: none;outline: none;
  background-color:  #077d67;color:  white;cursor: pointer;border-radius: 50%;transition: all 0.5s;
  width:80px;height: 80px;
}
#myBtn:hover {background-color: white;color:  #077d67;border: 1px solid  #077d67;}
#menuBtn {position: fixed;top: 20px;left: 30px;z-index: 99;font-size: 25px;font-weight: bold;background: transparent;border: none;outline: none;cursor: pointer;padding: 15px;transition: all 0.5s;}
#menuBtn:hover {color:  #077d67;transform: rotate(180deg);}
#iMenu {position: fixed;top: 50%;left: 0px;transform: translate(0%, -50%);background: rgba(50,50,50,0.2);backdrop-filter:blur(15px);width: 20%;height: 100%;display: flex;flex-direction: column;
  place-items:center;justify-content: center;z-index: 98;
}
.projectsDiv {width: 90%;max-height: 60%;margin: 12px 0;overflow-x: hidden;overflow-y: auto;display: flex;flex-direction: column;place-items:center;padding: 3px;}
.setBtnDiv {width: 90%;max-height: 40%;margin: 12px 0;display: flex;flex-direction: column;place-items:center;padding: 3px;}
#nProjet, #nProjetV, #setBtn, #logInBtn, #submitDeitBtn {padding: 5px 10px;margin: 3px;width: 100%;font-size: 21px;border-radius: 5px; border: 1px solid #077d67;color: #077d67;font-weight: bold;transition: 0.2s;}
#nProjet:hover, #nProjetV:hover, #logInBtn:hover, #setBtn:hover, #submitDeitBtn:hover {background:#077d67 ;border: 1px solid #077d67;color: white;}
.projectsBtns {padding: 5px 10px;margin: 3px;font-size: 21px;width: 100%;border-radius: 5px; border: 1px solid #077d67;transition: 0.2s;}
.projectsBtns:hover {background:#077d67 ;border: 1px solid #077d67;color: white;}
.projectsBtns:disabled {color: rgb(100,100,100);background: rgb(200,200,200);cursor: not-allowed;}
.container {height: 100%;width: 100%;display: grid;justify-content: space-around;place-items: center;margin: 0;padding: 1%;min-width: 100%;}
section {width:100%;display: flex;}
.row {align-items: center;text-align: center;height: 100%;width: 100%;}
.content-a {text-align: center;width: 100%;}
.body {display: grid;justify-content: center;margin: 0px;padding: 0px;}
.body .view {display:flex;}
.clsbtn {border: none;background: transparent;font-size: 22px;font-weight: bold;position: absolute;top: 20px;right: 20px;transform: translate(-50%, -50%);transition: 0.2s;}
.clsbtn:hover {color: red;}
.diaghead {display: grid;place-items:center;position: relative;width: 100%;}
.diaghead p {}
.condiv {width: 70%;height: 70%;background: rgb(240,240,240);border-radius: 20px;position: absolute;top:50%;left:50%;
  transform: translate(-50%, -50%);padding: 20px;place-items:center;max-width: 70%;max-height: 70%;
}
.hdiv {height: 80%;max-height: 80%;width: 100%;overflow: auto;display: flex;flex-direction: column;justify-content: space-around;}
.hdiv > div  {margin: 10px 0px;}
.hdiv p {margin: 1px 3px;font-size: 20px;}
.bgdiv {position: fixed;top:0;left: 0;width: 100%;height: 100%;background: rgba(50,50,50,0.2);backdrop-filter:blur(15px);z-index: 90;}
.submitBtn {padding: 5px 20px;margin: 3px;font-size: 19px;border-radius: 5px; border: 1px solid #077d67;color: #077d67;transition: 0.2s;}
.submitBtn:hover {background:#077d67 ;border: 1px solid #077d67;color: white;}
.diagrow {display: flex;place-items:center;justify-content: center;width: 100%;}
.diagrowPro {display: flex;place-items:center;justify-content: space-around;margin: 2px;width: 100%;}
.diagrow input, .diagrow select {border-radius: 5px; border: 1px solid #077d67;font-size: 20px;text-align: center;}
.diagcol {display: flex;flex-direction: column;place-items:center;justify-content: center;width: 100%;}
.eley, .elex {border-radius:50%;background: rgb(100,100,100);width:25px;height:25px;margin:1px;border: 1px solid rgba(0,0,0,0);}
.eley:hover {border: 1px solid rgba(0,0,0,0.7);cursor: pointer;}
.elex {background: transparent;}
p {cursor: default;}
.eleypro {border-radius:50%;background: rgb(100,255,100);width:25px;height:25px;margin:1px;}
.eleypro:hover {border: 1px solid rgba(0,0,0,0.7);cursor: pointer;}
.btRow, .batView {display: flex;justify-content: space-around;}
.batteri, .projectView {display: grid;}
.pHeader {display: flex;justify-content: center;}
.pHeader p {font-size: 22px;font-weight: bold;}
.notificatins{position: fixed;padding: 20px;border-radius: 20px;border: 1px solid rgba(155,155,155,0.6);background: rgba(155,155,155,0.4);backdrop-filter:blur(15px);z-index: 20;display: grid;padding-top: 15px;top: 20px;right: -270px;min-width: 150px;max-width: 250px;}
.notificatinsf{position: fixed;padding: 20px;border-radius: 20px;border: 1px solid rgba(155,155,155,0.6);background: rgba(155,155,155,0.4);backdrop-filter:blur(15px);z-index: 20;display: grid;padding-top: 15px;top: -270px;right: 50%;min-width: 150px;transform: translateX(50%);}
.notifyclosy{background: transparent;font-weight: bolder;font-size: 20px;color: black;transition: 0.2s;position: absolute;top: 10px;left: 10px;cursor: pointer;border: none;}
.notifyclosy:hover{color: red;}
.notifytitle{color: rgb(100,100,100);font-weight: bold;font-size: 18px;text-align: center;margin:  20px 0 5px 0;}
.notifycontnt{color: rgba(100,100,100,0.95);margin:  5px 0 5px 0;}
#waitdiv {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 101;
  display: grid;justify-content: center;place-items:center;width: 5rem;height: 5rem;border: 1px solid #077d67;
  border-radius: 50%;backdrop-filter:blur(15px);background: rgba(10, 10, 10, 0.1);
}
#waitP {font-size: 2rem; font-weight: bold;}
.swipeBTN {border-radius: 50%;width: 75px;height: 75px;border: 1px solid rgb(20,200,150);transition: 0.2s;margin: 0 5px;
  font-size: 1rem;font-weight: bold;
}
.swipeBTN:hover {border: 1px solid rgb(200,150,20);background: rgb(20,200,150);color: white;cursor: pointer;}
.swipeview {display: flex;justify-content: center;margin: 5px 0px;}
table {font-family: arial;border-collapse: collapse;width: 100%;font-size: 0.9rem;background: white;}
tr:nth-child(even) {background-color: #dddddd;}
td, th {border: 0.1rem solid #dddddd;text-align: center;word-wrap: break-word;padding: 0;padding: 0.2rem;height: 2rem;min-width: 7rem;text-align: center;}
.details {}
.details p {margin: 0px;}
.hold {display: flex;justify-content: space-around;width: 100%;}
.round_an {display: grid;}
.horViewer {display: flex;justify-content: center;}
.itemViewer {font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;margin: 0;}
.progress-circle {position: relative;width: 150px;height: 150px;border-radius: 50%;display: flex;justify-content: center;align-items: center;background: conic-gradient(#e0e0e0 360deg, #e0e0e0 0deg);}
.progress-circle::before {content: '';position: absolute;width: 130px;height: 130px;background: white;border-radius: 50%;}
.percentage-text {position: relative;font-size: 1em;font-weight: bold;color: #333;z-index: 10;}
.proDeleteBtn {padding: 5px 20px;margin: 3px;font-size: 19px;border-radius: 5px; border: 1px dashed rgb(220,50,50);color: rgb(220,50,50);transition: 0.2s;}
.proDeleteBtn:hover {background:rgb(220,50,50) ;border: 1px solid rgb(50,50,50);color: white;}