body {
  background: #608bba; /* Fallback for older browsers */
  background: -webkit-linear-gradient(to right, #7ca8f5, #cbd5e0); /* For Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #93b1e4, #cbd5e0); /* Standard syntax，从深灰蓝到浅灰 */
  background-attachment: fixed; /* 确保背景固定，内容滚动 */
  font-family: 'Roboto', sans-serif; /* 推荐使用现代字体 */
}




#data_table {
    font-size: 16px;
}

.truncate-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.expanded-text {
    max-width: none;
}


input[type="file"] {
    margin-bottom: 20px;
    padding: 10px;
    width: 50%;
    box-sizing: border-box;
}

/* input[type="text"] {
    margin-bottom: 10px;
    padding: 10px;
    width: 70%;
    box-sizing: border-box;
    font-size: larger;
} */
.group {
    position: relative;
    margin-bottom: 45px;
  }
  input {
    font-size: 18px;
    padding: 10px 10px 10px 5px;
    display: block;
    width: 300px;
    border: none;
    border-bottom: 1px solid #757575;
  }
  input:focus {
    outline: none;
  }
  
  /* LABEL ======================================= */
 .input {
    color: #999;
    font-size: 18px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 5px;
    top: 10px;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
    border-radius: 6%;
  }
  
  /* active state */
  input:focus ~ label,
  input:valid ~ label {
    top: -20px;
    font-size: 18px;
    color: #5264ae;
  }
  
  /* BOTTOM BARS ================================= */
  .bar {
    position: relative;
    display: block;
    width: 300px;
  }
  .bar:before,
  .bar:after {
    content: "";
    height: 2px;
    width: 0;
    bottom: 1px;
    position: absolute;
    background: #5264ae;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
  }
  .bar:before {
    left: 50%;
  }
  .bar:after {
    right: 50%;
  }
  
  /* active state */
  input:focus ~ .bar:before,
  input:focus ~ .bar:after {
    width: 50%;
  }
  
  /* HIGHLIGHTER ================================== */
  .highlight {
    position: absolute;
    height: 60%;
    width: 100px;
    top: 25%;
    left: 0;
    pointer-events: none;
    opacity: 0.5;
  }
  
  /* active state */
  input:focus ~ .highlight {
    -webkit-animation: inputHighlighter 0.3s ease;
    -moz-animation: inputHighlighter 0.3s ease;
    animation: inputHighlighter 0.3s ease;
  }
  
  /* ANIMATIONS ================ */
  @-webkit-keyframes inputHighlighter {
    from {
      background: #5264ae;
    }
    to {
      width: 0;
      background: transparent;
    }
  }
  @-moz-keyframes inputHighlighter {
    from {
      background: #5264ae;
    }
    to {
      width: 0;
      background: transparent;
    }
  }
  @keyframes inputHighlighter {
    from {
      background: #5264ae;
    }
    to {
      width: 0;
      background: transparent;
    }
  }
  
label{
    margin-bottom: 4%;
    color:dimgray;
    padding: 2px;
    border-radius: 10%;
}
select{
    font-size: 22px;
}
h2 {
    text-align: center;

}

.back-button ,
.submit,
.login-button {
    background-color:orange;
    border: none;
    color: white;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center; /* Center the content vertically */
    justify-content: center; /* Center the content horizontally */
    font-size: 18px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 5px;
}
.login-button {
    background-color:lightgray;
}
.back-button {
    background-color:cadetblue;
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
}
.login-button:hover {
    box-shadow: 0 0 10px rgb(253, 232, 163);
    font-size: 19px;
}

.submit:hover {
    box-shadow: 0 0 10px rgb(253, 232, 163);
    font-size: 17px;
}
.back-button:hover {
    box-shadow: 0 0 10px rgb(253, 232, 163);
    font-size: 17px;
}

h1 {
    text-align: center;
}

#title {
    width: 30%;
}

#data-list-container {
    background-color: #f4d499d7;
    border-radius: 4%;
    padding: 30px;
    margin-left: 50px;
    margin-top: 200px;
    padding-left: 10px;
}

