.invalid-message {
    position: absolute;
}
.invalid-message .arrow {
    position: relative; width: 25px; margin-left: 15px; padding-bottom: 17.68px; overflow: hidden;
}
.invalid-message .arrow div {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; border: 1px solid #999; transform: rotate(45deg); transform-origin: 0 100%; z-index: 1;
}
.invalid-message .content-wrap {
    display: inline-block; padding: 10px; border: 1px solid #999; margin-top: -1px; background-color: #fff; border-radius: 3px;
}
.invalid-message .content-wrap i {
    color: red;
}
.invalid-message .content-wrap .content {
    margin-left: 5px; font-size: 0.9rem; font-weight: 500;
}
.loading-wrap {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); z-index: 9999;
}
.loading-wrap div {
    position: absolute; top: calc(50% - 25px); left: calc(50% - 25px); width: 50px; height: 50px; text-align: center; background-color: #fff; border-radius: 15px;
}
.loading-wrap div i {
    display: block; margin-top: 10px; font-size: 30px;
}
.alert-wrap {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); z-index: 9999;
}
.alert-wrap > div {
    position: absolute; top: 150px; left: calc(50% - 175px); width: 350px; text-align: center; background-color: #fff; border-top: 30px solid #1d81e1; border-radius: 10px;
}
.alert-wrap .msg {
    padding: 40px 20px 30px; line-height: 20px;
}
.alert-wrap .btn-wrap {
    margin: 0 20px 20px;
}
.alert-wrap .btn-wrap .button {
    padding: 10px 15px; border-radius: 5px;
}


/*        레이어 팝업 공통     */
.layer-popup {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1050; overflow: auto; background-color: rgba(0, 0, 0, 0.3);
}
.layer-popup .inner {
    position: relative; max-width: 500px; margin: 100px auto 50px; padding: 20px; background-color: #fff;
}
.layer-popup .inner.large {
    max-width: 900px;
}
.layer-popup .inner .title {
    margin-top: 0;
}
.layer-popup .popup-close {
    position: absolute; top: 15px; right: 25px; font-size: 1.5rem; cursor: pointer;
}
.layer-popup .popup-header {
    margin-bottom: 20px; font-size: 1.2rem;
}
.layer-popup .popup-content {
    max-height: calc(100vh - 350px); overflow-y: auto;
}
.layer-popup .popup-footer {
    margin-top: 20px; text-align: right;
}

.popup.on {
    display: block !important;
}


.upload-file-wrap {
    position: relative;
}
.upload-file-wrap .input-file {
    display: none;
}
.upload-file-wrap .filename {
    display: inline-block; width: 100%; padding: 10px 20px; font-size: 15px; line-height: 15px; color: #333; border: none; border-bottom: 1px solid #ccc;
}
.upload-file-wrap .btn-upload-file {
    position: absolute; top: 5px; right: 10px;
}
.upload-file-wrap .btn-del-file-wrap {
    position: absolute; top: 7px; left: -7px; font-size: 1.2rem; color: #0059a6;
}


.ui-datepicker {
    display: none; padding: 10px; background-color: #fff; border: 1px solid #ddd; border-radius: 10px;
}
.ui-datepicker-header {
    padding: 10px 0;
}
.ui-datepicker-title {
    text-align: center;
}
.ui-datepicker-title .ui-datepicker-month, .ui-datepicker-title .ui-datepicker-year {
    padding: 5px; margin: 0 5px; border-radius: 5px;
}
.ui-datepicker-prev {
    float: left; margin-top: 7px;
}
.ui-datepicker-next {
    float: right; margin-top: 7px;
}
.ui-datepicker-prev span, .ui-datepicker-next span {
    display: block; text-indent: -9999px; overflow: hidden; cursor: pointer;
}
.ui-datepicker-prev span {
    width: 10px; height: 17px; background-image: url('/images/left-arrow.png');
}
.ui-datepicker-next span {
    width: 10px; height: 17px; background-image: url('/images/right-arrow.png');
}
.ui-datepicker-today {
    font-weight: bold;
}
.ui-datepicker-current-day {
    background-color: #0059a6;
}
.ui-datepicker-current-day a {
    color: #fff;
}