* {
    /*font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
    /*font-size: 14px;*/
    /*line-height: 2.428;*/
}

/*-----------new ver---------------*/
.zn-page-topbar {
    /*make 100% transparent*/
    /*background-color: rgba(0, 0, 0, 0.19);*/
    /* Semi-transparent white background */
    background: rgba(255, 255, 255, 0.2);
    /* The "Glass" blur effect */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* For Safari support */
    /* Optional styling for better look */
    border: 0px solid rgba(255, 255, 255, 0.3);
    border-radius: 15px;
    box-shadow: 0 1px 0px rgba(0, 0, 0, 0.1);
}

.zn-page-title {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.card {
    /* Syntax: h-offset v-offset blur spread color */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
    transition: 0.3s; /* Smooth transition for hover effects */
    border-radius: 15px;
}

/* Optional: Add a "lift" effect on hover */
/*.card:hover {
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }*/

/* Apply to all DataTables */
table.dataTable tbody td {
}

/* Increase height for all DataTables headers */
table.dataTable thead th {
    vertical-align: middle; /* Ensure text stays centered vertically */
    text-align: center; /* Center header text horizontally */
}


/*-----------card---------------*/

/*-----------message display---------------*/
.msg-display-box {
    font-family: 'Courier New', Courier, monospace; /* Standard typewriter fonts */
    font-size: 14px; /* Slightly larger for better readability */
    background-color: transparent;
    color: #000000; /* Retro green text */
    padding: 20px;
    border-radius: 5px;
    /*white-space: pre-wrap;*/ /* Keeps line breaks and spaces intact */
}

    .msg-display-box::after {
        content: "_";
        animation: blink 1s infinite;
    }

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}
/*hide msg-display-box when invisible*/
.msg-display-box:not(:visible) {
    display: none;
}

/*-----------message display---------------*/

/*-----------side bar---------------*/
#sidebar {
    /* make transition fast and smooth */
    transition: width 0.1s ease;
}

/* Prevents content jumping during the slide */
.collapse-horizontal {
    height: auto;
    overflow: hidden;
    transition: width 0.1s ease;
}
/*-----------end of side bar---------------*/

/* 1. Define your new entry/exit animations */
@keyframes myCustomFadeIn {
    from {
        opacity: 0;
        transform: scale(1);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes myCustomFadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(1);
    }
}

/* Define the keyframes */
@keyframes pullRightOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(100vw); /* Move entirely off-screen to the right */
        opacity: 0;
    }
}

/* 2. Override Swal's default 'show' class */
.swal2-popup.swal2-show {
    animation: myCustomFadeIn 0.6s ease-out !important;
}

/* 3. Override Swal's default 'hide' class */
.swal2-popup.swal2-hide {
    /*animation: myCustomFadeOut 0.3s ease-in !important;*/
    animation: pullRightOut 0.6s forwards !important;
}


/*//------------------*/
.rotated180 {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

.rotated90 {
    transform: rotate(90deg);
    transition: transform 0.3s ease;
}

.rotated270 {
    transform: rotate(270deg);
    transition: transform 0.3s ease;
}

.docked-left {
    position: absolute; /* Position the span absolutely within the parent */
    left: 0; /* Docks it to the left edge */
    top: 0; /* Aligns to the top edge (adjust as needed for vertical placement) */
    padding: 10px; /* Add some padding for visual spacing */
}

.zoom-container {
    width: 200px;
    height: 200px;
    overflow: hidden;
}

.zoom-img {
    transition: transform 0.3s ease;
}

    .zoom-img:hover {
        transform: scale(2.5);
    }

.fullscreen-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: scale-down;
    z-index: 9999;
}

.suggestions-box {
    /*border: 0px solid #ccc;*/
    border-left: 1px solid #ccc !important;
    border-right: 1px solid #ccc !important;
    position: absolute;
    background: white;
    width: 200px;
    max-height: 150px;
    overflow-y: auto;
    z-index: 2000;
}

    .suggestions-box div {
        padding: 8px;
        cursor: pointer;
    }

        .suggestions-box div:hover {
            background-color: #f0f0f0;
        }

.hr-text {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    color: rgba(0, 0, 0, 0.5);
    margin: 8px 0px;
}

    .hr-text:before,
    .hr-text:after {
        content: "";
        flex-grow: 1;
        background: rgba(0, 0, 0, 0.10);
        height: 1px;
        font-size: 0px;
        line-height: 0px;
        margin: 0px 8px;
    }

.bx-spin-reverse {
    animation-direction: reverse; /* This makes it spin in the opposite direction */
}

.modal-header {
    box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px !important;
}

