/* 마진 유틸리티 클래스 - 픽셀 기반 */

/* 4px */
.m-4 {
    margin: 4px;
}
.mt-2, .my-2 {
    margin-top: 2px;
}
.mb-2, .my-2 {
    margin-bottom: 2px;
}

.mt-4, .my-4 {
    margin-top: 4px;
}

.mr-4, .mx-4 {
    margin-right: 4px;
}

.mb-4, .my-4 {
    margin-bottom: 4px;
}

.ml-4, .mx-4 {
    margin-left: 4px;
}

/* 8px */
.m-8 {
    margin: 8px;
}

.mt-8, .my-8 {
    margin-top: 8px;
}

.mr-8, .mx-8 {
    margin-right: 8px;
}

.mb-8, .my-8 {
    margin-bottom: 8px;
}

.ml-8, .mx-8 {
    margin-left: 8px;
}

/* 10px */
.m-10 {
    margin: 10px;
}

.mt-10, .my-10 {
    margin-top: 10px;
}

.mr-10, .mx-10 {
    margin-right: 10px;
}

.mb-10, .my-10 {
    margin-bottom: 10px;
}

.ml-10, .mx-10 {
    margin-left: 10px;
}

/* 12px */
.m-12 {
    margin: 12px;
}

.mt-12, .my-12 {
    margin-top: 12px;
}

.mr-12, .mx-12 {
    margin-right: 12px;
}

.mb-12, .my-12 {
    margin-bottom: 12px;
}

.ml-12, .mx-12 {
    margin-left: 12px;
}

/* 16px */
.m-16 {
    margin: 16px;
}

.mt-16, .my-16 {
    margin-top: 16px;
}

.mr-16, .mx-16 {
    margin-right: 16px;
}

.mb-16, .my-16 {
    margin-bottom: 16px;
}

.ml-16, .mx-16 {
    margin-left: 16px;
}

/* 20px */
.m-20 {
    margin: 20px;
}

.mt-20, .my-20 {
    margin-top: 20px;
}

.mr-20, .mx-20 {
    margin-right: 20px;
}

.mb-20, .my-20 {
    margin-bottom: 20px;
}

.ml-20, .mx-20 {
    margin-left: 20px;
}

/* 22px */
.m-22 {
    margin: 20px;
}

.mt-22, .my-22 {
    margin-top: 20px;
}

.mr-22, .mx-22 {
    margin-right: 20px;
}

.mb-22, .my-22 {
    margin-bottom: 20px;
}

.ml-22, .mx-22 {
    margin-left: 20px;
}

/* 24px */
.m-24 {
    margin: 24px;
}

.mt-24, .my-24 {
    margin-top: 24px;
}

.mr-24, .mx-24 {
    margin-right: 24px;
}

.mb-24, .my-24 {
    margin-bottom: 24px;
}

.ml-24, .mx-24 {
    margin-left: 24px;
}

/* 48px */
.m-48 {
    margin: 48px;
}

.mt-48, .my-48 {
    margin-top: 48px;
}

.mr-48, .mx-48 {
    margin-right: 48px;
}

.mb-48, .my-48 {
    margin-bottom: 48px;
}

.ml-48, .mx-48 {
    margin-left: 48px;
}

/* 64px */
.m-64 {
    margin: 64px;
}

.mt-64, .my-64 {
    margin-top: 64px;
}

.mr-64, .mx-64 {
    margin-right: 64px;
}

.mb-64, .my-64 {
    margin-bottom: 64px;
}

.ml-64, .mx-64 {
    margin-left: 64px;
}


/* 자동 마진 */
.m-auto {
    margin: auto;
}

.mt-auto, .my-auto {
    margin-top: auto;
}

.mr-auto, .mx-auto {
    margin-right: auto;
}

.mb-auto, .my-auto {
    margin-bottom: auto;
}

.ml-auto, .mx-auto {
    margin-left: auto;
}

/* 마진 0 */
.m-0 {
    margin: 0;
}

.mt-0, .my-0 {
    margin-top: 0;
}

.mr-0, .mx-0 {
    margin-right: 0;
}

.mb-0, .my-0 {
    margin-bottom: 0;
}

