.col-1 {
    width: calc((100% / 12) * 1) !important;
}

.col-2 {
    width: calc((100% / 12) * 2) !important;
}

.col-3 {
    width: calc((100% / 12) * 3) !important;
}

.col-4 {
    width: calc((100% / 12) * 4) !important;
}

.col-5 {
    width: calc((100% / 12) * 5) !important;
}

.col-6 {
    width: calc((100% / 12) * 6) !important;
}

.col-7 {
    width: calc((100% / 12) * 7) !important;
}

.col-8 {
    width: calc((100% / 12) * 8) !important;
}

.col-9 {
    width: calc((100% / 12) * 9) !important;
}

.col-10 {
    width: calc((100% / 12) * 10) !important;
}

.col-11 {
    width: calc((100% / 12) * 11) !important;
}

.col-12 {
    width: calc((100% / 12) * 12) !important;
}

.h-1 {
    height: calc((100% / 12) * 1) !important;
}

.h-2 {
    height: calc((100% / 12) * 2) !important;
}

.h-3 {
    height: calc((100% / 12) * 3) !important;
}

.h-4 {
    height: calc((100% / 12) * 4) !important;
}

.h-5 {
    height: calc((100% / 12) * 5) !important;
}

.h-6 {
    height: calc((100% / 12) * 6) !important;
}

.h-7 {
    height: calc((100% / 12) * 7) !important;
}

.h-8 {
    height: calc((100% / 12) * 8) !important;
}

.h-9 {
    height: calc((100% / 12) * 9) !important;
}

.h-10 {
    height: calc((100% / 12) * 10) !important;
}

.h-11 {
    height: calc((100% / 12) * 11) !important;
}

.h-12 {
    height: calc((100% / 12) * 12) !important;
}


.p-1 {
    padding: 10px !important;
    box-sizing: border-box !important;
}

.p-05 {
    padding: 5px !important;
    box-sizing: border-box !important;
}

.pt-1 {
    padding-top: 10px !important;
    box-sizing: border-box !important;
}

.pt-05 {
    padding-top: 5px !important;
    box-sizing: border-box !important;
}

.pr-1 {
    padding-right: 10px !important;
    box-sizing: border-box !important;
}

.pr-05 {
    padding-right: 5px !important;
    box-sizing: border-box !important;
}

.pb-1 {
    padding-bottom: 10px !important;
    box-sizing: border-box !important;
}

.pb-05 {
    padding-bottom: 5px !important;
    box-sizing: border-box !important;
}

.pl-1 {
    padding-left: 10px !important;
    box-sizing: border-box !important;
}

.pl-05 {
    padding-left: 5px !important;
    box-sizing: border-box !important;
}

.px-1 {
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
}

.px-05 {
    padding-left: 5px !important;
    padding-right: 5px !important;
    box-sizing: border-box !important;
}

.py-1 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    box-sizing: border-box !important;
}

.m-0 {
    margin: 0px !important;
}

.m-1 {
    margin: 10px !important;
}

.m-05 {
    margin: 5px !important;
}

.mb-1 {
    margin-bottom: 10px !important;
}

.mb-2 {
    margin-bottom: 20px !important;
}

.gap-1 {
    gap: 10px !important;
}

.gap-05 {
    gap: 5px !important;
}

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

.flex-wrap {
    flex-wrap: wrap !important;
}

.justify-content-start {
    justify-content: flex-start !important;
}

.justify-content-center {
    justify-content: center !important;
}

.justify-content-end {
    justify-content: flex-end !important;
}

.justify-content-space-between {
    justify-content: space-between;
}

.align-items-start {
    align-items: flex-start !important;
}

.align-items-center {
    align-items: center !important;
}

.align-items-end {
    align-items: flex-end !important;
}

.direction-column {
    flex-direction: column !important;
}

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

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

