@charset "utf-8";

.hand {
    cursor:pointer;
}
.hidden-row {
    display:none;
}
.move:hover {
    cursor: ns-resize;
}

.text-center {
    text-align:center;
}
.text-start {
    text-align: left!important;
}
.text-end {
    text-align: right!important;
}
.justify-content-center {
    justify-content: center;
}

.relative {
    position:relative;
}

.ms-auto {
    margin-left: auto!important;
}

.d-inline-block {
    display: inline-block!important;
}

.fw-bold {
    font-weight:800!important;
}

.pt-0 {
    padding-top: 0!important;
}
.pe-0 {
    padding-right: 0!important;
}
.pb-0 {
    padding-bottom: 0!important;
}
.ps-0 {
    padding-left: 0!important;
}
.img-fluid {
    max-width: 100%;
    height: auto;
}

/* 시작 : textarea의 글자수 제한 걸 떄 사용*/
.max-text-container {
    position:relative;
}
.max-text-display {
    position: absolute;
    right: -2px;
    bottom: 5px;
    padding: 5px 10px 4px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background:rgba(45, 53, 60, 0.075);
}
.max-text-display > span {
    font-weight:800;
}
/* 끝 : textarea의 글자수 제한 걸 떄 사용 */

.textarea {
    width: calc(100% - 20px);
    /*width:100%;*/
    background-color: var(--white);
    border: 1px solid var(--box-border);
    border-radius: 5px;
    /*resize: none;*/
    padding: 10px;
    /*margin-bottom: 10px;*/
}

.btn:not(a) {
    /*display: inline-block;*/
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    /*margin-right:5px;*/
}
@media (prefers-reduced-motion:reduce) {
    .btn {
        transition: none;
    }
}
.btn-sm {
    padding:var(--spacing-2) var(--spacing-5);
}

.btn-line-gray {
    color:#222222;
    background:#ffffff;
    border: 1px solid #d3d6d8;
    outline-color: transparent;
}
.btn-line-gray:hover {
    background: #f0f0f0;
    outline-color: transparent;
}
.btn-line-gray:active {
    background: #ddd;
}
.btn-line-gray:focus-visible {
    outline: 3px dashed var(--gray-scale-100);
}
.table .with-input {
    padding:3px 8px!important;
}

/*.nav-btn {
     display: none!important;
} */

.btn-reply {
    width: 28px;
    height: 28px;
    padding: 0;
    line-height: 28px;
    text-align: center;
    border-radius: 28px;
}

.divCnt {
    padding: 50px 20px 60px;
    border-bottom: 1px solid var(--box-border);
}

/* 댓글용 버튼 위치 재 조정 */
.reply-controls {
    top: 20px;
}

.ori-reply {
    background-color: #fff;
    border: 1px solid #e7eaec;
    text-align: left;
    padding: 10px;
    position: relative;
    border-radius: 4px;
    margin-bottom:5px;
}
.ori-reply .ori-reply-writer {
    margin-bottom:5px;
}
.ori-reply .ori-reply-writer .reply-date{
    margin-left:5px;
}

.d-block {
    display: block!important;
}

.answer-container {
    border:1px solid #eee;
    border-radius: 4px;
    background:#fefefe;
    padding:15px;
}

.border-0 {
    border: 0!important;
}
.border-top-0 {
    border-top: 0!important;
}
.border-end-0 {
    border-right: 0!important;
}
.border-bottom-0 {
    border-bottom: 0!important;
}
.border-start-0 {
    border-left: 0!important;
}