.ml-0, .mx-0 {
    margin-left: 0;
}


/*fontSize*/
.fs-11 {
    font-size: 11px;
}

.fs-12 {
    font-size: 12px;
}

.fs-13 {
    font-size: 13px;
}

.fs-14 {
    font-size: 14px;
}
.fs-15 {
    font-size: 15px;
}
.fs-16 {
    font-size: 16px;
}

.fs-18 {
    font-size: 18px;
}

.fs-20 {
    font-size: 20px;
}

.fs-22 {
    font-size: 22px;
}

.fs-24 {
    font-size: 24px;
}

.fs-26 {
    font-size: 26px;
}

.fs-28 {
    font-size: 28px;
}

.fs-30 {
    font-size: 30px;
}

.fs-32 {
    font-size: 32px;
}


.badge {
    line-height: 1.2;
    --bs-badge-font-size: 87%;
}

.modal-dialog-scrollable .modal-body {
    overflow-x: hidden;
}



.span-green {
    color:green;
    font-weight:bold;
}
.span-blue {
    color: blue;
    font-weight: bold;
}
.span-gray {
    color: gray;
    font-weight: bold;
}

.linker, .linker-serial {
    color: #1A6DFF !important;
    font-weight:500;
    /*    background: #e7f3ff !important;*/
    /*    border: 1px solid #91caff !important;*/
    cursor: pointer;
   
}

    .linker:hover, .linker-serial:hover {
        /*        font-weight: bold;*/
        text-shadow: 0 0 0.6px currentColor;
        text-decoration: underline;
    }






/************** vertical timeline **************/
/*.verti-timeline {
    padding-left: 120px;
}

    .verti-timeline .event-list {
        border-left: 3px dashed var(--bs-gray-300);
        position: relative;
        padding: 0px 0px 30px 30px;
    }

        .verti-timeline .event-list:after {
            content: "";
            display: block;
            position: absolute;
            top: 6px;
            left: -6px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 2px solid #5b73e8;
            background-color: var(--bs-white);
        }

        .verti-timeline .event-list .event-date {
            display: inline-block;
            border-radius: 4px;
            background-color: rgba(91, 115, 232, 0.2);
            color: #5b73e8;
            padding: 2px 12px;
            position: absolute;
            left: -122px;
        }

        .verti-timeline .event-list:last-child {
            padding-bottom: 0;
        }


    .verti-timeline .event-inbound {
        border-left: 3px dashed var(--bs-gray-300);
        position: relative;
        padding: 0px 0px 30px 30px;
    }

        .verti-timeline .event-inbound:after {
            content: "";
            display: block;
            position: absolute;
            top: 6px;
            left: -6px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 2px solid #1f8627;
            background-color: var(--bs-white);
        }

        .verti-timeline .event-inbound .event-date {
            display: inline-block;
            border-radius: 4px;
            background-color: rgb(46, 182, 82, 0.20);
            color: #0b5817;
            padding: 2px 12px;
            position: absolute;
            left: -122px;
        }

        .verti-timeline .event-inbound:last-child {
            padding-bottom: 0;
        }

        .verti-timeline .event-inbound .qty {
            display: inline-block;
            position: absolute;
            top: 0;
            right: 10px;
            color: #0b5817;
        }



    .verti-timeline .event-outbound {
        border-left: 3px dashed var(--bs-gray-300);
        position: relative;
        padding: 0px 0px 30px 30px;
    }

        .verti-timeline .event-outbound:after {
            content: "";
            display: block;
            position: absolute;
            top: 6px;
            left: -6px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 2px solid #d93b1f;
            background-color: var(--bs-white);
        }

        .verti-timeline .event-outbound .event-date {
            display: inline-block;
            border-radius: 4px;
            background-color: rgba(255, 100, 50, 0.2);
            color: #ca251a;
            padding: 2px 12px;
            position: absolute;
            left: -122px;
        }

        .verti-timeline .event-outbound:last-child {
            padding-bottom: 0;
        }

        .verti-timeline .event-outbound .qty {
            display: inline-block;
            position: absolute;
            top: 0;
            right: 10px;
            color: #ca251a;
        }*/