/* job application form */
body {
    background-color:#e9e9e9 !important;
}
.page-job-application{padding-top: calc(64px + 3rem); padding-bottom: 3rem;}
.hr-register{margin-left: auto !important; margin-right: auto !important;}

.form-list{width: calc(100%); }
.form-block{background-color: #fff; padding: 30px; border-radius: 4px; box-shadow: 0 1px 1px rgb(0 0 0 / 5%); margin-bottom: 20px;}
.form-block .title{margin-bottom: 5px;}
.form-block .form-line{margin-bottom: 15px;}

.profile{display: flex;}
.profile .photo{display: flex; width: 180px; flex-direction: column; margin-right: 20px;}
.profile .photo .image{display: flex; width: 180px; height: 180px; border: 1px solid #ddd; background: url(../img/img-loto-hr.png) no-repeat 50% 50%; background-size: 80%; background-color: #e9e9e9;}
.profile .photo .image img{width: 100%; object-fit: cover;}
.profile .photo .add-photo{margin-top: 10px; position: relative;}
.profile .photo .add-photo input[type=file]{position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; border: 1px solid #f00; cursor: pointer; z-index: 10;}
.profile .photo .add-photo button{text-align: center; width: 100%; height: 30px;}
.profile .profile-list{flex: 1;}
.profile .profile-list p.no-save{color: #3700ff;}

.page-job-application input[type=text],
.page-job-application select
{
    font-size: 0.8rem;
}
.page-job-application i.fa {margin-right: 5px;}

.form-title{display: flex; justify-content: space-between;}
.form-block .form{background-color: #fbfbfb; padding: 20px; margin-top: 20px; position: relative;}
.editor-block{margin-top: 20px; border: 1px solid #ddd;}

.result-list .result{ border-bottom: 1px solid #e9e9e9; margin-top: 30px; padding-bottom: 20px;}
.result-list .result .date{font-size: 0.8rem; color: #3700ff; font-weight: 500;}
.result-list .result .edu{display: flex; align-items: center; justify-content: space-between;}
.result-list .result .edu li{ color: #555;}
.result-list .result .edu li:nth-child(1) b{font-size: 1.2rem; margin-right: 20px;}
.result-list .result .edu li:nth-child(2){margin-left: 100px;}
.result-list .editor-result{background-color: #eee; padding: 20px; margin-top: 20px; }

.form-block .total-career{border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 10px; margin-top: 20px;}
.form-block .total-career span{color: #3700ff;}

.chart-result {border-bottom: 1px solid #eee; }
.chart-result .result-con{display: flex; padding: 30px 50px 20px 50px; align-items: center;}
.chart-result .title{border-right: 1px solid #ccc; margin: 0; padding-right: 10px;}
.chart-result .chart{margin: 0 40px;}
.chart-result .chart .chart-wrap{width: 300px; height: 8px; background-color: #eee; position: relative;}
.chart-result .chart .progress-dot{position: absolute;
    top: 3px;
    width: 3px;
    background-color: #333;
    height: 3px;
    border-radius: 50%;}
.chart-result .chart .chart-bar{background-color:#3700ff; height: 100%; position: absolute;}
.page-job-application .hr-mobile{display: flex; justify-content: center; align-items: center; height:calc( 100vh - 228px - 64px); display: none;}
@media (max-width: 767.98px) { /* sm */
   .page-job-application .hr-register{display: none;}
    .page-job-application .hr-mobile{display:flex;}
}

.form-info{position: absolute; right: 20px; top: 20px;}
.form-info .guide button{font-size: 0.8rem; display: flex; align-items: center;}

.editor-info{border: 1px solid #ddd; border-top: none; padding: 15px 20px; background-color: #f5f5f5;}
.editor-info dl{ font-size: 0.8rem;}
.editor-info dl dt{font-weight: 400; margin-bottom:5px;}
.editor-info dl dd ul{list-style-type: square; margin-left: 15px;}

.page-job-application.hr-view{padding-top: 0;}
.page-job-application.hr-view .hr-register{margin-top: 0; width: 1140px;}
.page-job-application.hr-view .hr-register .add-photo{display: none;}
.page-job-application.hr-view .hr-register .type-text{display: none;}
.page-job-application.hr-view .hr-register .form-list{width: 100%;}
.page-job-application.hr-view .form-block .form-title button{display: none;}
.page-job-application.hr-view .form-block .form{display: none;}
.page-job-application.hr-view .form-block input{pointer-events: none;}
.page-job-application.hr-view .form-block input[type=radio]{pointer-events: none;}
.page-job-application.hr-view .form-block select{pointer-events: none;}
@media (max-width: 767.98px) { /* sm */
   .page-job-application.hr-view .hr-register{display:block;}
}

.alert-msg{position: fixed; z-index: 10; text-align: center; display: flex; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.3); align-items: center; justify-content: center; display: none; pointer-events: none;}
.alert-msg .alert-con{border: 1px solid #ccc; background-color: #fff; padding: 30px; box-shadow: 0 0 10px rgba(0,0,0,.4); border-radius:5px;}
.alert-msg p:last-of-type{text-align: center; margin-top: 30px; }

.alert-msg.show{display: flex; pointer-events: auto;}

.caution{font-size: 0.8rem; color:#3700ff; margin-top: 5px;}