.m-1px {
    margin: 1px!important;
}
.m-2px {
    margin: 2px!important;
}
.m-3px {
    margin: 3px!important;
}
.m-4px {
    margin: 4px!important;
}
.m-5px {
    margin: 5px!important;
}
.m-6px {
    margin: 6px!important;
}
.m-7px {
    margin: 7px!important;
}
.m-8px {
    margin: 8px!important;
}
.m-9px {
    margin: 9px!important;
}
.m-10px {
    margin: 10px!important;
}
.m-5px {
    margin: 5px!important;
}
.m-10px {
    margin: 10px!important;
}
.m-15px {
    margin: 15px!important;
}
.m-20px {
    margin: 20px!important;
}
.m-25px {
    margin: 25px!important;
}
.m-30px {
    margin: 30px!important;
}
.m-35px {
    margin: 35px!important;
}
.m-40px {
    margin: 40px!important;
}
.m-45px {
    margin: 45px!important;
}
.m-50px {
    margin: 50px!important;
}
.mt-1px {
    margin-top: 1px!important;
}
.mt-2px {
    margin-top: 2px!important;
}
.mt-3px {
    margin-top: 3px!important;
}
.mt-4px {
    margin-top: 4px!important;
}
.mt-5px {
    margin-top: 5px!important;
}
.mt-6px {
    margin-top: 6px!important;
}
.mt-7px {
    margin-top: 7px!important;
}
.mt-8px {
    margin-top: 8px!important;
}
.mt-9px {
    margin-top: 9px!important;
}
.mt-10px {
    margin-top: 10px!important;
}
.mt-5px {
    margin-top: 5px!important;
}
.mt-10px {
    margin-top: 10px!important;
}
.mt-15px {
    margin-top: 15px!important;
}
.mt-20px {
    margin-top: 20px!important;
}
.mt-25px {
    margin-top: 25px!important;
}
.mt-30px {
    margin-top: 30px!important;
}
.mt-35px {
    margin-top: 35px!important;
}
.mt-37px {
    margin-top: 37px!important;
}
.mt-40px {
    margin-top: 40px!important;
}
.mt-45px {
    margin-top: 45px!important;
}
.mt-50px {
    margin-top: 50px!important;
}
.me-1px {
    margin-right: 1px!important;
}
.me-2px {
    margin-right: 2px!important;
}
.me-3px {
    margin-right: 3px!important;
}
.me-4px {
    margin-right: 4px!important;
}
.me-5px {
    margin-right: 5px!important;
}
.me-6px {
    margin-right: 6px!important;
}
.me-7px {
    margin-right: 7px!important;
}
.me-8px {
    margin-right: 8px!important;
}
.me-9px {
    margin-right: 9px!important;
}
.me-10px {
    margin-right: 10px!important;
}
.me-5px {
    margin-right: 5px!important;
}
.me-10px {
    margin-right: 10px!important;
}
.me-15px {
    margin-right: 15px!important;
}
.me-20px {
    margin-right: 20px!important;
}
.me-25px {
    margin-right: 25px!important;
}
.me-30px {
    margin-right: 30px!important;
}
.me-35px {
    margin-right: 35px!important;
}
.me-40px {
    margin-right: 40px!important;
}
.me-45px {
    margin-right: 45px!important;
}
.me-50px {
    margin-right: 50px!important;
}
.mb-1px {
    margin-bottom: 1px!important;
}
.mb-2px {
    margin-bottom: 2px!important;
}
.mb-3px {
    margin-bottom: 3px!important;
}
.mb-4px {
    margin-bottom: 4px!important;
}
.mb-5px {
    margin-bottom: 5px!important;
}
.mb-6px {
    margin-bottom: 6px!important;
}
.mb-7px {
    margin-bottom: 7px!important;
}
.mb-8px {
    margin-bottom: 8px!important;
}
.mb-9px {
    margin-bottom: 9px!important;
}
.mb-10px {
    margin-bottom: 10px!important;
}
.mb-5px {
    margin-bottom: 5px!important;
}
.mb-10px {
    margin-bottom: 10px!important;
}
.mb-15px {
    margin-bottom: 15px!important;
}
.mb-20px {
    margin-bottom: 20px!important;
}
.mb-25px {
    margin-bottom: 25px!important;
}
.mb-30px {
    margin-bottom: 30px!important;
}
.mb-35px {
    margin-bottom: 35px!important;
}
.mb-40px {
    margin-bottom: 40px!important;
}
.mb-45px {
    margin-bottom: 45px!important;
}
.mb-50px {
    margin-bottom: 50px!important;
}
.ms-1px {
    margin-left: 1px!important;
}
.ms-2px {
    margin-left: 2px!important;
}
.ms-3px {
    margin-left: 3px!important;
}
.ms-4px {
    margin-left: 4px!important;
}
.ms-5px {
    margin-left: 5px!important;
}
.ms-6px {
    margin-left: 6px!important;
}
.ms-7px {
    margin-left: 7px!important;
}
.ms-8px {
    margin-left: 8px!important;
}
.ms-9px {
    margin-left: 9px!important;
}
.ms-10px {
    margin-left: 10px!important;
}
.ms-5px {
    margin-left: 5px!important;
}
.ms-10px {
    margin-left: 10px!important;
}
.ms-15px {
    margin-left: 15px!important;
}
.ms-20px {
    margin-left: 20px!important;
}
.ms-25px {
    margin-left: 25px!important;
}
.ms-30px {
    margin-left: 30px!important;
}
.ms-35px {
    margin-left: 35px!important;
}
.ms-40px {
    margin-left: 40px!important;
}
.ms-45px {
    margin-left: 45px!important;
}
.ms-50px {
    margin-left: 50px!important;
}
.mx-1px {
    margin-left: 1px!important;
    margin-right: 1px!important;
}
.mx-2px {
    margin-left: 2px!important;
    margin-right: 2px!important;
}
.mx-3px {
    margin-left: 3px!important;
    margin-right: 3px!important;
}
.mx-4px {
    margin-left: 4px!important;
    margin-right: 4px!important;
}
.mx-5px {
    margin-left: 5px!important;
    margin-right: 5px!important;
}
.mx-6px {
    margin-left: 6px!important;
    margin-right: 6px!important;
}
.mx-7px {
    margin-left: 7px!important;
    margin-right: 7px!important;
}
.mx-8px {
    margin-left: 8px!important;
    margin-right: 8px!important;
}
.mx-9px {
    margin-left: 9px!important;
    margin-right: 9px!important;
}
.mx-10px {
    margin-left: 10px!important;
    margin-right: 10px!important;
}
.mx-5px {
    margin-left: 5px!important;
    margin-right: 5px!important;
}
.mx-10px {
    margin-left: 10px!important;
    margin-right: 10px!important;
}
.mx-15px {
    margin-left: 15px!important;
    margin-right: 15px!important;
}
.mx-20px {
    margin-left: 20px!important;
    margin-right: 20px!important;
}
.mx-25px {
    margin-left: 25px!important;
    margin-right: 25px!important;
}
.mx-30px {
    margin-left: 30px!important;
    margin-right: 30px!important;
}
.mx-35px {
    margin-left: 35px!important;
    margin-right: 35px!important;
}
.mx-40px {
    margin-left: 40px!important;
    margin-right: 40px!important;
}
.mx-45px {
    margin-left: 45px!important;
    margin-right: 45px!important;
}
.mx-50px {
    margin-left: 50px!important;
    margin-right: 50px!important;
}
.my-1px {
    margin-top: 1px!important;
    margin-bottom: 1px!important;
}
.my-2px {
    margin-top: 2px!important;
    margin-bottom: 2px!important;
}
.my-3px {
    margin-top: 3px!important;
    margin-bottom: 3px!important;
}
.my-4px {
    margin-top: 4px!important;
    margin-bottom: 4px!important;
}
.my-5px {
    margin-top: 5px!important;
    margin-bottom: 5px!important;
}
.my-6px {
    margin-top: 6px!important;
    margin-bottom: 6px!important;
}
.my-7px {
    margin-top: 7px!important;
    margin-bottom: 7px!important;
}
.my-8px {
    margin-top: 8px!important;
    margin-bottom: 8px!important;
}
.my-9px {
    margin-top: 9px!important;
    margin-bottom: 9px!important;
}
.my-10px {
    margin-top: 10px!important;
    margin-bottom: 10px!important;
}
.my-5px {
    margin-top: 5px!important;
    margin-bottom: 5px!important;
}
.my-10px {
    margin-top: 10px!important;
    margin-bottom: 10px!important;
}
.my-15px {
    margin-top: 15px!important;
    margin-bottom: 15px!important;
}
.my-20px {
    margin-top: 20px!important;
    margin-bottom: 20px!important;
}
.my-25px {
    margin-top: 25px!important;
    margin-bottom: 25px!important;
}
.my-30px {
    margin-top: 30px!important;
    margin-bottom: 30px!important;
}
.my-35px {
    margin-top: 35px!important;
    margin-bottom: 35px!important;
}
.my-40px {
    margin-top: 40px!important;
    margin-bottom: 40px!important;
}
.my-45px {
    margin-top: 45px!important;
    margin-bottom: 45px!important;
}
.my-50px {
    margin-top: 50px!important;
    margin-bottom: 50px!important;
}
.p-1px {
    padding: 1px!important;
}
.p-2px {
    padding: 2px!important;
}
.p-3px {
    padding: 3px!important;
}
.p-4px {
    padding: 4px!important;
}
.p-5px {
    padding: 5px!important;
}
.p-6px {
    padding: 6px!important;
}
.p-7px {
    padding: 7px!important;
}
.p-8px {
    padding: 8px!important;
}
.p-9px {
    padding: 9px!important;
}
.p-10px {
    padding: 10px!important;
}
.p-5px {
    padding: 5px!important;
}
.p-10px {
    padding: 10px!important;
}
.p-15px {
    padding: 15px!important;
}
.p-20px {
    padding: 20px!important;
}
.p-25px {
    padding: 25px!important;
}
.p-30px {
    padding: 30px!important;
}
.p-35px {
    padding: 35px!important;
}
.p-40px {
    padding: 40px!important;
}
.p-45px {
    padding: 45px!important;
}
.p-50px {
    padding: 50px!important;
}
.pt-1px {
    padding-top: 1px!important;
}
.pt-2px {
    padding-top: 2px!important;
}
.pt-3px {
    padding-top: 3px!important;
}
.pt-4px {
    padding-top: 4px!important;
}
.pt-5px {
    padding-top: 5px!important;
}
.pt-6px {
    padding-top: 6px!important;
}
.pt-7px {
    padding-top: 7px!important;
}
.pt-8px {
    padding-top: 8px!important;
}
.pt-9px {
    padding-top: 9px!important;
}
.pt-10px {
    padding-top: 10px!important;
}
.pt-5px {
    padding-top: 5px!important;
}
.pt-10px {
    padding-top: 10px!important;
}
.pt-15px {
    padding-top: 15px!important;
}
.pt-20px {
    padding-top: 20px!important;
}
.pt-25px {
    padding-top: 25px!important;
}
.pt-30px {
    padding-top: 30px!important;
}
.pt-35px {
    padding-top: 35px!important;
}
.pt-40px {
    padding-top: 40px!important;
}
.pt-45px {
    padding-top: 45px!important;
}
.pt-50px {
    padding-top: 50px!important;
}
.pe-1px {
    padding-right: 1px!important;
}
.pe-2px {
    padding-right: 2px!important;
}
.pe-3px {
    padding-right: 3px!important;
}
.pe-4px {
    padding-right: 4px!important;
}
.pe-5px {
    padding-right: 5px!important;
}
.pe-6px {
    padding-right: 6px!important;
}
.pe-7px {
    padding-right: 7px!important;
}
.pe-8px {
    padding-right: 8px!important;
}
.pe-9px {
    padding-right: 9px!important;
}
.pe-10px {
    padding-right: 10px!important;
}
.pe-5px {
    padding-right: 5px!important;
}
.pe-10px {
    padding-right: 10px!important;
}
.pe-15px {
    padding-right: 15px!important;
}
.pe-20px {
    padding-right: 20px!important;
}
.pe-25px {
    padding-right: 25px!important;
}
.pe-30px {
    padding-right: 30px!important;
}
.pe-35px {
    padding-right: 35px!important;
}
.pe-40px {
    padding-right: 40px!important;
}
.pe-45px {
    padding-right: 45px!important;
}
.pe-50px {
    padding-right: 50px!important;
}
.pb-1px {
    padding-bottom: 1px!important;
}
.pb-2px {
    padding-bottom: 2px!important;
}
.pb-3px {
    padding-bottom: 3px!important;
}
.pb-4px {
    padding-bottom: 4px!important;
}
.pb-5px {
    padding-bottom: 5px!important;
}
.pb-6px {
    padding-bottom: 6px!important;
}
.pb-7px {
    padding-bottom: 7px!important;
}
.pb-8px {
    padding-bottom: 8px!important;
}
.pb-9px {
    padding-bottom: 9px!important;
}
.pb-10px {
    padding-bottom: 10px!important;
}
.pb-5px {
    padding-bottom: 5px!important;
}
.pb-10px {
    padding-bottom: 10px!important;
}
.pb-15px {
    padding-bottom: 15px!important;
}
.pb-20px {
    padding-bottom: 20px!important;
}
.pb-25px {
    padding-bottom: 25px!important;
}
.pb-30px {
    padding-bottom: 30px!important;
}
.pb-35px {
    padding-bottom: 35px!important;
}
.pb-40px {
    padding-bottom: 40px!important;
}
.pb-45px {
    padding-bottom: 45px!important;
}
.pb-50px {
    padding-bottom: 50px!important;
}
.ps-1px {
    padding-left: 1px!important;
}
.ps-2px {
    padding-left: 2px!important;
}
.ps-3px {
    padding-left: 3px!important;
}
.ps-4px {
    padding-left: 4px!important;
}
.ps-5px {
    padding-left: 5px!important;
}
.ps-6px {
    padding-left: 6px!important;
}
.ps-7px {
    padding-left: 7px!important;
}
.ps-8px {
    padding-left: 8px!important;
}
.ps-9px {
    padding-left: 9px!important;
}
.ps-10px {
    padding-left: 10px!important;
}
.ps-5px {
    padding-left: 5px!important;
}
.ps-10px {
    padding-left: 10px!important;
}
.ps-15px {
    padding-left: 15px!important;
}
.ps-20px {
    padding-left: 20px!important;
}
.ps-25px {
    padding-left: 25px!important;
}
.ps-30px {
    padding-left: 30px!important;
}
.ps-35px {
    padding-left: 35px!important;
}
.ps-40px {
    padding-left: 40px!important;
}
.ps-45px {
    padding-left: 45px!important;
}
.ps-50px {
    padding-left: 50px!important;
}
.px-1px {
    padding-left: 1px!important;
    padding-right: 1px!important;
}
.px-2px {
    padding-left: 2px!important;
    padding-right: 2px!important;
}
.px-3px {
    padding-left: 3px!important;
    padding-right: 3px!important;
}
.px-4px {
    padding-left: 4px!important;
    padding-right: 4px!important;
}
.px-5px {
    padding-left: 5px!important;
    padding-right: 5px!important;
}
.px-6px {
    padding-left: 6px!important;
    padding-right: 6px!important;
}
.px-7px {
    padding-left: 7px!important;
    padding-right: 7px!important;
}
.px-8px {
    padding-left: 8px!important;
    padding-right: 8px!important;
}
.px-9px {
    padding-left: 9px!important;
    padding-right: 9px!important;
}
.px-10px {
    padding-left: 10px!important;
    padding-right: 10px!important;
}
.px-5px {
    padding-left: 5px!important;
    padding-right: 5px!important;
}
.px-10px {
    padding-left: 10px!important;
    padding-right: 10px!important;
}
.px-15px {
    padding-left: 15px!important;
    padding-right: 15px!important;
}
.px-20px {
    padding-left: 20px!important;
    padding-right: 20px!important;
}
.px-25px {
    padding-left: 25px!important;
    padding-right: 25px!important;
}
.px-30px {
    padding-left: 30px!important;
    padding-right: 30px!important;
}
.px-35px {
    padding-left: 35px!important;
    padding-right: 35px!important;
}
.px-40px {
    padding-left: 40px!important;
    padding-right: 40px!important;
}
.px-45px {
    padding-left: 45px!important;
    padding-right: 45px!important;
}
.px-50px {
    padding-left: 50px!important;
    padding-right: 50px!important;
}
.py-1px {
    padding-top: 1px!important;
    padding-bottom: 1px!important;
}
.py-2px {
    padding-top: 2px!important;
    padding-bottom: 2px!important;
}
.py-3px {
    padding-top: 3px!important;
    padding-bottom: 3px!important;
}
.py-4px {
    padding-top: 4px!important;
    padding-bottom: 4px!important;
}
.py-5px {
    padding-top: 5px!important;
    padding-bottom: 5px!important;
}
.py-6px {
    padding-top: 6px!important;
    padding-bottom: 6px!important;
}
.py-7px {
    padding-top: 7px!important;
    padding-bottom: 7px!important;
}
.py-8px {
    padding-top: 8px!important;
    padding-bottom: 8px!important;
}
.py-9px {
    padding-top: 9px!important;
    padding-bottom: 9px!important;
}
.py-10px {
    padding-top: 10px!important;
    padding-bottom: 10px!important;
}
.py-5px {
    padding-top: 5px!important;
    padding-bottom: 5px!important;
}
.py-10px {
    padding-top: 10px!important;
    padding-bottom: 10px!important;
}
.py-15px {
    padding-top: 15px!important;
    padding-bottom: 15px!important;
}
.py-20px {
    padding-top: 20px!important;
    padding-bottom: 20px!important;
}
.py-25px {
    padding-top: 25px!important;
    padding-bottom: 25px!important;
}
.py-30px {
    padding-top: 30px!important;
    padding-bottom: 30px!important;
}
.py-35px {
    padding-top: 35px!important;
    padding-bottom: 35px!important;
}
.py-40px {
    padding-top: 40px!important;
    padding-bottom: 40px!important;
}
.py-45px {
    padding-top: 45px!important;
    padding-bottom: 45px!important;
}
.py-50px {
    padding-top: 50px!important;
    padding-bottom: 50px!important;
}