.modal-footer {
    box-shadow: rgba(33, 35, 38, 0.1) 0px 15px 15px -10px !important;
}

@media (min-width: 1200px) {
    .w37 {
        width: 37% !important;
    }
}

@media screen {
    #printSection {
        display: none;
    }
}

@media print {
    body * {
        visibility: hidden;
    }

    #printSection, #printSection * {
        visibility: visible;
    }

    #printSection {
        position: absolute;
        left: 0;
        top: 0;
    }
}

.x2 {
    transform: scale(1.5);
}

.x2c {
    transform: scale(1.5);
    text-align: center;
    align-horizontal: center;
}

.x2cLabel {
    display: inline-block;
    border: 0px solid #ccc;
    margin: 0px;
    width: 37px;
    height: 42px;
    padding-bottom: 10px;
    text-align: center;
    -ms-align-content: center;
    -webkit-align-content: center;
    align-content: center;
}

.bg-yellow {
    background-color: yellow;
}

.bg-yellow-subtle {
    background-color: #ffffef;
}

.dropdown-menu-center {
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, 0) !important;
}

input {
    border: solid 1px #ccc;
    border-radius: .5rem;
}

    input:focus {
        box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px !important;
    }

/* set checkbox height and width to 19px */
input[type="checkbox"] {
    width: 19px;
    height: 19px;
}

.form-control {
    border: solid 1px #ccc !important;
    border-radius: .5rem;
}

    .form-control:focus {
        border-color: #556ee6 !important;
        box-shadow: 0 0 0 0.2rem rgba(85, 110, 230, 0.14) !important;
    }

.form-select {
    border: solid 1px #ccc !important;
    border-radius: .5rem;
}

    .form-select:focus {
        border-color: #556ee6 !important;
        box-shadow: 0 0 0 0.2rem rgba(85, 110, 230, 0.14) !important;
    }

/*[class^='select2'] {
    border-top: 0px !important;
    border-left: 0px !important;
    border-right: 0px !important;
    border-bottom: solid 1px gainsboro !important;
}

.select2-container--default .select2-results > .select2-results__options {
    border: solid 2px skyblue !important;
    margin: 10px !important;
    padding: 1px !important;
}

.select2-search__field {
    border: solid 1px #ccc !important;
    border-radius: .25rem;
    margin: 0px !important;
    padding: 2px 6px !important;
}
*/
.dataTables_scrollBody {
    /*overflow: auto !important;*/
}
/*-------------------------*/

.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection {
    border-color: #556ee6 !important;
    box-shadow: 0 0 0 0.2rem rgba(85, 110, 230, 0.14) !important;
}


.select2.select2-container {
    width: 100% !important;
}

    .select2.select2-container .select2-selection {
        border: 1px solid #ccc;
        -webkit-border-radius: .5rem;
        -moz-border-radius: .5rem;
        border-radius: .5rem;
        height: 36px;
        margin-bottom: 15px;
        outline: none !important;
        transition: all .15s ease-in-out;
    }

        .select2.select2-container .select2-selection .select2-selection__rendered {
            color: #333;
            line-height: 34px;
            padding-right: 33px;
        }


    .select2.select2-container.select2-container--open .select2-selection.select2-selection--single {
        background: #f8f8f8;
    }

        .select2.select2-container.select2-container--open .select2-selection.select2-selection--single .select2-selection__arrow {
            -webkit-border-radius: 0 3px 0 0;
            -moz-border-radius: 0 3px 0 0;
            border-radius: 0 3px 0 0;
        }


    .select2.select2-container.select2-container--open .select2-selection.select2-selection--multiple {
        border: 1px solid #34495e;
    }

    .select2.select2-container .select2-selection--multiple {
        height: auto;
        min-height: 34px;
    }

        .select2.select2-container .select2-selection--multiple .select2-search--inline .select2-search__field {
            margin-top: 0;
            height: 32px;
        }

        .select2.select2-container .select2-selection--multiple .select2-selection__rendered {
            display: block;
            padding: 0 4px;
            line-height: 29px;
        }

        .select2.select2-container .select2-selection--multiple .select2-selection__choice {
            background-color: #f8f8f8;
            border: 1px solid #ccc;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            margin: 4px 4px 0 0;
            padding: 0 6px 0 22px;
            height: 24px;
            line-height: 24px;
            font-size: 12px;
            position: relative;
        }

            .select2.select2-container .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
                position: absolute;
                top: 0;
                left: 0;
                height: 22px;
                width: 22px;
                margin: 0;
                text-align: center;
                color: #e74c3c;
                font-weight: bold;
                font-size: 16px;
            }

