/*
* LeePaTimepicker
* ver : 0.1v
* author : Lee Pa
* jquery, xeiocn 필수
*/

.formArea > .itemArea.on .lp_timePicker{display:flex; border:1px solid #ddd; width:120px; padding:0 10px; height: 40px; gap:10px; position: relative; box-sizing: border-box;}
.formArea > .itemArea.on .lp_timePicker > input{border: 0px; padding:0px; width:calc(100% - 30px);}
.formArea > .itemArea.on .lp_timePicker > input:hover,
.formArea > .itemArea.on .lp_timePicker > input:focus,
.formArea > .itemArea.on .lp_timePicker > input:active{border: 0px;}
.formArea > .itemArea.on .lp_timePicker::after{content: "\ea1f"; font-family:"xeicon"; color:#111; font-size:20px; width:20px; display: flex; align-items: center; justify-content: center;}

.formArea > .itemArea.on .lp_timePicker > .timePickBox.on{display:inline-block;}
.formArea > .itemArea.on .lp_timePicker > .timePickBox{position:fixed; margin-top:45px; display: none; background:#eeeeef; border-radius: 5px; padding:10px; border:1px solid #ddd; width: max-content; box-shadow:1px 1px 5px 0px rgba(0,0,0,0.2); z-index:10;}
.formArea > .itemArea.on .lp_timePicker > .timePickBox > .pickWrap{display:flex; gap: 10px;}
.formArea > .itemArea.on .lp_timePicker > .timePickBox > .pickWrap > div{background:#fff; border:1px solid #ddd; height: 152px; box-sizing: border-box; flex-shrink: 0;}
.formArea > .itemArea.on .lp_timePicker > .timePickBox > .pickWrap > div.h {width: 100px;}
.formArea > .itemArea.on .lp_timePicker > .timePickBox > .pickWrap > div > ul{display:flex; flex-direction: column; flex-wrap: wrap; height: 100%; margin-right: -1px;}
.formArea > .itemArea.on .lp_timePicker > .timePickBox > .pickWrap > div > ul > li{font-size:13px; padding: 0 15px; height: 25px; text-align: center; font-weight: 400; cursor: pointer; border-right: 1px solid #ddd; display: flex; justify-content: center; align-items: center; box-sizing:border-box;}
.formArea > .itemArea.on .lp_timePicker > .timePickBox > .pickWrap > div > ul > li.pick{background:#404d5e; color:#fff;}
.formArea > .itemArea.on .lp_timePicker > .timePickBox > .pickWrap > div.type > ul > li{height:calc(100% / 2);}
.formArea > .itemArea.on .lp_timePicker > .timePickBox > .pickWrap > div.type > ul > li + li{border-top:1px solid #ddd;}

.formArea > .itemArea.on .lp_timePicker > .timePickBox > .pickBtn{border-radius: 4px; font-size: 13px; background:#404d5e; color:#fff; border:1px solid #ddd; padding: 0 12px; height: 32px; line-height: 32px; cursor:pointer; margin-top:10px;}
.formArea > .itemArea.on .lp_timePicker > .timePickBox > .timeCloseBtn{border-radius: 4px; font-size: 13px; background:#fff; color:#111; border:1px solid #ddd; padding: 0 12px; height: 32px; line-height: 32px; cursor:pointer; margin-top:10px;}


.formArea > .itemArea.late.on > .lp_timePicker > .timePickBox.on{left: 25px;}
.formArea > .itemArea.absent.on .lp_timePicker > .timePickBox.on{left: 85px;}