/*.integratedSearch {*/
/*    padding: 5px 30px 5px 10px;*/
/*    background-color: rgba(255, 255, 255, .5);*/
/*    border: 1px solid var(--strong-txt);*/
/*    border-radius: 30px;*/
/*    max-width: 140px;*/
/*    color: var(--strong-txt);*/
/*    transition: all .3s ease;*/
/*    font-size: 0.8em; }*/

.integratedSearch::placeholder {
    color: var(--light-txt);
}

.integratedSearch:focus-visible {
    outline: 0;
    box-shadow: 0 0 10px rgba(57, 113, 255, .3);
    background-color: var(--white);
}

.post-wrap.post-answer .cntsContainer {
    /*padding: 20px 20px 50px;*/
    /*padding: 50px 20px 60px;*/
    border-bottom: 1px solid var(--box-border);
    padding: 30px 0 40px;
}

.callout-box .btn-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 1.171875rem .9375rem;
}


.va-container {
    background: var(--bg-footer);
    color: #2d353c;
    border-radius: 3px;
    border: 1px solid #ccd0d4;
}
.va-container .va-container-header,
.va-container .va-container-body,
.va-container .va-container-footer {
    padding: 10px;
}

.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

/* popup */
ul.popupContainer {
    /*position:relative;*/
    position: absolute;
    list-style: none;
    top:0px;
    padding:0;
    margin:0 auto;
    z-index:1500;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

ul.popupContainer li {
    display:inline-block;
    margin: 5px;
    margin-right: 0;
}

@media (min-width: 768px) {
    ul.popupContainer {
        top:inherit;
    }

    ul.popupContainer li {
        display:inline-block;
    }
}

.pop-layer {
    border: 1px solid #323232;
    z-index: 10;
    min-width: 250px;
}

.pop-layer .pop-button {
    padding:5px 5px 0 5px;
    background:#323232;
    color:#fff;
    font-size:12px;
}
/* // popup */

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}


/*신현이 - popup overwrite*/
ul.popupContainer li {
    background-color: var(--white);
    border: none;
    border-radius: 3px 3px 0 0;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

.pop-layer .pop-button {
    background-color: unset;
    color: var(--text);
    padding: 0;
}

.pop-layer img {
    margin: 5px 5px 0;
    width: calc(100% - 10px);
    max-width: 480px !important;
    max-height: calc(100vh - 80px);
}

.pop-button .btn-sm {
    background-color: var(--strong-txt);
    color: var(--white);
    border-radius: 0;
    margin: 0;
    padding: var(--spacing-2) var(--spacing-3);
    position: relative;
    z-index: 2;
}
.pop-button .btn-sm:hover {
    background-color: var(--primary-60);
}
.pop-button .btn-sm:focus {
    outline-color: var(--secondary-50);
}
.pop-button .checkbox-wrapper {
 padding: 5px;
}

/*
.checkbox-wrapper input[type='checkbox'] {
    display: none;
    visibility: hidden;
}
*/

.checkbox-wrapper input[type='checkbox'] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    border: 0;
}

.checkbox-wrapper input[type='checkbox']:focus + label {
    outline: 2px solid #000;
    outline-offset: 4px;
}