.select2-container .select2-dropdown {
    background: transparent;
    border: none;
    margin-top: -11px;
}

    .select2-container .select2-dropdown .select2-search {
        padding: 0;
    }

        .select2-container .select2-dropdown .select2-search input {
            outline: none !important;
            border: 1px solid navy !important;
            border-bottom: none !important;
            padding: 4px 6px !important;
        }

    .select2-container .select2-dropdown .select2-results {
        padding: 0;
        box-shadow: rgba(33, 35, 38, 0.9) 0px 10px 10px -10px !important;
    }

        .select2-container .select2-dropdown .select2-results ul {
            background: #fff;
            border: 1px solid dodgerblue;
        }

            .select2-container .select2-dropdown .select2-results ul .select2-results__option--highlighted[aria-selected] {
                background-color: #3498db;
            }

/*-------------------------*/

.datepicker.dropdown-menu {
    top: 100% !important;
    z-index: 99999 !important;
    margin-left: 100px;
}

#select2Parent {
    position: relative;
}

#agencyselect2Parent {
    position: relative;
}

#select2Parent_ReqExpCat {
    position: relative;
}

#preloder {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999995;
    opacity: 0.1;
    background-color: #ffffff;
}

.loader {
    width: 21px;
    height: 21px;
    position: absolute;
    top: 142%;
    left: 5%;
    margin-top: -50px;
    margin-left: 10px;
    border-radius: 21px;
    animation: loader 0.9s linear infinite;
    -webkit-animation: loader 0.9s linear infinite;
}

.loaderLbl {
    background-color: #ffffff;
    display: none;
    z-index: 999997;
    width: 320px;
    height: 45px;
    position: fixed;
    top: 87%;
    left: 41%;
    padding-top: 14px;
    padding-left: 115px;
    padding-right: 0px;
    text-align: left;
    border-radius: 50px;
    border-bottom: 1px solid #ccc;
    color: black;
    font-weight: bold;
    font-size: 11px;
    opacity: 0.9;
    box-shadow: rgba(33, 35, 38, 0.9) 20px 20px -10px -10px !important;
    background-image: linear-gradient(to right, white, orange);
}

.loaderImg {
    position: absolute;
    top: 43%;
    left: 3%;
    padding-top: 10px;
    padding-right: 0px;
    text-align: end;
    border-radius: 5px;
    box-shadow: rgba(33, 35, 38, 0.9) 30px 20px 20px -10px !important;
}

@keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        border: 3px solid #056d4d;
        /* border: 4px solid #f44336; */
        border-left-color: transparent;
    }

    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        border: 3px solid #056d4d;
        /* border: 4px solid #673ab7; */
        border-left-color: transparent;
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        border: 3px solid #056d4d;
        border-left-color: transparent;
    }
}

@-webkit-keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
        border: 1px solid #056d4d;
        border-left-color: transparent;
    }

    50% {
        -webkit-transform: rotate(180deg);
        border: 1px solid #056d4d;
        border-left-color: transparent;
    }

    100% {
        -webkit-transform: rotate(360deg);
        border: 1px solid #056d4d;
        border-left-color: transparent;
    }
}

/*-----------------------------------------*/

/*-----------------------------------------*/

.tooltip {
    border-bottom: 1px dotted black;
}

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -60px;
        opacity: 0;
        transition: opacity 0.3s;
    }

        .tooltip .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }

    .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }


/* Style the entire internal editing area */
input[type="date"]::-webkit-datetime-edit {
    padding: 0 0.5rem;
}

/* Style specific fields: Day, Month, and Year */
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-year-field {
    padding: 0 4px;
}

/* Style the '/' or '-' separators */
input[type="date"]::-webkit-datetime-edit-text {
    padding: 0 1px;
}

/* Style the calendar icon button */
input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(0.5); /* Change icon color */
}


//-----------------------------------------
/* Custom tooltip styles */
.tooltip-container {
    position: relative;
    display: inline-block;
}

.tooltip-content {
    /* Hidden by default */
    visibility: hidden;
    opacity: 0;
    /* Sizing and Scrolling */
    width: 200px; /* Set a fixed width to force wrapping */
    max-height: 150px; /* Height at which scrolling begins */
    overflow-y: auto; /* Adds scrollbar only when needed */
    white-space: normal; /* Ensures text wraps to the next line */
    word-wrap: break-word; /* Breaks long words if necessary */
    /* Positioning */
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    /* Styling */
    background-color: #333;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    transition: opacity 0.3s;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

    .tooltip-content.show {
        visibility: visible;
        opacity: 1;
    }