.scroll-y {
    overflow-y: auto !important;
}

    .scroll-y::-webkit-scrollbar {
        width: 10px;
    }

    .scroll-y::-webkit-scrollbar-track {
        background-color: #8b8f91;
        border-radius: 5px;
    }

    .scroll-y::-webkit-scrollbar-thumb {
        background-color: #2c7be5;
        border-radius: 5px;
    }

.form-input {
    width: 100% !important;
    height: 30px !important;
    outline: none !important;
    border: 1px solid #D1D7DB !important;
    border-radius: 5px !important;
    box-sizing: border-box !important;
    padding-left: 10px !important;
    font-size: 1.3em !important;
    font-family: inherit;
}

.form-label {
    font-size: 1.2em !important;
    font-weight: 600 !important;
    margin-bottom: 5px !important;
}

.form-select {
    width: 100% !important;
    height: 30px !important;
    outline: none !important;
    border: 1px solid #D1D7DB !important;
    border-radius: 5px !important;
    box-sizing: border-box !important;
    font-family: inherit;
}

.data-table {
    width: 100% !important;
    border-collapse: collapse;
}

    .data-table thead {
        width: 100% !important;
        background-color: #D1D7DB;
        height: 35px;
        position: sticky;
        top: 0px;
        left: 0px;
    }

    .data-table tbody {
        border: 1px solid #D1D7DB;
        width: 100% !important;
    }

        .data-table tbody tr {
            width: 100% !important;
            height: 35px;
        }

            .data-table tbody tr td {
                border: 1px solid #D1D7DB;
                text-align: center;
            }

                .data-table tbody tr td i {
                    cursor: pointer;
                    color: #EA4235;
                    font-size: 1.5em;
                }

.table-sm thead {
    height: 25px !important;
}

.table-sm tbody tr {
    height: 25px !important;
}

.table-print {
    font-size: 8px !important;
    border: 1px solid black !important;
}

    .table-print tr td {
        border: 1px solid black !important;
    }

.stock-table tr td {
    height: 100%;
    max-width: 300px !important;
    text-wrap: wrap;
}

.modal {
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0px;
    left: 0px;
}

    .modal .modal-fade {
        width: 350px;
        min-height: 150px;
        border-radius: 10px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: white;
        box-shadow: 0 7px 14px 0 rgba(65, 69, 88, 0.1), 0 3px 6px 0 rgba(0, 0, 0, 0.07);
        z-index: 2;
        box-sizing: border-box;
        padding: 10px;
    }

        .modal .modal-fade header {
            width: 100%;
            height: 35px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #D1D7DB;
            margin-bottom: 5px;
        }

            .modal .modal-fade header i {
                font-size: 2em;
                cursor: pointer;
                font-weight: 600;
            }

        .modal .modal-fade .content {
            width: 100%;
            height: calc(100% - 70px);
            overflow-y: auto !important;
        }

        .modal .modal-fade .data {
            width: 100%;
            height: calc(100% - 35px) !important;
        }

        .modal .modal-fade .content::-webkit-scrollbar {
            width: 5px;
        }

        .modal .modal-fade footer {
            width: 100%;
            height: 35px;
        }

#nisyeModal .modal-fade {
    height: calc(100% - 200px) !important;
    width: 450px !important;
}

.btn {
    outline: none;
    text-decoration: none;
    list-style: none;
    cursor: pointer;
    border: none;
    min-width: 80px;
    height: 35px;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 400;
    font-family: inherit;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgba(43, 45, 80, 0.1), 0 2px 5px 0 rgba(43, 45, 80, 0.08), 0 1px 1.5px 0 rgba(0, 0, 0, 0.07), 0 1px 2px 0 rgba(0, 0, 0, 0.08);
}

.btn-primary {
    background-color: #2c7be5;
}

.btn-success {
    background-color: #00D27A;
}

.btn-danger {
    background-color: #EA4235;
}

.font-large {
    font-size: 1.2em;
}

.color-primary {
    color: #2c7be5 !important;
}

.success {
    background-color: #00D27A !important;
}