.checkbox-wrapper .cbx {
    margin: auto;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
}
.checkbox-wrapper .cbx span {
    display: inline-block;
    vertical-align: middle;
    transform: translate3d(0, 0, 0);
}
.checkbox-wrapper .cbx span:first-child {
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    transform: scale(1);
    vertical-align: middle;
    border: 1px solid var(--box-border);
    transition: all 0.2s ease;
}
.checkbox-wrapper .cbx span:first-child svg {
    position: absolute;
    top: 2px;
    left: 1px;
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    stroke-dashoffset: 16px;
    transition: all 0.3s ease;
    transition-delay: 0.1s;
    transform: translate3d(0, 0, 0);
}
.checkbox-wrapper .cbx span:first-child:before {
    content: '';
    width: 100%;
    height: 100%;
    background: var(--primary);
    display: block;
    transform: scale(0);
    opacity: 1;
    border-radius: 50%;
}
.checkbox-wrapper .cbx span:last-child {
    padding-left: 8px;
}
.checkbox-wrapper .cbx:hover span:first-child {
    border-color: var(--box-border);
}

.checkbox-wrapper .inp-cbx:checked + .cbx span:first-child {
    background:  var(--primary);
    border-color:  var(--primary);
    animation: wave 0.4s ease;
}
.checkbox-wrapper .inp-cbx:checked + .cbx span:first-child svg {
    stroke-dashoffset: 0;
}
.checkbox-wrapper .inp-cbx:checked + .cbx span:first-child:before {
    transform: scale(3.5);
    opacity: 0;
    transition: all 0.6s ease;
}

@keyframes wave {
    50% {
        transform: scale(0.9);
    }
}

.semi-box {
    padding:15px;
    border:1px solid var(--stroke-2);
}

.alert {
    position: relative;
    padding: 15px;
    color: inherit;
    background-color: transparent;
    border: 0 solid transparent;
    border-radius: 4px;
    /*border: none;*/
    margin-top:15px;
    margin-bottom:0;
}
.alert.alert-success {
    background: #7cdda7;
}
.alert.alert-info {
    background: #93cfe5;
}
.alert.alert-danger {
    background: #f8b2b2;
}
.alert.alert-warning {
    background: #ffead0;
}

.radius-1 {
    border-radius:1px;
}
.radius-2 {
    border-radius:2px;
}
.radius-3 {
    border-radius:3px;
}
.radius-4 {
    border-radius:4px;
}
.radius-5 {
    border-radius:5px;
}
.radius-10 {
    border-radius:10px;
}
.radius-15 {
    border-radius:15px;
}
.radius-20 {
    border-radius:20px;
}



.bg-primary {
    background: #c2ddf6;
}
.bg-success {
    background: #b3e6e6;
}
.bg-info {
    background: #c8e9f3;
}
.bg-warning {
    background: #fce1ba;
}
.bg-danger {
    background: #e62623;
}
.bg-light {
    background: #fbfbfc;
}
.bg-dark {
    background: #c0c2c5;
}
.bg-blue {
    background: #c2ddf6;
}
.bg-indigo {
    background: #dbcbf5;
}
.bg-purple {
    background: #d5d8e9;
}
.bg-pink {
    background: #fecce0;
}
.bg-red {
    background: #ffcecd;
}
.bg-orange {
    background: #fce1ba;
}
.bg-yellow {
    background: #fff4b3;
}
.bg-green {
    background: #c2e5c2;
}
.bg-teal {
    background: #b3e6e6;
}
.bg-lime {
    background: #deefc9;
}
.bg-cyan {
    background: #c8e9f3;
}
.bg-white {
    background: white;
}
.bg-gray {
    background: #d3d6d8;
}
.bg-black {
    background: #b3b3b3;
}
.bg-silver {
    background: #e9edef;
}
.bg-gray-100 {
    background: #fdfdfe;
}
.bg-gray-200 {
    background: #f8f9fa;
}
.bg-gray-300 {
    background: #f5f6f8;
}
.bg-gray-400 {
    background: #f0f2f4;
}
.bg-gray-500 {
    background: #e6e9eb;
}
.bg-gray-600 {
    background: #d3d6d8;
}
.bg-gray-700 {
    background: #c8cbcd;
}
.bg-gray-800 {
    background: #c0c2c5;
}
.bg-gray-900 {
    background: #bcbebf;
}
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

.border-primary {
    border: 1px solid #c2ddf6;
}
.border-secondary {
    border: 1px solid #d3d6d8;
}
.border-success {
    border: 1px solid #b3e6e6;
}
.border-info {
    border: 1px solid #c8e9f3;
}
.border-warning {
    border: 1px solid #fce1ba;
}
.border-danger {
    border: 1px solid #ffcecd;
}
.border-light {
    border: 1px solid #fbfbfc;
}
.border-dark {
    border: 1px solid #c0c2c5;
}
.border-inverse {
    border: 1px solid #c0c2c5;
}
.border-blue {
    border: 1px solid #c2ddf6;
}
.border-indigo {
    border: 1px solid #dbcbf5;
}
.border-purple {
    border: 1px solid #d5d8e9;
}
.border-pink {
    border: 1px solid #fecce0;
}
.border-red {
    border: 1px solid #ffcecd;
}
.border-orange {
    border: 1px solid #fce1ba;
}
.border-yellow {
    border: 1px solid #fff4b3;
}
.border-green {
    border: 1px solid #c2e5c2;
}
.border-teal {
    border: 1px solid #b3e6e6;
}
.border-lime {
    border: 1px solid #deefc9;
}
.border-cyan {
    border: 1px solid #c8e9f3;
}
.border-white {
    border: 1px solid white;
}
.border-gray {
    border: 1px solid #d3d6d8;
}
.border-black {
    border: 1px solid #b3b3b3;
}
.border-silver {
    border: 1px solid #e9edef;
}
.border-gray-100 {
    border: 1px solid #fdfdfe;
}
.border-gray-200 {
    border: 1px solid #f8f9fa;
}
.border-gray-300 {
    border: 1px solid #f5f6f8;
}
.border-gray-400 {
    border: 1px solid #f0f2f4;
}
.border-gray-500 {
    border: 1px solid #e6e9eb;
}
.border-gray-600 {
    border: 1px solid #d3d6d8;
}
.border-gray-700 {
    border: 1px solid #c8cbcd;
}
.border-gray-800 {
    border: 1px solid #c0c2c5;
}
.border-gray-900 {
    border: 1px solid #bcbebf;
}
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

.text-default {
    color: #464748;
}
.text-primary {
    color: #102b44;
}
.text-secondary {
    color: #202326;
}
.text-success {
    color: #003434;
}
.text-info {
    color: #163740;
}
.text-warning {
    color: #4a2f08;
}
.text-danger {
    color: #4d1b1a;
}
.text-light {
    color: #494949;
}
.text-dark {
    color: #0e1012;
}
.text-inverse {
    color: #0e1012;
}
.text-blue {
    color: #102b44;
}
.text-indigo {
    color: #291943;
}
.text-purple {
    color: #222537;
}
.text-pink {
    color: #4b1a2d;
}
.text-red {
    color: var(--danger-text);
}
.text-orange {
    color: #4a2f08;
}
.text-yellow {
    color: #4d4100;
}
.text-green {
    color: #0f330f;
}
.text-teal {
    color: #003434;
}
.text-lime {
    color: #2b3d17;
}
.text-cyan {
    color: #163740;
}
.text-white {
    color: #4d4d4d;
}
.text-gray {
    color: #202326;
}
.text-black {
    color: black;
}
.text-silver {
    color: #373a3c;
}
.text-gray-100 {
    color: #4a4b4b;
}
.text-gray-200 {
    color: #464748;
}
.text-gray-300 {
    color: #434445;
}
.text-gray-400 {
    color: #3e4041;
}
.text-gray-500 {
    color: #343639;
}
.text-gray-600 {
    color: #202326;
}
.text-gray-700 {
    color: #16181a;
}
.text-gray-800 {
    color: #0e1012;
}
.text-gray-900 {
    color: #0a0b0d;
}
.ul-active {
    /*color: #e51e14;*/
    background-color: #e2effd;
}
.li-hover{
    border-radius: 5px;
    padding: 0 5px;
    cursor: pointer;
}
.li-hover:hover {
    background-color: var(--bright);
}

/*.contents-list li {*/
/*    width:47%;*/
/*}*/

