/*@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');*/
.html, body {
    margin: 0;
    padding: 0;
}

.login-container {
    width: 70vw;
    height: 60vh;
    display: grid;
    grid-template-columns: 100%;
    grid-template-areas: "login";
    box-shadow: 0 0 17px 10px rgb(0 0 0 / 30%);
    border-radius: 20px;
    background: white;
    overflow: hidden;
    background: linear-gradient(to bottom right, #ff966d, #fa538d, #89379c);
}

.login-design {
    grid-area: design;
    display: none;
    position: relative;
}

.rotate-45 {
    transform: rotate(-45deg);
}

.login-design .pill-1 {
    bottom: 0;
    left: -40px;
    position: absolute;
    width: 80px;
    height: 200px;
    background: linear-gradient(#ff966d, #fa538d, #89379c);
    border-radius: 40px;
}

.login-design .pill-2 {
    top: -100px;
    left: -80px;
    position: absolute;
    height: 450px;
    width: 220px;
    background: linear-gradient(#ff966d, #fa538d, #89379c);
    border-radius: 200px;
    border: 30px solid #e2c5e2;
}

.login-design .pill-3 {
    top: -100px;
    left: 160px;
    position: absolute;
    height: 200px;
    width: 100px;
    background: linear-gradient(#ff966d, #fa538d, #89379c);
    border-radius: 70px;
}

.login-design .pill-4 {
    bottom: -180px;
    left: 220px;
    position: absolute;
    height: 300px;
    width: 120px;
    background: linear-gradient(#ff966d, #fa538d);
    border-radius: 70px;
}

.login-section {
    grid-area: login;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    background: white;
}

.login-section h3.title {
    margin: 15px 0;
}

.login-text-input {
    background: #e6e6e6;
    height: 40px;
    display: flex;
    width: 60%;
    min-width: 174px;
    align-items: center;
    border-radius: 10px;
    padding: 0 15px;
    margin: 5px 0;
}

.login-text-input input {
    background: none;
    border: none;
    outline: none;
    width: 100%;
    height: 100%;
    margin-left: 10px;
}

.login-text-input i {
    color: #686868;
}

::placeholder {
    color: #9a9a9a;
}

.login-btn {
    width: 60%;
    /*max-width: 200px;*/
    padding: 10px;
    color: white;
    background: linear-gradient(to right, #ff966d, #fa538d, #89379c);
    border: none;
    border-radius: 20px;
    cursor: pointer;
    /*margin-top: 10px;*/
    margin: 0 auto;
}

/*a {*/
/*    font-size: 18px;*/
/*    color: #9a9a9a;*/
/*    cursor: pointer;*/
/*    user-select: none;*/
/*    text-decoration: none;*/
/*}*/

/*a.forgot {*/
/*    margin-top: 15px;*/
/*}*/

.create {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 30px;
}

.create i {
    color: #9a9a9a;
    margin-left: 10px;
}

@media (min-width: 768px) {
    .login-container {
        grid-template-columns: 50% 50%;
        grid-template-areas: "design login";
    }

    .login-design {
        display: block;
    }
}

/* 基本按钮样式 */
.custom-button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  background-color: #3498db;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 悬停时的样式 */
.custom-button:hover {
  background-color: #2980b9;
}

/* 按下时的样式 */
.custom-button:active {
  background-color: #1f67a8;
}

/* 禁用状态的样式 */
.custom-button.disabled {
  background-color: #bdc3c7;
  cursor: not-allowed;
}

.vertical_horizontal_center {
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中（如果也需要） */
    /*height: 100px; !* 或任何所需高度 *!*/
}

.parent_page_content {
    margin-left: 18rem;
    margin-right: 2rem;
    margin-bottom: 2rem;
    padding: 2rem 1rem;
    /*height: 100vh;*/
}

/* 可以根据需要设置其他样式，比如阴影、边框等 */