/* pages/teacher/Mode-arrive/Mode-arrive.wxss */
.container {
    height: 100vh;
    background-size: cover;
    background-position: center;
}
.ball-image {
    position: absolute;     /* 绝对定位 */
    left: -30px;            /* 距离左侧200px */
    top: 370px;             /* 距离顶部150px */
    width: 450px;           /* 图片宽度 */
    height: auto;           /* 图片高度自适应 */
    z-index: 2;             /* 设置z-index，确保在前面 */
}
.back-image {
    position: absolute;     /* 绝对定位 */
    left: 5px;            /* 距离左侧200px */
    top: 0px;             /* 距离顶部150px */
    width: 70px;           /* 图片宽度 */
    height: auto;           /* 图片高度自适应 */
    z-index: 2;             /* 设置z-index，确保在前面 */
}
.circle {
    width: 65px;  /* 圆形的宽度 */
    height: 65px; /* 圆形的高度 */
    background-color: #80acd2; /* 圆形的背景颜色 */
    border-radius: 50%; /* 将矩形变成圆形 */
    position: absolute;
    left: 300px;     
    top: 6px;     
    z-index: 3;
}
.rank-image {
    position: absolute;     /* 绝对定位 */
    left: 300px;            /* 距离左侧200px */
    top: 15px;             /* 距离顶部150px */
    width: 65px;           /* 图片宽度 */
    height: auto;           /* 图片高度自适应 */
    z-index: 3;             /* 设置z-index，确保在前面 */
}
.nobody-image {
    position: absolute;     /* 绝对定位 */
    left: -8px;            /* 距离左侧200px */
    top: 45px;             /* 距离顶部150px */
    width: 400px;           /* 图片宽度 */
    height: auto;           /* 图片高度自适应 */
    z-index: 3;             /* 设置z-index，确保在前面 */
}
.rectangle1 {
    position: absolute;
    left: 90px;     /* 矩形左上角的横坐标 */
    top: 305px;      /* 矩形左上角的纵坐标 */
    width: 180px;   /* 矩形的宽度 */
    height: 60px;   /* 矩形的高度 */
    background-color: #ffb6a4; 
    z-index: 3;
    border: 7px solid #78ba7d;    /* 矩形的边框 */
}
.rectangle2 {
    position: absolute;
    left: 90px;     /* 矩形左上角的横坐标 */
    top: 425px;      /* 矩形左上角的纵坐标 */
    width: 180px;   /* 矩形的宽度 */
    height: 60px;   /* 矩形的高度 */
    background-color: #ffb6a4; 
    z-index: 3;
    border: 7px solid #78ba7d;    /* 矩形的边框 */
}
.text1 {
    position: absolute;      /* 绝对定位 */
    left: 105px;             /* 距离左侧50px */
    top:310px;              /* 距离顶部50px */
    font-size: 28px;        /* 字号 */
    margin: 10px;           /* 边距 */
    line-height: 20px;      /* 行间距 */
    color: #4f4f4f;            /* 文本颜色 */
    font-weight: bold;
    padding: 10px;          /* 内边距 */
    z-index: 4;
    opacity: 0.9;
}
.text2 {
    position: absolute;      /* 绝对定位 */
    left: 105px;             /* 距离左侧50px */
    top:430px;              /* 距离顶部50px */
    font-size: 28px;        /* 字号 */
    margin: 10px;           /* 边距 */
    line-height: 20px;      /* 行间距 */
    color: #4f4f4f;            /* 文本颜色 */
    font-weight: bold;
    padding: 10px;          /* 内边距 */
    z-index: 4;
    opacity: 0.9;
}
.circle1 {
    width: 60px;  /* 圆形的宽度 */
    height: 60px; /* 圆形的高度 */
    background-color: #ffffff; /* 圆形的背景颜色 */
    border: 5px solid #ffd67b;    /* 矩形的边框 */
    
    border-radius: 50%; /* 将矩形变成圆形 */
    position: absolute;
    left:45px;     
    top: 290px;     
    z-index: 3;
}
.circle2 {
    width: 95px;  /* 圆形的宽度 */
    height: 55px; /* 圆形的高度 */
    background-color: #ffffff; /* 圆形的背景颜色 */
    border: 5px solid #ffd67b;    /* 矩形的边框 */
    
    border-radius: 50%; /* 将矩形变成圆形 */
    position: absolute;
    left: 10px;     
    top: 390px;     
    z-index: 3;
}
.circle3 {
    width: 45px;  /* 圆形的宽度 */
    height: 45px; /* 圆形的高度 */
    background-color: #ffffff; /* 圆形的背景颜色 */
    border: 5px solid #ffd67b;    /* 矩形的边框 */
    
    border-radius: 50%; /* 将矩形变成圆形 */
    position: absolute;
    left:255px;     
    top: 350px;     
    z-index: 3;
}
.grade1 {
    position: absolute;      /* 绝对定位 */
    left: -20px;             /* 距离左侧50px */
    top:0px;              /* 距离顶部50px */
    font-size: 22px;        /* 字号 */
    margin: 10px;           /* 边距 */
    line-height: 20px;      /* 行间距 */
    color:#78ba7d ;            /* 文本颜色 */
    font-weight: bold;
    padding: 10px;          /* 内边距 */
    z-index: 4;
    opacity: 0.9;
}
.grade2 {
    position: absolute;      /* 绝对定位 */
    left: -5px;             /* 距离左侧50px */
    top:-5px;              /* 距离顶部50px */
    font-size: 22px;        /* 字号 */
    margin: 10px;           /* 边距 */
    line-height: 20px;      /* 行间距 */
    color:#78ba7d ;            /* 文本颜色 */
    font-weight: bold;
    padding: 10px;          /* 内边距 */
    z-index: 4;
    opacity: 0.9;
}
.grade3 {
    position: absolute;      /* 绝对定位 */
    left: -10px;             /* 距离左侧50px */
    top:-10px;              /* 距离顶部50px */
    font-size: 26px;        /* 字号 */
    margin: 10px;           /* 边距 */
    line-height: 20px;      /* 行间距 */
    color:#bd3124 ;            /* 文本颜色 */
    font-weight: bold;
    padding: 10px;          /* 内边距 */
    z-index: 4;
    opacity: 0.9;
}
.rectangle3 {
    position: absolute;
    left: 45px;     /* 矩形左上角的横坐标 */
    top: 535px;      /* 矩形左上角的纵坐标 */
    width: 280px;   /* 矩形的宽度 */
    height: 50px;   /* 矩形的高度 */
    background-color: #ffffff; 
    z-index: 3;
    border: 1px solid #bbbbbb;    /* 矩形的边框 */
    border-radius: 46px;
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.5); /* 添加阴影 */
}
input {
    margin-top: 10px;
    margin-left: 30px;
    font-size: 16px;
    color: #333;
    padding: 5px;
    z-index: 4;
  }
  .confirm-button {
    width: 80px !important; /* 用于测试优先级问题 */
    left: -5px;             /* 距离左侧50px */
    top:520px;              /* 距离顶部50px */
    padding: 5px;      /* 内边距，控制按钮大小 */
    font-size: 18px;        /* 字号 */
    color: #fcfcfc;            /* 按钮文本颜色 */
    background-color: #3662e5; /* 按钮背景颜色 */
    border: 3px solid #e7cd2d;    /* 矩形的边框 */
    border-radius: 7px ;     /* 圆角边框 */
    cursor: pointer;        /* 鼠标悬停时变成手指形状 */
    z-index: 4
}

