* {
     user-select: none;
     font-family: 'Zain';

}



body {
     background-color: rgb(252, 226, 194);
}
td {
     height: 40px;

}

button {
     width: 100px;
     height: 30px;
     border-radius: 10px;
     font-size: 20px;
}

@keyframes loading {
     0% {
          rotate: 0deg;
     }

     100% {
          rotate: 360deg;
     }
}

.loading {
     width: 30px;
     height: 30px;
     margin-right: 20px;
     animation-name: loading;
     animation-duration: 0.5s;
     animation-iteration-count: infinite;

}

.item {
     width: 72%;
     margin-right: 14%;
     margin-left: 14%;
     margin-top: 70px;
     background-color: rgb(255, 189, 109);
     border-radius: 10px;
     border: solid rgb(255, 165, 56) 5px;
}

.item:first-child {
     margin-top: 30px;
}
.userpapers{
     padding-inline: 10px;
}
.usercode {
     position: relative;
     height: 70px;
}

.usercode-div {
     position: absolute;
     top: 50%;
     transform: translate(0%, -50%);
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
}

.usercode-label {
     direction: rtl;
     font-size: 25px;
     font-weight: bold;
     margin-left: 10px;
}

.usercode-input {
     all: unset;
     background-color: white;
     border: solid white 2px;
     border-radius: 20px;
     height: 40%;
     width: 40%;
     font-size: 20px;
     text-align: center;
     padding-inline: 2%;
}


form {
     display: grid;
     direction: rtl;
     flex-wrap: wrap;
     padding-right: 2%;
}

.form-input-text {
     font-size: 20px;
     width: 30%;
     height: 25px;
     border-radius: 10px;
     border: solid;
     text-align: center;
}

.form-label {
     margin-right: 10px;
     font-size: 20px;
     font-weight: bold;
}

.form-input-number {
     font-size: 20px;
     width: 50px;
     text-align: center;
     height: 25px;
     border-radius: 10px;
     text-align: center;
     border: solid;
}

.form-input-date {
     border: 3px solid;
     border-radius: 9px;
     padding: 3px;
     user-select: none;
     cursor: default;
}


.ok_button {
     position: absolute;
     right: 50%;
     height: 34px;
     margin-top: -14px;
     transform: translateX(50%);
     font-size: 25px;
}

.form-input-label-pages {
     margin-right: 10px;
     font-size: 20px;
     font-weight: bold;
}

.pages {
     padding-bottom: 100px;
}

.noitem {
     background-color: aliceblue;
     height: 50px;
     text-align: center;
     font-size: 22px;
     display: flex;
     justify-content: center;
     align-items: center;
     width: 95%;
     margin-left: 2.5%;
     border-radius: 25px;
}


td{
border: 2px solid;
}



.quiz{
     width: 70%;
     margin-left: 1%;
     margin-bottom: 20px;
}
.action_button1{
     width: 50px;
}
.action_button2{
     width: 50px;
     margin-right:10px;
     margin-left:10px;

}

.paper{
     direction: rtl;
     display: flex;
     justify-content: space-between;
     align-items: center;
     border: 2px solid;
     border-radius: 10px;
     padding-inline: 2px;
     margin-bottom: 10px;
}

@media (max-width:460px) {
     .paper{
          direction: rtl;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          border: 2px solid;
          border-radius: 10px;
          padding-inline: 2px;
          margin-bottom: 10px;
     }
}

@media (max-width:375px) {
     .quiz{
          font-size: 13px;
     }
}

@media(max-width:950px) {
     .quiz{
          width: 80%;
          margin-left: 1%;
          margin-bottom: 20px;
     }
     .action_button1{
          width: 40px;
          margin-bottom: 10px;

     }
     .action_button2{
          width: 40px;
          margin-right:10px;
          margin-left:10px;
          margin-bottom: 10px;

     }
}



@media(max-width:430px) {
     .item {
          width: 97%;
          margin-left: 0.5%;
          margin-top: 40px;
          background-color: rgb(255, 189, 109);
          border-radius: 10px;
          border: solid rgb(255, 165, 56) 5px;
     }

     .form-input-text {
          width: 90%;
     }

     .form-input-date {
          width: 90%;
     }

}

@media(max-width:770px) {
     .item {
          width: 97%;
          margin-left: 0.5%;
          margin-top: 40px;
          background-color: rgb(255, 189, 109);
          border-radius: 10px;
          border: solid rgb(255, 165, 56) 5px;
     }

     .form-input-text {
          width: 90%;
     }

     .form-input-date {
          width: 90%;
     }
}