/* Add some basic styling for the draggable columns */
.draggable-columns {
    display: flex;
    width: 450px;
    flex-direction: column;
    gap: 3px;

}

.draggable {
    cursor: move;
    padding: 10px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
}

.sortable-ghost {
    background-color: #e0e0e0;
}

#column-list {
    max-height: 400px;
    overflow-y: auto;

    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 添加阴影 */
    padding: 2px; /* 内边距 */
    margin: 10px 0; /* 外边距 */
    font-size: 1.1em; /* 调整字体大小 */
    border-radius: 5%;
}

/* 自定义滚动条样式 */
#column-list::-webkit-scrollbar {
    width: 4px;
    height: 3%;
}

#column-list::-webkit-scrollbar-track {
    background: #f1f1f1;
}
#control-variables {
    background-color: transparent;
    text-align: center;
    border: 4px solid transparent;
    padding: 60px;
    border-radius: 8px;
    margin: 15px;
    margin-right: auto;
    margin-top: 7%;
    /* box-shadow: 0 0 10px rgba(68, 193, 255, 0.5); */
}

#column{
    background-color: transparent;
    text-align: center;
    border: 4px solid transparent;
    padding: 40px;
    border-radius: 8px;
    margin: 10px;
    /* box-shadow: 0 0 10px rgba(68, 193, 255, 0.5); */
}
        /* 新增的上一頁按鈕樣式 */

.draggable {
            cursor: pointer;
        }
        .simulated-prompt {
            position: fixed;
            top: 12%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            padding: 20px;
            border: 1px solid #ccc;
            z-index: 9999;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加陰影效果 */
        }
        
        .simulated-prompt p {
            font-size: 16px;
            margin-bottom: 15px;
        }
        
        .simulated-prompt button {
            padding: 10px 15px;
            margin-right: 10px;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease; /* 添加 hover 過渡效果 */
        }
        
        
        .simulated-prompt button:hover {
            background-color: #e04b0c; /* hover 效果 */
        }
        .red-background {
            background-color: red;
            color: white; /* 可选，如果您想要白色文字 */
            padding: 2px; /* 可选，为文本添加一些内边距 */
        }
        
        #container {
            background-color: #9ac5e9;
            padding-bottom: 2px;
            border-radius: 4%;
            height: 80%; /* 使用百分比代替固定像素值 */
            width: 65%;  /* 使用百分比代替固定像素值 */
            position: fixed;
            top: 5%;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            min-height: 700px; /* 设置一个最小高度 */
            min-width: 500px;  /* 设置一个最小宽度 */
        }
        :root {
            --background: linear-gradient(30deg, #f39c12 30%, #f1c40f);
;
        }
        
        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }
        

          /* Reset <select> defaults */
        select {
            text-align: center;
            border: 0;
            outline: 0;
            background: none;
            color: inherit;
            box-shadow: none;
        }
        select::-ms-expand {
            display: none;
        }
          /* Custom Select wrapper */
          .select {
            position: relative;
            display: flex;
            width: min(20rem, 70vw);
            background: var(--background-select);
            border-radius: 0.25rem;
            overflow: hidden;
        }
        
        .select select {
            flex: 1;
            padding: 10px;
            cursor: pointer;
            border: none; /* 移除邊框 */
            background: transparent; /* 背景透明 */
            color: black; /* 文字顏色 */
            -webkit-appearance: none; /* Chrome, Safari, 和新版的 Opera */
            -moz-appearance: none; /* Firefox */
            appearance: none; /* 標準語法 */
        }
        
        .select::after {
            content: "\25BC";
            position: absolute;
            right: 1rem;
            top: 1rem;
            transition: 0.25s all ease;
            pointer-events: none; /* IMPORTANT to click on arrow */
            color: white; /* 箭頭顏色 */
        }
        
        .select:hover::after {
            color: #f3d912; /* 鼠標懸停時的顏色 */
            animation: bounce 1s infinite; /* 添加跳動動畫 */
        }
        
        @keyframes bounce {
            0%, 100% {
                transform: translateY(0);
            }
            70% {
                transform: translateY(6px);
            }
        }