.flex-center,
table.flex-center,
table > thead > tr > th.flex-center,
table > thead > tr > td.flex-center,
table > tbody > tr > th.flex-center,
table > tbody > tr > td.flex-center {
    display:flex;
    justify-content: center;
}
.wrap-checkbox label:has(input) {
    cursor: pointer;
    /*display: flex;*/
    align-items: center;
    gap:var(--spacing-3);
    width: fit-content;
    font: var(--label-sm);
    color: var(--gray-scale-100);
    padding: var(--spacing-3) var(--spacing-4)!important;
    border-radius: var(--spacing-3);
    border-style: solid;
    border-width: 2px;
    border-color: var(--stroke-2);
    background-color: var(--gray-scale-0);
}
.wrap-checkbox label:has(input:checked) {
    border-color: var(--secondary-50);
    background-color: var(--secondary-5);
    text-decoration: underline;
    font-weight: 800;
}
.wrap-checkbox label:has(input:checked)::before {
    border-color: var(--secondary-50);
}
.wrap-checkbox label::before {
    content: '';
    display: inline-block;
    margin-left: var(--spacing-3);
    width: 0.8em;
    height: 0.4em;
    border-style: solid;
    border-width: 0 0 2px 2px;
    border-color: var(--stroke-2);
    transform: rotate(-45deg) translateY(-6px);
}
.wrap-checkbox label:has(input:focus-visible) {
     outline: 3px dashed var(--gray-scale-100);
}
.wrap-checkbox label:has(input:hover) {
    background-color: var(--gray-scale-5);
}
.wrap-checkbox label:has(input:checked:hover) {
    background-color: var(--secondary-10);
    border-color: var(--secondary-60);
}
.wrap-checkbox label:has(input:checked:hover)::after {
    border-color: var(--secondary-60);
}
.wrap-checkbox label:has(input:checked):active {
    background-color: var(--secondary-20);
    border-color: var(--secondary-70);
}
.wrap-checkbox label:has(input:checked):active::after {
    border-color: var(--secondary-70);
}
.wrap-checkbox label:has(input):active {
    background-color: var(--gray-scale-20);
    border-color: var(--stroke-2);
}
.offset-1 {
    margin-left: 8.33333333%}
.offset-2 {
    margin-left: 16.66666667%}
.offset-3 {
    margin-left: 25%}
.offset-4 {
    margin-left: 33.33333333%}
.offset-5 {
    margin-left: 41.66666667%}
.offset-6 {
    margin-left: 50%}
.offset-7 {
    margin-left: 58.33333333%}
.offset-8 {
    margin-left: 66.66666667%}
.offset-9 {
    margin-left: 75%}
.offset-10 {
    margin-left: 83.33333333%}
.offset-11 {
    margin-left: 91.66666667%}
