.field-validation-error {
    width: 100%;
    margin-top: .25rem;
    font-size: .875em;
    color: var(--bs-form-invalid-color);
}

.sort-arrow{
    cursor: pointer;
}

.tk-table-wrap {
    min-height: 400px;
}

.tk-empty {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}


.form-control:focus,
.form-select:focus,
.form-control:active,
.form-select:active,
textarea.form-control:focus {
    border-color: #ced4da;
    box-shadow: none;
    outline: 0;
}

/* =========================================================
   CUSTOM SWEETALERT2
   ========================================================= */

/* ---------- Popup ---------- */

.custom-swal-popup {
    width: 640px !important;
    max-width: calc(100% - 40px) !important;
    padding: 32px 40px 30px !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15) !important;
    box-sizing: border-box !important;
}


/* =========================================================
   ICON
   ========================================================= */

.custom-swal-icon {
    width: 82px !important;
    height: 82px !important;
    min-width: 82px !important;
    min-height: 82px !important;
    margin: 0 auto 20px !important;
    border-width: 3px !important;
    border-style: solid !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
    transform: none !important;
}


    /* =========================================================
   QUESTION ICON
   ========================================================= */

    .custom-swal-icon.swal2-question {
        border-color: #c89424 !important;
        color: #c89424 !important;
    }

        .custom-swal-icon.swal2-question .swal2-icon-content {
            width: 100% !important;
            height: 100% !important;
            padding: 0 !important;
            margin: 0 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            box-sizing: border-box !important;
            font-size: 46px !important;
            font-weight: 600 !important;
            line-height: 1 !important;
            transform: translateY(-1px) !important;
        }


    /* =========================================================
   WARNING ICON
   ========================================================= */

    .custom-swal-icon.swal2-warning {
        border-color: #c89424 !important;
        color: #c89424 !important;
    }

        .custom-swal-icon.swal2-warning .swal2-icon-content {
            width: 100% !important;
            height: 100% !important;
            padding: 0 !important;
            margin: 0 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            box-sizing: border-box !important;
            font-size: 46px !important;
            font-weight: 600 !important;
            line-height: 1 !important;
            transform: translateY(-1px) !important;
        }


    /* =========================================================
   SUCCESS ICON
   ========================================================= */

    .custom-swal-icon.swal2-success {
        border-color: #27a844 !important;
        color: #27a844 !important;
    }


        /* Remove SweetAlert's default success circle/background */
        .custom-swal-icon.swal2-success .swal2-success-ring {
            display: none !important;
        }


        /* Success check container */
        .custom-swal-icon.swal2-success .swal2-success-fix,
        .custom-swal-icon.swal2-success .swal2-success-circular-line-left,
        .custom-swal-icon.swal2-success .swal2-success-circular-line-right {
            display: none !important;
        }


        /* Success check */
        .custom-swal-icon.swal2-success .swal2-success-line-tip,
        .custom-swal-icon.swal2-success .swal2-success-line-long {
            background-color: #27a844 !important;
            height: 4px !important;
            border-radius: 2px !important;
            position: absolute !important;
            z-index: 2 !important;
        }


        /* Short part of check */
        .custom-swal-icon.swal2-success .swal2-success-line-tip {
            width: 21px !important;
            left: 16px !important;
            top: 43px !important;
            transform: rotate(45deg) !important;
        }


        /* Long part of check */
        .custom-swal-icon.swal2-success .swal2-success-line-long {
            width: 38px !important;
            left: 29px !important;
            top: 36px !important;
            transform: rotate(-45deg) !important;
        }


    /* =========================================================
   ERROR ICON
   ========================================================= */

    .custom-swal-icon.swal2-error {
        border-color: #dc3545 !important;
        color: #dc3545 !important;
    }


        /* X container */
        .custom-swal-icon.swal2-error .swal2-x-mark {
            width: 100% !important;
            height: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            display: block !important;
            transform: none !important;
        }


        /* X lines */
        .custom-swal-icon.swal2-error .swal2-x-mark-line-left,
        .custom-swal-icon.swal2-error .swal2-x-mark-line-right {
            width: 38px !important;
            height: 4px !important;
            border-radius: 2px !important;
            background-color: #dc3545 !important;
            position: absolute !important;
            top: 38px !important;
            left: 20px !important;
            margin: 0 !important;
            z-index: 2 !important;
        }


        /* Left X */
        .custom-swal-icon.swal2-error .swal2-x-mark-line-left {
            transform: rotate(45deg) !important;
        }


        /* Right X */
        .custom-swal-icon.swal2-error .swal2-x-mark-line-right {
            transform: rotate(-45deg) !important;
        }


/* =========================================================
   TITLE
   ========================================================= */

.custom-swal-title {
    margin: 0 0 18px !important;
    padding: 0 !important;
    color: #202632 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 29px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.custom-swal-text {
    margin: 0 auto !important;
    padding: 0 !important;
    max-width: 540px !important;
    color: #707070 !important;
    font-family: "Work Sans", Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
}


/* =========================================================
   BUTTON CONTAINER
   ========================================================= */

.custom-swal-actions {
    width: 100% !important;
    margin-top: 30px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.custom-swal-confirm,
.custom-swal-deny {
    min-width: 105px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 22px !important;
    border: none !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    font-family: "Work Sans", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 44px !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
}


/* =========================================================
   CONFIRM BUTTON
   ========================================================= */

.custom-swal-confirm {
    background: #123f63 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(18, 63, 99, 0.18) !important;
}

    .custom-swal-confirm:hover {
        background: #0d3453 !important;
    }


/* =========================================================
   DENY BUTTON
   ========================================================= */

.custom-swal-deny {
    background: #eef2f1 !important;
    color: #123f63 !important;
    box-shadow: none !important;
}

    .custom-swal-deny:hover {
        background: #e3e9e7 !important;
    }


    /* =========================================================
   BUTTON FOCUS
   ========================================================= */

    .custom-swal-confirm:focus,
    .custom-swal-deny:focus {
        outline: none !important;
    }


/* =========================================================
   BACKDROP
   ========================================================= */

.swal2-container.swal2-backdrop-show {
    background: rgba(0, 0, 0, 0.42) !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .custom-swal-popup {
        width: calc(100% - 30px) !important;
        padding: 28px 22px 25px !important;
        border-radius: 16px !important;
    }

    .custom-swal-icon {
        width: 76px !important;
        height: 76px !important;
        min-width: 76px !important;
        min-height: 76px !important;
    }

    .custom-swal-title {
        font-size: 25px !important;
    }

    .custom-swal-text {
        font-size: 15px !important;
    }

    .custom-swal-actions {
        gap: 12px !important;
    }

    .custom-swal-confirm,
    .custom-swal-deny {
        min-width: 100px !important;
        padding: 0 16px !important;
    }
}