#root{ max-width: 640px; margin-left: auto; margin-right: auto; }

.step1{ background:#4a5c6a; }
.step1 .uk-panel{ padding:20px; }
.step1 .uk-panel .hd{ margin-bottom: 20px; }
.step1 .uk-panel .hd img{ max-height: 80px; }
.step1 .uk-input{ border:1px solid #a0abb4; background: none; color:#fff; }

.step2 .uk-panel{ padding:20px; }
.step2 .uk-panel .uk-wrap{ text-align: center; width:260px; margin-left: auto; margin-right: auto; border-radius: 5px; overflow: hidden; }
.step2 .uk-panel .uk-wrap .uk-form-custom{ display: block; background: #f4f8fe; padding:10px; }
.step2 .uk-panel .uk-wrap img{ width:100%; }
.step2 .uk-panel .uk-wrap .name{ background:#5581ff; color:#fff; padding:5px; }


.step3 .uk-panel .hd{ position: relative; border-bottom:1px solid #eee; margin-bottom: 15px; padding:10px 12px; font-size: 18px; }
.step3 .uk-panel .hd::before{ position: absolute; left: 0; top:50%; transform: translateY(-50%); content:''; display: block; width: 6px; height: 20px; background: #5581ff; }
.step3 .uk-panel .bd{ padding-left: 15px; }
.step3 .uk-panel .bd li{ border-bottom:1px solid #ebebeb;}
.step3 .uk-panel .bd li>div{ position: relative; padding:5px 10px 5px 100px; }
.step3 .uk-panel .bd li>div:nth-child(n+2){ border-top:1px solid #ebebeb; }
.step3 .uk-panel .bd li>div>div{ min-height: 40px;}
.step3 .uk-panel .bd li .tips{ display: block; background: #fef4f6; color: #f0506e;  padding:3px 8px; }
.step3 .uk-panel .bd li .label{ position: absolute; left: 0; top:9px; line-height: 1.2; }
.step3 .uk-panel .bd li .label em{ position: absolute; left: -10px; }
.step3 .uk-panel .bd li .uk-input{ border:1px solid #fff; background: none; color:#000; text-align: right; }
.step3 .uk-panel .bd li .avatar{ width:122px; height: 182px; border:1px solid #eee; }
.step3 .uk-panel .bd li .avatar img{ width:120px; height: 180px; display: block; object-fit: cover;}

.step3 .uk-panel .bd li .uk-select{ border:0; direction: rtl; }
.step3 .uk-panel .bd li .uk-input.layui-form-danger{ border-color:red; }
.step3 .uk-panel .bd li .uk-select.layui-form-danger{ border:1px solid red; }

.step3 .uk-panel .bd dl{ margin:0 0 0 -15px; }
.step3 .uk-panel .bd dl dt{ padding:5px 15px; margin:0; background:#5581ff20 }
.step3 .uk-panel .bd dl dd{ padding:10px 15px; }
.step3 .uk-panel .bd dl dd>div{ margin:5px 0; }
.step3 .uk-panel .bd dl dd .uk-input{ border:0; border-bottom:1px solid #ebebeb; background: none; padding:0; }
.step3 .uk-panel .bd dl dd .uk-input.layui-form-danger{ border-color:red; }
.step3 .uk-panel .bd dl dd .uk-select.layui-form-danger{ border-color:red; }
.step3 .uk-panel .bd dl dd .uk-select{ border:0; background-color: transparent; }
.step3 .uk-panel .bd dl dd:nth-child(even){ background: #fafafa; }


.insert{ height: 60px; }
.step3 .fd{ position: fixed; left: 0; bottom: 0; right: 0; }

#modal-success{ padding-left:90px; padding-right:90px; }
#modal-success .uk-modal-dialog{ margin-top:300px; }
#modal-success img{ max-width: 180px; margin-left: auto; margin-right: auto; }
/* #modal-success .uk-margin-auto-vertical{ bottom:100px!important; } */

.mask{ position: fixed; z-index: 9; inset: 0; background: #fafafa; }
.mask .bar{ padding:10px; background: #fff; position: absolute; left: 0; top:0; right: 0; }
.mask .bar a{ padding:10px; }
.mask .crumb{padding:5px 10px; background: #fff; border-bottom:1px solid #eee; }
.mask .uk-card{ margin-bottom: 10px; box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.05); border-radius: 5px; background: #fff; }
.mask .uk-card em{ font-style: normal; }
.mask .uk-card p{ border-bottom: 1px solid #ebebeb; padding: 5px 0;}
.mask .uk-card p:last-child{ border-bottom: 0;}
.mask .uk-card .bd>div.uk-flex{ padding:2px 0;}


.mask .tit{ position: relative; border-bottom:1px solid #eee; padding:5px 10px; font-size: 16px; }
.mask .tit::before{ position: absolute; left: 0; top:50%; transform: translateY(-50%); content:''; display: block; width: 6px; height: 20px; background: #5581ff; }
.mask .left{ width:120px; text-align: center; }
.mask .bd{ padding:15px; }

.mask .fotbar{ position: absolute; bottom:0; left: 0;  right: 0; height: 50px; line-height: 50px; background: #fff; box-shadow: 0 0 8px 5px rgba(0, 0, 0, 0.15); }
.mask .fotbar .first>div{ line-height: 40px; padding:5px 10px; }
.mask .fotbar .last{ width: 80px; }
.mask .fotbar .last .uk-button{ padding:0; width: 100%; height: 50px; line-height: 50px; display: block; }