.g-0, .gx-0 {
    --bs-gutter-x: 0;
}
.g-0, .gy-0 {
    --bs-gutter-y: 0;
}
.g-1, .gx-1 {
    --bs-gutter-x: 0.234375rem;
}
.g-1, .gy-1 {
    --bs-gutter-y: 0.234375rem;
}
.g-2, .gx-2 {
    --bs-gutter-x: 0.46875rem;
}
.g-2, .gy-2 {
    --bs-gutter-y: 0.46875rem;
}
.g-3, .gx-3 {
    --bs-gutter-x: 0.9375rem;
}
.g-3, .gy-3 {
    --bs-gutter-y: 0.9375rem;
}
.g-4, .gx-4 {
    --bs-gutter-x: 1.40625rem;
}
.g-4, .gy-4 {
    --bs-gutter-y: 1.40625rem;
}
.g-5, .gx-5 {
    --bs-gutter-x: 2.8125rem;
}
.g-5, .gy-5 {
    --bs-gutter-y: 2.8125rem;
}
@media (min-width:576px) {
    .col-sm {
        flex: 1 0 0%}
    .row-cols-sm-auto>* {
        flex: 0 0 auto;
        width: auto;
    }
    .row-cols-sm-1>* {
        flex: 0 0 auto;
        width: 100%}
    .row-cols-sm-2>* {
        flex: 0 0 auto;
        width: 50%}
    .row-cols-sm-3>* {
        flex: 0 0 auto;
        width: 33.3333333333%}
    .row-cols-sm-4>* {
        flex: 0 0 auto;
        width: 25%}
    .row-cols-sm-5>* {
        flex: 0 0 auto;
        width: 20%}
    .row-cols-sm-6>* {
        flex: 0 0 auto;
        width: 16.6666666667%}
    .col-sm-auto {
        flex: 0 0 auto;
        width: auto;
    }
    .col-sm-1 {
        flex: 0 0 auto;
        width: 8.33333333%}
    .col-sm-2 {
        flex: 0 0 auto;
        width: 16.66666667%}
    .col-sm-3 {
        flex: 0 0 auto;
        width: 25%}
    .col-sm-4 {
        flex: 0 0 auto;
        width: 33.33333333%}
    .col-sm-5 {
        flex: 0 0 auto;
        width: 41.66666667%}
    .col-sm-6 {
        flex: 0 0 auto;
        width: 50%}
    .col-sm-7 {
        flex: 0 0 auto;
        width: 58.33333333%}
    .col-sm-8 {
        flex: 0 0 auto;
        width: 66.66666667%}
    .col-sm-9 {
        flex: 0 0 auto;
        width: 75%}
    .col-sm-10 {
        flex: 0 0 auto;
        width: 83.33333333%}
    .col-sm-11 {
        flex: 0 0 auto;
        width: 91.66666667%}
    .col-sm-12 {
        flex: 0 0 auto;
        width: 100%}
    .offset-sm-0 {
        margin-left: 0;
    }
    .offset-sm-1 {
        margin-left: 8.33333333%}
    .offset-sm-2 {
        margin-left: 16.66666667%}
    .offset-sm-3 {
        margin-left: 25%}
    .offset-sm-4 {
        margin-left: 33.33333333%}
    .offset-sm-5 {
        margin-left: 41.66666667%}
    .offset-sm-6 {
        margin-left: 50%}
    .offset-sm-7 {
        margin-left: 58.33333333%}
    .offset-sm-8 {
        margin-left: 66.66666667%}
    .offset-sm-9 {
        margin-left: 75%}
    .offset-sm-10 {
        margin-left: 83.33333333%}
    .offset-sm-11 {
        margin-left: 91.66666667%}
    .g-sm-0, .gx-sm-0 {
        --bs-gutter-x: 0;
    }
    .g-sm-0, .gy-sm-0 {
        --bs-gutter-y: 0;
    }
    .g-sm-1, .gx-sm-1 {
        --bs-gutter-x: 0.234375rem;
    }
    .g-sm-1, .gy-sm-1 {
        --bs-gutter-y: 0.234375rem;
    }
    .g-sm-2, .gx-sm-2 {
        --bs-gutter-x: 0.46875rem;
    }
    .g-sm-2, .gy-sm-2 {
        --bs-gutter-y: 0.46875rem;
    }
    .g-sm-3, .gx-sm-3 {
        --bs-gutter-x: 0.9375rem;
    }
    .g-sm-3, .gy-sm-3 {
        --bs-gutter-y: 0.9375rem;
    }
    .g-sm-4, .gx-sm-4 {
        --bs-gutter-x: 1.40625rem;
    }
    .g-sm-4, .gy-sm-4 {
        --bs-gutter-y: 1.40625rem;
    }
    .g-sm-5, .gx-sm-5 {
        --bs-gutter-x: 2.8125rem;
    }
    .g-sm-5, .gy-sm-5 {
        --bs-gutter-y: 2.8125rem;
    }
}
@media (min-width:768px) {
    .col-md {
        flex: 1 0 0%}
    .row-cols-md-auto>* {
        flex: 0 0 auto;
        width: auto;
    }
    .row-cols-md-1>* {
        flex: 0 0 auto;
        width: 100%}
    .row-cols-md-2>* {
        flex: 0 0 auto;
        width: 50%}
    .row-cols-md-3>* {
        flex: 0 0 auto;
        width: 33.3333333333%}
    .row-cols-md-4>* {
        flex: 0 0 auto;
        width: 25%}
    .row-cols-md-5>* {
        flex: 0 0 auto;
        width: 20%}
    .row-cols-md-6>* {
        flex: 0 0 auto;
        width: 16.6666666667%}
    .col-md-auto {
        flex: 0 0 auto;
        width: auto;
    }
    .col-md-1 {
        flex: 0 0 auto;
        width: 8.33333333%}
    .col-md-2 {
        flex: 0 0 auto;
        width: 16.66666667%}
    .col-md-3 {
        flex: 0 0 auto;
        width: 25%}
    .col-md-4 {
        flex: 0 0 auto;
        width: 33.33333333%}
    .col-md-5 {
        flex: 0 0 auto;
        width: 41.66666667%}
    .col-md-6 {
        flex: 0 0 auto;
        width: 50%}
    .col-md-7 {
        flex: 0 0 auto;
        width: 58.33333333%}
    .col-md-8 {
        flex: 0 0 auto;
        width: 66.66666667%}
    .col-md-9 {
        flex: 0 0 auto;
        width: 75%}
    .col-md-10 {
        flex: 0 0 auto;
        width: 83.33333333%}
    .col-md-11 {
        flex: 0 0 auto;
        width: 91.66666667%}
    .col-md-12 {
        flex: 0 0 auto;
        width: 100%}
    .offset-md-0 {
        margin-left: 0;
    }
    .offset-md-1 {
        margin-left: 8.33333333%}
    .offset-md-2 {
        margin-left: 16.66666667%}
    .offset-md-3 {
        margin-left: 25%}
    .offset-md-4 {
        margin-left: 33.33333333%}
    .offset-md-5 {
        margin-left: 41.66666667%}
    .offset-md-6 {
        margin-left: 50%}
    .offset-md-7 {
        margin-left: 58.33333333%}
    .offset-md-8 {
        margin-left: 66.66666667%}
    .offset-md-9 {
        margin-left: 75%}
    .offset-md-10 {
        margin-left: 83.33333333%}
    .offset-md-11 {
        margin-left: 91.66666667%}
    .g-md-0, .gx-md-0 {
        --bs-gutter-x: 0;
    }
    .g-md-0, .gy-md-0 {
        --bs-gutter-y: 0;
    }
    .g-md-1, .gx-md-1 {
        --bs-gutter-x: 0.234375rem;
    }
    .g-md-1, .gy-md-1 {
        --bs-gutter-y: 0.234375rem;
    }
    .g-md-2, .gx-md-2 {
        --bs-gutter-x: 0.46875rem;
    }
    .g-md-2, .gy-md-2 {
        --bs-gutter-y: 0.46875rem;
    }
    .g-md-3, .gx-md-3 {
        --bs-gutter-x: 0.9375rem;
    }
    .g-md-3, .gy-md-3 {
        --bs-gutter-y: 0.9375rem;
    }
    .g-md-4, .gx-md-4 {
        --bs-gutter-x: 1.40625rem;
    }
    .g-md-4, .gy-md-4 {
        --bs-gutter-y: 1.40625rem;
    }
    .g-md-5, .gx-md-5 {
        --bs-gutter-x: 2.8125rem;
    }
    .g-md-5, .gy-md-5 {
        --bs-gutter-y: 2.8125rem;
    }
}
@media (min-width:992px) {
    .col-lg {
        flex: 1 0 0%}
    .row-cols-lg-auto>* {
        flex: 0 0 auto;
        width: auto;
    }
    .row-cols-lg-1>* {
        flex: 0 0 auto;
        width: 100%}
    .row-cols-lg-2>* {
        flex: 0 0 auto;
        width: 50%}
    .row-cols-lg-3>* {
        flex: 0 0 auto;
        width: 33.3333333333%}
    .row-cols-lg-4>* {
        flex: 0 0 auto;
        width: 25%}
    .row-cols-lg-5>* {
        flex: 0 0 auto;
        width: 20%}
    .row-cols-lg-6>* {
        flex: 0 0 auto;
        width: 16.6666666667%}
    .col-lg-auto {
        flex: 0 0 auto;
        width: auto;
    }
    .col-lg-1 {
        flex: 0 0 auto;
        width: 8.33333333%}
    .col-lg-2 {
        flex: 0 0 auto;
        width: 16.66666667%}
    .col-lg-3 {
        flex: 0 0 auto;
        width: 25%}
    .col-lg-4 {
        flex: 0 0 auto;
        width: 33.33333333%}
    .col-lg-5 {
        flex: 0 0 auto;
        width: 41.66666667%}
    .col-lg-6 {
        flex: 0 0 auto;
        width: 50%}
    .col-lg-7 {
        flex: 0 0 auto;
        width: 58.33333333%}
    .col-lg-8 {
        flex: 0 0 auto;
        width: 66.66666667%}
    .col-lg-9 {
        flex: 0 0 auto;
        width: 75%}
    .col-lg-10 {
        flex: 0 0 auto;
        width: 83.33333333%}
    .col-lg-11 {
        flex: 0 0 auto;
        width: 91.66666667%}
    .col-lg-12 {
        flex: 0 0 auto;
        width: 100%}
    .offset-lg-0 {
        margin-left: 0;
    }
    .offset-lg-1 {
        margin-left: 8.33333333%}
    .offset-lg-2 {
        margin-left: 16.66666667%}
    .offset-lg-3 {
        margin-left: 25%}
    .offset-lg-4 {
        margin-left: 33.33333333%}
    .offset-lg-5 {
        margin-left: 41.66666667%}
    .offset-lg-6 {
        margin-left: 50%}
    .offset-lg-7 {
        margin-left: 58.33333333%}
    .offset-lg-8 {
        margin-left: 66.66666667%}
    .offset-lg-9 {
        margin-left: 75%}
    .offset-lg-10 {
        margin-left: 83.33333333%}
    .offset-lg-11 {
        margin-left: 91.66666667%}
    .g-lg-0, .gx-lg-0 {
        --bs-gutter-x: 0;
    }
    .g-lg-0, .gy-lg-0 {
        --bs-gutter-y: 0;
    }
    .g-lg-1, .gx-lg-1 {
        --bs-gutter-x: 0.234375rem;
    }
    .g-lg-1, .gy-lg-1 {
        --bs-gutter-y: 0.234375rem;
    }
    .g-lg-2, .gx-lg-2 {
        --bs-gutter-x: 0.46875rem;
    }
    .g-lg-2, .gy-lg-2 {
        --bs-gutter-y: 0.46875rem;
    }
    .g-lg-3, .gx-lg-3 {
        --bs-gutter-x: 0.9375rem;
    }
    .g-lg-3, .gy-lg-3 {
        --bs-gutter-y: 0.9375rem;
    }
    .g-lg-4, .gx-lg-4 {
        --bs-gutter-x: 1.40625rem;
    }
    .g-lg-4, .gy-lg-4 {
        --bs-gutter-y: 1.40625rem;
    }
    .g-lg-5, .gx-lg-5 {
        --bs-gutter-x: 2.8125rem;
    }
    .g-lg-5, .gy-lg-5 {
        --bs-gutter-y: 2.8125rem;
    }
}
@media (min-width:1200px) {
    .col-xl {
        flex: 1 0 0%}
    .row-cols-xl-auto>* {
        flex: 0 0 auto;
        width: auto;
    }
    .row-cols-xl-1>* {
        flex: 0 0 auto;
        width: 100%}
    .row-cols-xl-2>* {
        flex: 0 0 auto;
        width: 50%}
    .row-cols-xl-3>* {
        flex: 0 0 auto;
        width: 33.3333333333%}
    .row-cols-xl-4>* {
        flex: 0 0 auto;
        width: 25%}
    .row-cols-xl-5>* {
        flex: 0 0 auto;
        width: 20%}
    .row-cols-xl-6>* {
        flex: 0 0 auto;
        width: 16.6666666667%}
    .col-xl-auto {
        flex: 0 0 auto;
        width: auto;
    }
    .col-xl-1 {
        flex: 0 0 auto;
        width: 8.33333333%}
    .col-xl-2 {
        flex: 0 0 auto;
        width: 16.66666667%}
    .col-xl-3 {
        flex: 0 0 auto;
        width: 25%}
    .col-xl-4 {
        flex: 0 0 auto;
        width: 33.33333333%}
    .col-xl-5 {
        flex: 0 0 auto;
        width: 41.66666667%}
    .col-xl-6 {
        flex: 0 0 auto;
        width: 50%}
    .col-xl-7 {
        flex: 0 0 auto;
        width: 58.33333333%}
    .col-xl-8 {
        flex: 0 0 auto;
        width: 66.66666667%}
    .col-xl-9 {
        flex: 0 0 auto;
        width: 75%}
    .col-xl-10 {
        flex: 0 0 auto;
        width: 83.33333333%}
    .col-xl-11 {
        flex: 0 0 auto;
        width: 91.66666667%}
    .col-xl-12 {
        flex: 0 0 auto;
        width: 100%}
    .offset-xl-0 {
        margin-left: 0;
    }
    .offset-xl-1 {
        margin-left: 8.33333333%}
    .offset-xl-2 {
        margin-left: 16.66666667%}
    .offset-xl-3 {
        margin-left: 25%}
    .offset-xl-4 {
        margin-left: 33.33333333%}
    .offset-xl-5 {
        margin-left: 41.66666667%}
    .offset-xl-6 {
        margin-left: 50%}
    .offset-xl-7 {
        margin-left: 58.33333333%}
    .offset-xl-8 {
        margin-left: 66.66666667%}
    .offset-xl-9 {
        margin-left: 75%}
    .offset-xl-10 {
        margin-left: 83.33333333%}
    .offset-xl-11 {
        margin-left: 91.66666667%}
    .g-xl-0, .gx-xl-0 {
        --bs-gutter-x: 0;
    }
    .g-xl-0, .gy-xl-0 {
        --bs-gutter-y: 0;
    }
    .g-xl-1, .gx-xl-1 {
        --bs-gutter-x: 0.234375rem;
    }
    .g-xl-1, .gy-xl-1 {
        --bs-gutter-y: 0.234375rem;
    }
    .g-xl-2, .gx-xl-2 {
        --bs-gutter-x: 0.46875rem;
    }
    .g-xl-2, .gy-xl-2 {
        --bs-gutter-y: 0.46875rem;
    }
    .g-xl-3, .gx-xl-3 {
        --bs-gutter-x: 0.9375rem;
    }
    .g-xl-3, .gy-xl-3 {
        --bs-gutter-y: 0.9375rem;
    }
    .g-xl-4, .gx-xl-4 {
        --bs-gutter-x: 1.40625rem;
    }
    .g-xl-4, .gy-xl-4 {
        --bs-gutter-y: 1.40625rem;
    }
    .g-xl-5, .gx-xl-5 {
        --bs-gutter-x: 2.8125rem;
    }
    .g-xl-5, .gy-xl-5 {
        --bs-gutter-y: 2.8125rem;
    }
}
@media (min-width:1400px) {
    .col-xxl {
        flex: 1 0 0%}
    .row-cols-xxl-auto>* {
        flex: 0 0 auto;
        width: auto;
    }
    .row-cols-xxl-1>* {
        flex: 0 0 auto;
        width: 100%}
    .row-cols-xxl-2>* {
        flex: 0 0 auto;
        width: 50%}
    .row-cols-xxl-3>* {
        flex: 0 0 auto;
        width: 33.3333333333%}
    .row-cols-xxl-4>* {
        flex: 0 0 auto;
        width: 25%}
    .row-cols-xxl-5>* {
        flex: 0 0 auto;
        width: 20%}
    .row-cols-xxl-6>* {
        flex: 0 0 auto;
        width: 16.6666666667%}
    .col-xxl-auto {
        flex: 0 0 auto;
        width: auto;
    }
    .col-xxl-1 {
        flex: 0 0 auto;
        width: 8.33333333%}
    .col-xxl-2 {
        flex: 0 0 auto;
        width: 16.66666667%}
    .col-xxl-3 {
        flex: 0 0 auto;
        width: 25%}
    .col-xxl-4 {
        flex: 0 0 auto;
        width: 33.33333333%}
    .col-xxl-5 {
        flex: 0 0 auto;
        width: 41.66666667%}
    .col-xxl-6 {
        flex: 0 0 auto;
        width: 50%}
    .col-xxl-7 {
        flex: 0 0 auto;
        width: 58.33333333%}
    .col-xxl-8 {
        flex: 0 0 auto;
        width: 66.66666667%}
    .col-xxl-9 {
        flex: 0 0 auto;
        width: 75%}
    .col-xxl-10 {
        flex: 0 0 auto;
        width: 83.33333333%}
    .col-xxl-11 {
        flex: 0 0 auto;
        width: 91.66666667%}
    .col-xxl-12 {
        flex: 0 0 auto;
        width: 100%}
    .offset-xxl-0 {
        margin-left: 0;
    }
    .offset-xxl-1 {
        margin-left: 8.33333333%}
    .offset-xxl-2 {
        margin-left: 16.66666667%}
    .offset-xxl-3 {
        margin-left: 25%}
    .offset-xxl-4 {
        margin-left: 33.33333333%}
    .offset-xxl-5 {
        margin-left: 41.66666667%}
    .offset-xxl-6 {
        margin-left: 50%}
    .offset-xxl-7 {
        margin-left: 58.33333333%}
    .offset-xxl-8 {
        margin-left: 66.66666667%}
    .offset-xxl-9 {
        margin-left: 75%}
    .offset-xxl-10 {
        margin-left: 83.33333333%}
    .offset-xxl-11 {
        margin-left: 91.66666667%}
    .g-xxl-0, .gx-xxl-0 {
        --bs-gutter-x: 0;
    }
    .g-xxl-0, .gy-xxl-0 {
        --bs-gutter-y: 0;
    }
    .g-xxl-1, .gx-xxl-1 {
        --bs-gutter-x: 0.234375rem;
    }
    .g-xxl-1, .gy-xxl-1 {
        --bs-gutter-y: 0.234375rem;
    }
    .g-xxl-2, .gx-xxl-2 {
        --bs-gutter-x: 0.46875rem;
    }
    .g-xxl-2, .gy-xxl-2 {
        --bs-gutter-y: 0.46875rem;
    }
    .g-xxl-3, .gx-xxl-3 {
        --bs-gutter-x: 0.9375rem;
    }
    .g-xxl-3, .gy-xxl-3 {
        --bs-gutter-y: 0.9375rem;
    }
    .g-xxl-4, .gx-xxl-4 {
        --bs-gutter-x: 1.40625rem;
    }
    .g-xxl-4, .gy-xxl-4 {
        --bs-gutter-y: 1.40625rem;
    }
    .g-xxl-5, .gx-xxl-5 {
        --bs-gutter-x: 2.8125rem;
    }
    .g-xxl-5, .gy-xxl-5 {
        --bs-gutter-y: 2.8125rem;
    }
}
@media (min-width:1800px) {
    .col-xxxl {
        flex: 1 0 0%}
    .row-cols-xxxl-auto>* {
        flex: 0 0 auto;
        width: auto;
    }
    .row-cols-xxxl-1>* {
        flex: 0 0 auto;
        width: 100%}
    .row-cols-xxxl-2>* {
        flex: 0 0 auto;
        width: 50%}
    .row-cols-xxxl-3>* {
        flex: 0 0 auto;
        width: 33.3333333333%}
    .row-cols-xxxl-4>* {
        flex: 0 0 auto;
        width: 25%}
    .row-cols-xxxl-5>* {
        flex: 0 0 auto;
        width: 20%}
    .row-cols-xxxl-6>* {
        flex: 0 0 auto;
        width: 16.6666666667%}
    .col-xxxl-auto {
        flex: 0 0 auto;
        width: auto;
    }
    .col-xxxl-1 {
        flex: 0 0 auto;
        width: 8.33333333%}
    .col-xxxl-2 {
        flex: 0 0 auto;
        width: 16.66666667%}
    .col-xxxl-3 {
        flex: 0 0 auto;
        width: 25%}
    .col-xxxl-4 {
        flex: 0 0 auto;
        width: 33.33333333%}
    .col-xxxl-5 {
        flex: 0 0 auto;
        width: 41.66666667%}
    .col-xxxl-6 {
        flex: 0 0 auto;
        width: 50%}
    .col-xxxl-7 {
        flex: 0 0 auto;
        width: 58.33333333%}
    .col-xxxl-8 {
        flex: 0 0 auto;
        width: 66.66666667%}
    .col-xxxl-9 {
        flex: 0 0 auto;
        width: 75%}
    .col-xxxl-10 {
        flex: 0 0 auto;
        width: 83.33333333%}
    .col-xxxl-11 {
        flex: 0 0 auto;
        width: 91.66666667%}
    .col-xxxl-12 {
        flex: 0 0 auto;
        width: 100%}
    .offset-xxxl-0 {
        margin-left: 0;
    }
    .offset-xxxl-1 {
        margin-left: 8.33333333%}
    .offset-xxxl-2 {
        margin-left: 16.66666667%}
    .offset-xxxl-3 {
        margin-left: 25%}
    .offset-xxxl-4 {
        margin-left: 33.33333333%}
    .offset-xxxl-5 {
        margin-left: 41.66666667%}
    .offset-xxxl-6 {
        margin-left: 50%}
    .offset-xxxl-7 {
        margin-left: 58.33333333%}
    .offset-xxxl-8 {
        margin-left: 66.66666667%}
    .offset-xxxl-9 {
        margin-left: 75%}
    .offset-xxxl-10 {
        margin-left: 83.33333333%}
    .offset-xxxl-11 {
        margin-left: 91.66666667%}
    .g-xxxl-0, .gx-xxxl-0 {
        --bs-gutter-x: 0;
    }
    .g-xxxl-0, .gy-xxxl-0 {
        --bs-gutter-y: 0;
    }
    .g-xxxl-1, .gx-xxxl-1 {
        --bs-gutter-x: 0.234375rem;
    }
    .g-xxxl-1, .gy-xxxl-1 {
        --bs-gutter-y: 0.234375rem;
    }
    .g-xxxl-2, .gx-xxxl-2 {
        --bs-gutter-x: 0.46875rem;
    }
    .g-xxxl-2, .gy-xxxl-2 {
        --bs-gutter-y: 0.46875rem;
    }
    .g-xxxl-3, .gx-xxxl-3 {
        --bs-gutter-x: 0.9375rem;
    }
    .g-xxxl-3, .gy-xxxl-3 {
        --bs-gutter-y: 0.9375rem;
    }
    .g-xxxl-4, .gx-xxxl-4 {
        --bs-gutter-x: 1.40625rem;
    }
    .g-xxxl-4, .gy-xxxl-4 {
        --bs-gutter-y: 1.40625rem;
    }
    .g-xxxl-5, .gx-xxxl-5 {
        --bs-gutter-x: 2.8125rem;
    }
    .g-xxxl-5, .gy-xxxl-5 {
        --bs-gutter-y: 2.8125rem;
    }
}

