.color1{color: #528265}
.color2{color: #02A8A8}
.color3{color: #42E6A4}
.color4{color: #F5DEA3}
.color5{color: #FAF8F1}
.color6{color: #FAEAB1}  
.color7{color: #E5BA73}
.color8{color: #C58940}
.color9{color: #ffdc00}

@font-face {
    font-family: TajawalRegular;
    src: url(../webfonts/Tajawal-Regular.ttf);
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    direction: rtl;
}

a{text-decoration: none; color: unset;}
a:visited{color: unset;}

body{background-color: #FAF8F1;}
.home-logo{width: 25%; margin: 5% auto; border-radius: 50%;}
.header-logo{width: 120px; margin: 0px;}
header{background-color: #528265; display: flex; justify-content: space-between;}
.backhome{margin-top: 30px; font-size: 3rem; color: #ffdc00; margin-left: 20px;}
.text-center{text-align: center;}
.text-right{text-align: right;}
.text-left{text-align: left;}
.wrap-btn{display: flex; justify-content: center; margin: 2% auto; text-align: center;}
.w-btn{margin: 0 2rem; font-size: 3rem; padding: 10px; background-color: #528265; color: #ffdc00;
        font-family: TajawalRegular; border-radius: 10px;} 
.btnfix{width: 150px; height: 120px; padding: 5px; font-size: 2rem;}
.bw{background-color: whitesmoke; padding: 10px 15px; border-radius: 10px; color: #ffdc00;}

.att-btn{margin: 5px; font-size: 0.9rem; padding: 10px; background-color: #528265; color: #ffdc00;
  font-family: TajawalRegular; border-radius: 10px;}

.form-warp, .form2-warp{
    width: 50%;
    min-width: 400px;
    margin: 20px auto;
    padding: 15px;
    background-color: #aad7ad;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 1.2rem;
}

.form2-warp{background-color: #dddddd;}

input[type=text], input[type=password], input[type=number], input[type=file], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    text-align: center;
  }
  
input[type=submit],
.form-warp button,
.form2-warp button {
    width: 100%;
    background-color: #ffdc00;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: bold;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  }
  
input[type=submit]:hover,
.form-warp button:hover,
.form2-warp button:hover {
    background-color: #00bccc;
}

.btn-detele{
  background-color: red !important;
}
  
.form-warp div {
    border-radius: 0px;
    background-color: #f2f2f25b;
    padding: 10px;
  }


  .logo-login img{width: 120px;}

  .center-text{text-align: center;}
  .form-title{
    text-align: center;
    font-weight: bold;
    color: #047e79;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 1.6rem;
}

.form-error{color: red;}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

.p-3{
  padding: 10px 20px;
}

.add-btn{
  float: left;
  padding: 15px;
  background-color: #C58940;
  color: #dddddd;
  font-size: 1.3rem;
  margin: 10px;
  border-radius: 15px;
}

.title-srfa{
  font-size: 2rem;
  width: fit-content;
  padding: 5px 10px;
  color: #047e79;
  border-bottom: #047e79 solid 5px;
  margin-bottom: 10px;
}

.student-card{
  width: 220px;
  height: 340px;
  background-color: #ffdc00;
  border-radius: 10px;
  margin: 5px 5px 30px 30px;
  padding: 10px;
}

.student-avatar{
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background-color: #dddddd;
  border: #aad7ad solid thin;
  background-image: url(../images/student.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0px auto;
  position: inherit;
  top: 20px
}

.student-name{
  text-align: center;
  font-size: 1.5rem;
  color: #047e79;
  font-weight: bolder;
  margin-top: 10px;
}

.student-class{
  color: red;
  text-align: center;
  font-size: 1.2rem;
  width: fit-content;
  padding: 5px 10px;
  margin: 5px auto;
}