* {margin: 0%;padding: 0%;box-sizing: border-box;}body {background-image:linear-gradient(to right,#210953 , #18073b);color: #fff;font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;}.dashboard {width: 25%;height: auto;background: #ffffff1a;backdrop-filter: blur(20px);border: 1px solid #ffffff30;box-shadow: 0 0 30px #0000002a;margin: 15px 10px;padding: 10px;position: fixed;top: 10px;z-index: 100;}.circle {background-color: rgb(240, 82, 82);width: 100px;height: 100px;border-radius: 50%;position: fixed;z-index: 0;top: 10px }.head {text-align: center;margin: 20px auto;}input {width: 100%;height: 30px;outline: none;border: none;background: #ffffff1a;backdrop-filter: blur(20px);border: 1px solid #ffffff30;box-shadow: 0 0 30px #0000002a;direction: rtl;margin: 10px auto;border-radius: 4px;padding: 4px;color: #fff;}input:focus {background: #ffffff1a;backdrop-filter: blur(20px);border: 1px solid #ffffff30;box-shadow: 0 0 30px #0000002a;}.price input {width: 100%;}input::placeholder {color: #fff;}#total {background-color: rgb(143, 59, 59);padding: 5px 5px;border-radius: 4px;color: #fff;margin: 10px 0px;width: 100%;direction: rtl;}#total::before {content: "الاجمالي : ";}button {width: 100%;height: 30px;border: none;cursor: pointer;background-color: rgba(0, 0, 0, 0.2);border: 1px solid #666;color: #fff;border-radius: 20px;transition: all 1s;font-weight: bold;margin-top: 5px;margin-bottom: 5px;}button:hover {background-color: rgba(0, 0, 0, 0.2);}.content {width: 70%;height: 100px;display: flex;float: right;margin-right: 20px;margin-top: 145px;flex-wrap: wrap;}.no-product{margin:auto;width:300px;height:300px;border-radius: 50%;}.thetitle {position: absolute;top: 75px;left: 63%;transform: translate(-50%, -50%);}.card {width: 30%;height: 370px;background: #ffffff1a;backdrop-filter: blur(20px);border: 1px solid #ffffff30;box-shadow: 0 0 30px #0000002a;margin: 10px 10px 40px 10px;position: relative;text-align: center;padding: 20px;color: #eee;border-radius: 4px;}.delete {position: absolute;width: 50px;height: 50px;top: 100%;border-radius: 50%;left: 50%;transform: translate(-50%, -50%);margin: auto;background-color: #12042f;z-index: 100;}.split{width: 70px;margin:5px auto 30px auto;height:3px;background-color:rgba(154, 149, 149, 0.6);border-radius: 450px ;border:none }.split2{width: 20px;height:2px;margin:10px auto;background-color:#ffa400;border:none }.edit {position: absolute;width: 30px;height: 30px;top: 4%;right: -14px;transform: translate(-50%, -50%);margin: auto;background-color: #12042f;border: none;border-left: 1px solid #444;border-bottom: 1px solid #444;padding: 5px;border-radius: 1px }.edit:hover{background-color: #12042f}.delete:hover {background-color: #12042f;}.search{position: absolute;top:50px;right:67px }.search-input{width:250px;border-radius: 2px;padding-right:10px;font-size:15px }@media screen and (max-width:850px) {.dashboard {width: 95%;height: auto;margin: auto;position: absolute;top: 320px;left: 50%;transform: translate(-50%, -50%) }.circle {background-color: rgb(240, 82, 82);width: 100px;height: 100px;border-radius: 50%;position: absolute;top: 10px;z-index: 0;}.thetitle {position: absolute;top: 650px;left: 50%;transform: translate(-50%, -50%);text-align: center;font-size: 13px;}.content {width: 100%;height: auto;display: flex;flex-direction: column;flex-wrap: wrap;justify-self: center;margin: 730px auto;}.card {width: 80%;margin: 30px auto;}.split{width: 70px;margin:5px auto 15px auto;height:3px;background-color:rgba(154, 149, 149, 0.6);border-radius: 450px ;border:none }.search{top: 680px;}.no-product{margin:auto;width:200px;height:200px;margin-top: 20px;}}