/* select2 */
.select2-container {
    box-sizing: border-box;
    display: inline-block;
    margin: 0;
    position: relative;
    vertical-align: middle;
    z-index: 90;
    font: var(--body-md);
    color: var(--gray-scale-100);
    border-radius: var(--spacing-3);
    border: 1px solid var(--stroke-2);
    cursor: pointer;
    min-width: 120px;
    background: #fff;
}
.select2-container .select2-selection--single {
    height: unset!important;
    padding: var(--spacing-2) var(--spacing-3);
    font:var(--label-sm);
}
.select2-container--default .select2-selection--single {
    background-color: unset!important;
    border: unset!important;
    border-radius: unset!important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: unset!important;;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: unset!important;;
    padding-right: unset!important;;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px!important;
    position: absolute;
    top: 1px;
    right: 6px!important;
    width: 20px;
}
.select2-search--dropdown .select2-search__field {
    outline-offset: unset !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border: 1px solid #aaa!important;
    border-radius: 3px;
}
/* // select2 */

.nav-box {
    position: relative;
    z-index: 200;
}

.pie-chart-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.chart-no-data{
    display: flex;
    flex-direction: column;
    justify-content: center;
}



#divLoading {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9998;
    background-color: rgba(0, 0, 0, .5);
    height:100%;
}
#divLoading .load-dialog {
    position: relative;
    width: 50%;
    margin: 10% auto 0 auto;
    padding:20px;
}

