* { padding: 0; margin: 0; box-sizing: border-box; } html, body { font-size: 16px; color: #000000; width: 100%; height: 100%; overflow: hidden; } html { background: 100% 100% no-repeat; background-size: 100% 100%; /* background-color: rgba(0, 0, 0, 0.1); */ } .hide { display: none !important; } .data-entry { display:none; width: 1450px; height: 680px; position: absolute; left: 50%; top: 50%; background-color: rgba(255, 255, 255, .8); border-radius: 10px; padding: 20px; transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } .title { width: 100%; text-align: center; font-size: 24px; font-weight: bold; margin-bottom: 40px; } .content { height: 440px; overflow-x: hidden; overflow-y: auto; } .footer { position: relative; height: 120px; } .el-form { display: flex; flex-wrap: wrap; justify-content: space-between; } .el-form-item__span { width: 180px; font-size: 14px; /* line-height: 35px; */ text-align: end; } .el-form-item__span > div { font-size: 16px; text-align: end; } .el-form-item { display: flex; flex: 1; margin-bottom: 15px; justify-content: space-between; } input { width: 160px; height: 35px; background-color: rgba(255, 255, 255, .4); border-radius: 2px; border: 1px solid; border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133)); /* border: 1px solid #eaeaea; */ } input:not([type='datetime-local']) { padding-left: 10px; } .button { text-align: center; font-size: 12px; } .submit { margin-top: 15px; width: 80px; font-size: 16px; cursor: pointer; } canvas { background-color: rgba(255, 255, 255, .5); border: 1px solid #ccc; border-radius: 5px; } .el-input__inner::-webkit-outer-spin-button, .el-input__inner::-webkit-inner-spin-button { -webkit-appearance: none } input[type="number"] { -moz-appearance: textfield; } .bottom-right { position: absolute; right: 40px; bottom: 15px; cursor: pointer; font-size: 14px; text-align: center; color: #333; } .bottom-right span:first-of-type { letter-spacing: 2px; font-size: 16px; } .bottom-right span:last-of-type { font-size: 14px; font-weight: bold; text-decoration: underline; } .bottom-left { position: absolute; left: 40px; bottom: 15px; font-size: 14px; } .bottom-left span { line-height: 25px; font-size: 14px; font-weight: bold; } .bottom-left span:first-of-type { font-size: 16px; } .shade { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .8); } .formfilling-explanation { width: 1000px; height: 600px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); background-color: rgba(255, 255, 255, .8); padding: 20px; padding-left: 40px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 1); font-size: 18px; line-height: 30px; } .fe-title { width: 100%; font-size: 20px; font-weight: bold; text-align: center; margin-bottom: 10px; } .input-flex { width: 160px; display: flex; justify-content: space-between; align-items: center; } .btn-add-cargo { padding: 5px 20px; } .btn-del-cargo { position: absolute; right: -10px; top: -10px; width: 20px; height: 20px; font-size: 16px; line-height: 20px; border-radius: 50%; background: #ff8181; text-align: center; outline: none; border: none; color: white; } .btn-del-cargo:hover { background: orange; } .cargo:not(:empty) { padding: 10px 10px; border-top: 1px solid lightgray; counter-reset: flag; } .cargo-form { position: relative; } .cargo-form:before { content: counter(flag); counter-increment: flag; border-radius: 100%; width: 20px; height: 20px; font-size: 0.9em; line-height: 20px; text-align: center; margin: 8px 0; position: absolute; top: -10px; left: 0; background: white; box-shadow: 0 0 0 1px #ccc; font-weight: bold; } .cargo-form:first-child .btn-del-cargo { display: none; } .declare { padding-top: 50px; font: 24px bold; display: none; text-align: center; }