/* 悬停效果 */
.confirm-button:hover {
    background-color: #0056b3; /* 悬停时按钮颜色 */
}
.rectangleall {
    position: absolute;
    left: 0px;     /* 矩形左上角的横坐标 */
    top: 0px;      /* 矩形左上角的纵坐标 */
    width: 375px;   /* 矩形的宽度 */
    height: 724px;   /* 矩形的高度 */
    background-color: #4F4F4F; 
    z-index: 5;
   opacity: 0.73;
}
.rectangleother {
    position: absolute;
    left: 80px;     /* 矩形左上角的横坐标 */
    top: 250px;      /* 矩形左上角的纵坐标 */
    width: 205px;   /* 矩形的宽度 */
    height: 142px;   /* 矩形的高度 */
    background-color: #fdc904; 
    border-radius: 36px;
    z-index: 5;
}
.rectangleother {
    position: absolute;
    left: 67px;     /* 矩形左上角的横坐标 */
    top: 252px;      /* 矩形左上角的纵坐标 */
    width: 225px;   /* 矩形的宽度 */
    height: 162px;   /* 矩形的高度 */
    background-color: #fdc904; 
    border-radius: 36px;
    z-index: 6;
}
.rectangleother2 {
    position: absolute;
    left: 45px;     /* 矩形左上角的横坐标 */
    top: 230px;      /* 矩形左上角的纵坐标 */
    width: 255px;   /* 矩形的宽度 */
    height: 192px;   /* 矩形的高度 */
    background-color: #ffffff; 
    border: 7px solid #3764dd;    /* 矩形的边框 */
    border-radius: 36px;
    z-index: 5;
}
.text3 {
    position: absolute;      /* 绝对定位 */
    left: 20px;             /* 距离左侧50px */
    top:0px;              /* 距离顶部50px */
    font-size: 25px;        /* 字号 */
    margin: 10px;           /* 边距 */
    line-height: 30px;      /* 行间距 */
    color: #3764dd;            /* 文本颜色 */
    font-weight: bold;
    padding: 10px;          /* 内边距 */
    z-index: 4;
    opacity: 0.9;
}
.confirm-button2 {
    width: 65px !important; /* 用于测试优先级问题 */
    height: 33px;
    left: 0px;             /* 距离左侧50px */
    top:120px;              /* 距离顶部50px */
    padding: 5px;      /* 内边距，控制按钮大小 */
    font-size: 16px;        /* 字号 */
    color: #101010;            /* 按钮文本颜色 */
    background-color: #ffffff; /* 按钮背景颜色 */
    border: 3px solid #bbbbbb;    /* 矩形的边框 */
    border-radius: 4px ;     /* 圆角边框 */
    cursor: pointer;        /* 鼠标悬停时变成手指形状 */
    z-index: 8;
    box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.5); /* 添加阴影 */
}

/* 悬停效果 */
.confirm-button2:hover {
    background-color: #0056b3; /* 悬停时按钮颜色 */
}