﻿.MaxHightmodelTable{
    max-height:380px !important;
    overflow:auto !important
}
.clinthrs {
   width:180px !important
}
 .SetPriorityTitle {
    font-size: 16px;
    position: relative;
    top: -2px;
    color: #0d6efd;
}
.resouredetailsgroup:nth-child(odd) {
    background-color: #f8f9fa; 
}
.desc-wrapper {
    max-width: 300px;
    overflow: hidden;
    word-break: break-word;
    white-space: normal;
}

    .desc-wrapper * {
        max-width: 100%;
    }

#loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);  semi-transparent background 
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;  ensure it’s on top 
    pointer-events: auto;  block clicks 
}

 Centered loader box 
.loader-container {
    border-radius: 8px;
}



#loader-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: none; 
    align-items: center;
    justify-content: center;
    z-index: 99999;
}
.loader {
    width: fit-content;
    font-weight: bold;
    font-family: monospace;
    font-size: 30px;
    background: radial-gradient(circle closest-side,#000 94%,#0000) right/calc(200% - 1em) 100%;
    animation: l24 1s infinite alternate linear;
}

    .loader::before {
        content: "Loading...";
        line-height: 1em;
        color: #0000;
        background: inherit;
        background-image: radial-gradient(circle closest-side,#fff 94%,#000);
        -webkit-background-clip: text;
        background-clip: text;
    }

@keyframes l24 {
    100% {
        background-position: left
    }
}

/*mahesh */

.sub-icon {
    background: linear-gradient(135deg, #394CF3, #6f78ff);
    box-shadow: 0 10px 20px rgba(106, 111, 245, 0.3);
    padding: 0.5rem 8px;
    border-radius: 0.9rem;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1.0rem;
    font-size: 24px;
    color: #fff;
}



.btn-primary {
    background: linear-gradient(135deg, #4f5cff, #3b49ff) !important;
    color: #fff;
/*    display: inline-flex;*/
    align-items: center;
    gap: 10px;
    box-shadow: 0 6px 15px rgba(79, 92, 255, 0.35);
    transition: all 0.2s ease-in-out;
}

.btn-secondary {
    background: none !important;
    border: 1px solid #0d6efd;
    color: #000;
/*    display: inline-flex;*/
    align-items: center;
    gap: 10px;
    box-shadow: 0 6px 15px rgba(79, 92, 255, 0.35);
}

a.btn.btn-secondary:hover {
    color: #000;
}
.fw-bold {
    font-weight: 600 !important;
}

.btn-success {
    background: linear-gradient(135deg, #198754, #044829) !important;
    color: #fff;
/*    display: inline-flex;*/
    align-items: center;
    gap: 10px;
    box-shadow: 0 6px 15px rgb(22 127 79 / 37%);
    transition: all 0.2s ease-in-out;
}



.btn-info {
    background: #E0F2FE;
    border: none;
    font-weight: 500;
}
.bg-info {
    background: #E0F2FE !important;
    color: #3789B7;
    font-weight: 500;
}
.bg-warning {
    background: #FEF3C7 !important;
    color: #B5560D;
    font-weight: 500;
}
b, strong {
    font-weight: 600;
}

.bg-danger {
    font-weight: 500;
}

.bg-secondary {
    background: #F1F5F9 !important;
    color: #404D61;
    font-weight: 500;
}
.low {
    background: #D1FAE5 !important;
    color: #349778;
    font-weight: 500;
}
li.nav-item.dropdown:hover {
    background-color: #f5f5f5;
    border-radius: 0.4rem;
}
.btn-warning {
    background-color: #ffe69b;
}
th {
    font-weight: 600;
}


/*common cards css */
.Priority-card {
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 10px 25px rgba(0, 0, 0, 0.08);
    border: none;
}

    .Priority-card .card-header {
        background: linear-gradient(135deg, #7B3AED, #5046E5);
        border-radius: 16px 16px 0px 0px;
        border: none;
    }

.category-card {
    border-radius: 16px;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 10px 25px rgba(0, 0, 0, 0.08);
}

    .category-card .card-header {
        background: linear-gradient(135deg, #14B8A5,#10B981);
        border-radius: 16px 16px 0px 0px;
        border: none;
    }


.my-tickets-cards .col-md-3:nth-child(1) .card {
    background: #EDF4FE;
    border: none;
    color: #2439F2;
}

     .my-tickets-cards .col-md-3:nth-child(1) .card .icon-box {
        width: 40px;
        height: 40px;
        background: #818fff7a;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #2439f2;
        font-size: 24px;
    }


 .my-tickets-cards .col-md-3:nth-child(2) .card {
    background: #EAFDF3;
    border: none;
    color: #24C55F;
}

     .my-tickets-cards .col-md-3:nth-child(2) .card .icon-box {
        width: 40px;
        height: 40px;
        background: #B9F0CD;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #33C997;
        font-size: 24px;
    }


 .my-tickets-cards .col-md-3:nth-child(3) .card {
    background: #F6F4FF;
    border: none;
    color: #9D3CFF;
}

     .my-tickets-cards .col-md-3:nth-child(3) .card .icon-box {
        width: 40px;
        height: 40px;
        background: #9d3cff61;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #7f00ff;
        font-size: 24px;
    }

 .my-tickets-cards .col-md-3:nth-child(4) .card {
    background: #FFF4E2;
    border: none;
    color: #F59F0A;
}

     .my-tickets-cards .col-md-3:nth-child(4) .card .icon-box {
        width: 40px;
        height: 40px;
        background: #f59f0a87;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #f59f0a;
        font-size: 24px;
    }

 .card-bg {
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 10px 25px rgba(0, 0, 0, 0.08);
    border: none;
}


.daily-time-card {
    border-radius: 16px;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 10px 25px rgba(0, 0, 0, 0.08);
}

    .daily-time-card .card-header {
        background: linear-gradient(135deg, #09097985, #00d4ffab);
        border-radius: 16px 16px 0px 0px;
        border: none;
    }

.time-by-ticket-card {
    border-radius: 16px;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 10px 25px rgba(0, 0, 0, 0.08);
}

    .time-by-ticket-card .card-header {
        background: linear-gradient(135deg, #9b3d12ab, #ae8e1c78);
        border-radius: 16px 16px 0px 0px;
        border: none;
    }

.time-by-activity-card {
    border-radius: 16px;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 10px 25px rgba(0, 0, 0, 0.08);
}

    .time-by-activity-card .card-header {
        background: linear-gradient(135deg, #845ec2b0, #b39cd0);
        border-radius: 16px 16px 0px 0px;
        border: none;
    }
.ftr-icon-bg {
    width: 36px;
    height: 36px;
    background: #818fff7a;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2439f2;
    font-size: 22px;
}
.dataTables_filter {
    text-align: end !important;
    margin-right: 3px !important;
}

/*common cards css */



/* HOURS WORKED HOVER */

/*.eye-container {
    position: relative;
    display: inline-block;
}

.quick-reference-card {
    display: none;
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 420px;
    z-index: 999;
}

.eye-container:hover .quick-reference-card {
    display: block;
}*/

/* Eye icon attractive design */
.eye-view {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 23px;
    margin-left: 6px;
    border-radius: 50%;
    background: #e7f1ff;
    color: #0d6efd;
    cursor: pointer;
    transition: all 0.25s ease;
}

    /* Eye hover animation */
    .eye-view:hover {
        background: #0d6efd;
        color: #fff;
        transform: scale(1.15);
        box-shadow: 0 4px 10px rgba(13,110,253,0.35);
    }

/* Quick reference card hidden */
.quick-reference-card {
    display: none;
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 420px;
    z-index: 1000;
}

/* Show card when hovering eye */
.eye-view:hover .quick-reference-card {
    display: block;
}