.load-content {
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #999;
    border-radius: 6px;
    outline: 0;
    padding:20px;
    text-align:center;
}

@-webkit-keyframes progress-bar-stripes {
    0% {
        background-position-x: 1rem;
    }
}
@keyframes progress-bar-stripes {
    0% {
        background-position-x: 1rem;
    }
}
.progress {
     --bs-progress-height: 1rem;
     --bs-progress-font-size: 0.5625rem;
     --bs-progress-bg: #ced4da;
     --bs-progress-border-radius: 4px;
     --bs-progress-box-shadow: inset 0 1px 2px rgba(0,  0,  0,  0.075);
     --bs-progress-bar-color: #FFFFFF;
     --bs-progress-bar-bg: #348fe2;
     --bs-progress-bar-transition: width 0.6s ease;
     display: flex;
     height: var(--bs-progress-height)!important;
     overflow: hidden;
     font-size: var(--bs-progress-font-size);
     background-color: var(--bs-progress-bg);
     border-radius: var(--bs-progress-border-radius);
 }
.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: var(--bs-progress-bar-color);
    text-align: center;
    white-space: nowrap;
    background-color: var(--bs-progress-bar-bg);
    transition: var(--bs-progress-bar-transition);
}
.progress .progress-bar {
    height: var(--bs-progress-height)!important;
}
@media (prefers-reduced-motion:reduce) {
    .progress-bar {
        transition: none;
    }
}
.progress-bar-striped {
     background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
     background-size: var(--bs-progress-height) var(--bs-progress-height);
}
.progress-bar-animated {
    -webkit-animation: 1s linear infinite progress-bar-stripes;
    animation: 1s linear infinite progress-bar-stripes;
}
@media (prefers-reduced-motion:reduce) {
    .progress-bar-animated {
        -webkit-animation: none;
        animation: none;
    }
}
.f-s-8 { font-size: 8px !important; }
.f-s-9 { font-size: 9px !important; }
.f-s-10 { font-size: 10px !important; }
.f-s-11 { font-size: 11px !important; }
.f-s-12 { font-size: 12px !important; }
.f-s-13 { font-size: 13px !important; }
.f-s-14 { font-size: 14px !important; }
.f-s-15 { font-size: 15px !important; }
.f-s-16 { font-size: 16px !important; }
.f-s-17 { font-size: 17px !important; }
.f-s-18 { font-size: 18px !important; }
.f-s-19 { font-size: 19px !important; }
.f-s-20 { font-size: 20px !important; }

.nation-row {
    --bs-gutter-x: 20px;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}
.nation-row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
}

.mnrl-col,
.nation-col {
    /*flex: 0 0 auto;*/
    /*width: 16.66666667%;*/
    /*overflow:hidden;
    margin-bottom:15px;
    padding:0;
    position:relative;
    border-radius:4px;
    border:1px solid #efefef;*/
}
.mnrl-info ,
.nation-info {
    /*flex: 0 0 auto;*/
    /*width: 16.66666667%;*/
    overflow:hidden;
    margin-bottom:var(--spacing-4);
    padding: var(--spacing-3) var(--spacing-4);
    position:relative;
    border-radius:var(--spacing-3);
    border:1px solid var(--stroke-1);
    cursor:pointer;
    height: calc(100% - var(--spacing-4));
    background-color: var(--gray-scale-0);
    width:100%;
}

.nation-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    text-align: left;
}
.mnrl-info:hover,
.nation-info:hover {
    background:var(--gray-scale-10);
}
.nation-info.active {
    background:var(--gray-scale-10);
}
.mnrl-info:focus-visible,
.nation-info:focus-visible {
     outline: 3px dashed var(--gray-scale-100);
}
.nation-info .nation-flag {
    margin:0;
    height:50px;
    width:50px;
    min-width:50px;
    border-radius:50%;
    overflow: hidden;
    border:1px solid var(--stroke-1);
}
.nation-info .nation-flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.mnrl-info .mnrl-nm,
.nation-info .nation-nm {
    display: block;
    font:var(--label-sm);
    text-decoration: none;
}
.mnrl-info .mnrl-nm {
    text-align: center;
}
.nm-en {
    color: var(--gray-scale-60);
    font:var(--label-xs);
}
.mnrl-info .mnrl-symbl {
    text-align:center;
    font-size:20px;
    font-weight: 800;
    padding:10px 0;
}
.nation-flag img {
    /*width:auto;*/
    /*max-height:100%;*/
}
.nation-title {
    background-image: linear-gradient(45deg, var(--primary-80), var(--primary-60));
}
.nation-title h3 {
    color: vaR(--gray-scale-0);
}
@media (min-width:375px) {
    .mnrl-col-sx,
    .nation-col-sx {
        flex: 0 0 auto;
        width: 50%;
    }
}
@media (min-width:768px) {
    .mnrl-col-md,
    .nation-col-md {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
}
@media (min-width:992px) {
    .nation-col {
        flex: 0 0 auto;
        width: 25%;
    }
    .mnrl-col{
        flex: 0 0 auto;
        width: 16.66666667%;
    }
}

.btn-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

tfoot>tr th, tfoot>tr td {
    border-top: 1px solid var(--stroke-2) !important;
}
.foot-text {
    display: inline-block;
    font-size: 0.73em;
}

.table-scroll-box {
    border-bottom:1px solid #d5d5d5;
    border-top: 3px solid var(--stroke-2) !important;
}

.table-scroll-box table > thead tr:first-child th {
    border-top:0 !important;
}
.table-scroll-box table > tbody tr:last-child td {
    border-bottom:0 !important;
}
.table-scroll-box table {
    border-bottom:0 !important;
}

#tabIndxMin > .btn {
    padding: var(--spacing-3) var(--spacing-3) !important;
}

.file-item {
    float: left;
    width: 220px;
}

.list-head .submit-wrap {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    border:none!important;
}