html {
    font-size: 14px;
}

.profile-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(400px,1fr));
    gap: 25px;

}

.profile-card {
    background: #f4f4f4;
    border-radius: 18px;
    padding: 25px;

}

    .profile-card h2 {
        font-size: 20px;
        margin-bottom: 25px;
        color: #333;
        display: flex;
        align-items: center;
        gap: 10px;
    }

.profile-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.profile-item {
    display: flex;
    flex-direction: column;
}

    .profile-item label {
        color: #999;
        font-size: 13px;
        margin-bottom: 6px;
    }

    .profile-item span {
        color: #222;
        font-weight: 600;
    }

.profile-full {
    grid-column: 1/3;
}


.log-container {
    height:500px;
    background: #f5f7fb;
    padding: 20px;
    overflow:hidden;
    overflow-y:auto;
}

.log-feed {
    max-width: 900px;
    margin: auto;
}

.log-activity {
    display: flex;
    gap: 18px;
    margin-bottom: 22px;
}

.log-avatar {
    flex-shrink: 0;
}

.log-avatar img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid white;
    box-shadow: 0 5px 15px rgba(0,0,0,.12);
}

.log-content {
    flex: 1;
    background: white;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.07);
}

.log-header {
    padding: 18px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ececec;
}

.log-user h3 {
    font-size: 17px;
    color: #222;
    margin-bottom:0px;
}

.log-user small {
    color: #888;
}

.log-badge {
    padding: 6px 14px;
    border-radius: 30px;
    color: white;
    font-size: 12px;
    font-weight: 600;
}

.log-login {
    background: #16a34a;
}

.log-update {
    background: #2563eb;
}

.log-delete {
    background: #dc2626;
}

.log-create {
    background: #f59e0b;
}

.log-body {
    padding: 15px;
}

    .log-body p {
        margin-top: -25px;
        white-space: pre-line;
        line-height: 1.7;
        color: #444;
        margin-bottom: -5px;
    }

.log-highlight {
    color: #2563eb;
    font-weight: 600;
}

.log-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

.log-meta div {
    background: #f7f8fb;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    color: #666;
}

.log-meta i {
    margin-right: 6px;
    color: #2563eb;
}

.log-footer {
    background: #fafafa;
    padding: 14px 22px;
    display: flex;
    justify-content: space-between;
    color: #888;
    font-size: 13px;
}

    .log-footer span i {
        margin-right: 5px;
    }

.strength-bar {
    height: 3px;
    margin-top: 10px;
    border-radius: 4px;
    background: #e0e0e0;
    overflow: hidden;
}

.strength-fill {
    height: 100%;
    width: 0;
    transition: .3s;
}

.message {
    margin-top: 5px;
    font-size: 10px;
}
.home-div-container {
    position: relative; 
    width: 100%;
    height: 100%;
    overflow: hidden;
}

    .home-div-container img {
        position:fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1; 
    }

.overlay-white {
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(244,244,244, 0.7);
    height: 100%;
    width: 100%;
    z-index: 2;
}
.segment {
    display: inline-flex;
    border: 1px solid gainsboro;
    border-radius: 5px;
    width: 100%;
    overflow: hidden;
    user-select: none;
    height: 40px;
}

    .segment input {
        display: none;
        transition: 0.5s;
    }

    .segment label {
        text-align: center;
        align-content:center;
        cursor: pointer;
        background: #fff;
        width: 50%;
    }

    .segment input:checked + label {
        background: #01356f;
        color: #fff;
    }

.modal-content {
    background: #fff;
    width: 90%;
    max-width: 800px;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,.2);
    animation: slideDown .3s ease;
    box-sizing: border-box;
}

.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #01356f;
    border-start-end-radius:10px;
    border-start-start-radius:10px;
    color:#fff;
}

.modal-title {
    font-size: 18px;
    font-weight: 600;
}

.close {
    font-size: 24px;
    cursor: pointer;
    color: #fff;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

.soa-container {
    margin: auto;
}

.soa-item {
    position: relative;
    background: #fff;
    padding: 18px;
    transition:0.5s;
    border-top:1px solid gainsboro
}
    .soa-item:hover {
        background-color: #f5f5f5;
    }
.soa-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.soa-date-badge {
    background: #eef5ff;
    color: #0d6efd;
    padding: 8px 14px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
}

.soa-balance {
    text-align: right;
}

    .soa-balance small {
        display: block;
        color: #888;
    }

    .soa-balance strong {
        color: #198754;
        font-size: 22px;
    }

.soa-description {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
}

.soa-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 12px;
}

.soa-info {
    background: #f8fafc;
    border-radius: 10px;
    padding: 10px;
}

    .soa-info label {
        display: block;
        font-size: 12px;
        color: #888;
        margin-bottom: 4px;
    }

    .soa-info span {
        font-size: 14px;
        font-weight: 600;
    }

.soa-status {
    display: inline-block;
    margin-top: 15px;
    padding: 8px 14px;
    border-radius: 30px;
    background: #fff8e1;
    color: #f57c00;
    font-size: 13px;
    font-weight: 600;
}

    .close:hover {
        color: #f9fafb;
    }

.modal-body {
    padding: 20px;
    line-height: 1.6;
    position:relative;
}

.modal-footer {
    padding: 30px;
    border-top: 1px solid #eee;
    text-align: left;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.padding-15 {
padding:10px 15px;
min-width:100px;
}
.modal-fade {
    display: none;
    position: fixed;
    z-index: 1000;
    padding-top: 20px;
    left: 0;
    top: 0;
    transition: opacity 0.5s ease-in-out;
    width: 100%;
    height: 100vh;
    overflow: auto;
    opacity: 1;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.3);
}

    .modal-fade.show {
        display: block;
    }
.fade-out {
    opacity: 0;
}

.center-top {
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
    z-index: 1000;
}
.center-top-modal {
    height: 100vh;
    width: 100%;
    padding-top:100px;
    justify-content: center;
    display: flex;
    z-index: 1000;
}
.loading-spinner {
    font-size: 50px;
    color: #ffffff;
}
@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    background: #f4f4f4;
    color: #333;
    overflow: hidden;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}


/** {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}*/

/* TOP NAVBAR */
.topbar {
    background: #fff;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    border-bottom: 1px solid #ddd;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

.logo {
    font-size: 38px;
    color: #6ab344;
    font-weight: bold;
}

.nav-links {
    display: flex;
    gap: 35px;
    margin-left: 30px;
}

.nav-links-menu {
    cursor: pointer;
    color: gray;
    font-size: 15px;
    font-weight: 600;
    position: relative;
    padding: 10px 0px;
}

    .nav-links-menu:hover {
        color: dimgray;
    }

    .nav-links-menu.active {
        color: #1f8f2c;
    }

.option-menu-mobile {
    position: relative;
    overflow: hidden;
    transition: 0.5s;
    height: 35px;
}
    .option-menu-mobile .down-right {
        transition: transform 0.3s ease;
        display: inline-block;
    }

        .option-menu-mobile .down-right.rotate {
            transform: rotate(180deg);
        }

.div-sidebar {
    display: none;
    left: -330px;
    top: 70px;
    width: 320px;
    height: 100vh;
    position: absolute;
    padding-top: 20px;
    padding-bottom: 80px;
    background-color: #f9f9f9;
    border: 1px solid gainsboro;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    list-style: none;
    transition: 0.5s;
    z-index: 1000;
    overflow: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.option-menu-btn {
    cursor: pointer;
    color: gray;
    font-size: 15px;
    font-weight: 600;
    position: relative;
    padding: 10px 0px;
    user-select:none;
}

    .option-menu-btn:hover {
        color: dimgray;
    }

    .option-menu-btn.active {
        color: #1f8f2c;
    }

.nav-links-menu-dropdown {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    list-style: none;
    margin-top: 5px;
    border: 1px solid gainsboro;
    transition:0.5s;
    padding:2px 0px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.nav-links-menu-dropdown-item {
    cursor: pointer;
    color: gray;
    padding: 7px 10px;
    background-color: #f9f9f9;
    transition: 0.5s;
    white-space: nowrap;
}

    .nav-links-menu-dropdown-item:hover {
        cursor: pointer;
        color: #01356f;
        background-color: #f6c014;
    }

.force-hide {
    display: none !important;
}
/* Show the dropdown when the parent nav-item is hovered */
.nav-links-menu:hover .nav-links-menu-dropdown {
    display: block;
}

.top-left {
    display: flex;
    align-items: center;
}
.option-menu-container {
    position: relative;
}

.action-btn {
    width: 35px;
    height: 35px;
    border: none;
    border-radius: 7px;
    background: #f9f9f9;
    transition: .5s;
    font-weight: 600;
    user-select: none;
}

    .action-btn:hover {
        background: #e0e0e0;
    }

.option-menu {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    list-style: none;
    margin-top: 0px;
    min-width:150px;
    border: 1px solid gainsboro;
    transition: 0.5s;
    padding: 2px 0px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    z-index:100;
    right:0px;
}

.option-menu-item {
    cursor: pointer;
    color: gray;
    padding: 7px 10px;
    background-color: #f9f9f9;
    transition: 0.5s;
    white-space: nowrap;
   font-weight:600;
   user-select:none;
   font-size:14px;
}

    .option-menu-item:hover {
        cursor: pointer;
        color: #01356f;
        background-color: #f6c014;
    }

    .option-menu-item i {
        margin-right: 10px;
        color: inherit;
        font-size: 12px;
    }

.top-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.search-box {
    background: #f3f3f3;
    border-radius: 25px;
    padding: 10px 15px;
    width: 220px;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .search-box input {
        border: none;
        outline: none;
        background: transparent;
        width: 100%;
    }

.icon {
    position: relative;
    color: #777;
    cursor: pointer;
}

.badge {
    position: absolute;
    top: -8px;
    right: -10px;
    background: #1f8f2c;
    color: white;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-small {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
    cursor:pointer;
}
/* HERO HEADER */
.hero {
    background: #01356f;
    padding: 20px 50px;
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 340px;
    padding-right:340px;
    color: white;
    width: 100%;
}
    .hero .div-container {
        width: 1200px;
        align-items: center;
        display: flex
    }

    .hero .div-container .div-title {
        width:100%;
    }

        .hero .div-container .div-title .div-new {
            float:right;
        }
.profile-pic {
    position: absolute;
    left: 90px;
    top: 20px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    border: 4px solid #fff;
    object-fit: cover;
}

.hero h1 {
    font-size: 48px;
    margin-bottom: 10px;
}

.hero p {
    font-size: 24px;
    opacity: 0.95;
}
/* TABS */
.tabs {
    background: #01356f;
    display: flex;
    gap: 40px;
    padding-left: 300px;
    padding-bottom: 18px;
}

    .tabs div {
        text-decoration: none;
        color: white;
        font-size: 16px;
        padding: 12px 10px;
        cursor:pointer;
        user-select:none;
    }

        .tabs div.active {
            background: white;
            color: #148c18;
            border-radius: 4px;
            font-weight: bold;
        }

.input-error {
    border: 1px solid indianred;
}
.layout-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.container-main {
    flex: 1;
    margin-top: 70px;
    overflow-y: auto;
}
/* MAIN */
.container {
    display: flex;
    padding: 30px 40px;
    gap: 30px;
    overflow: hidden;
}
/* SIDEBAR */
.sidebar {
    width: 280px;
    background: #fff;
    border-radius: 8px;
    padding: 25px;
    height: fit-content;
}

.sidebar-section {
    margin-bottom: 30px;
}

    .sidebar-section h4 {
        color: #01356f;
        margin-bottom: 15px;
    }

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    color: #666;
    font-size: 15px;
}

.manager {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .manager img {
        width: 45px;
        height: 45px;
        border-radius: 50%;
    }
/* CONTENT */
.content {
    flex: 1;
    background: #fff;
    border-radius: 8px;
    padding: 30px;
    width: 1200px;
    max-width: 1200px;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #01356f;
    margin-bottom: 25px;
    font-size: 30px;
}

.card {
    margin-bottom: 40px;
}

.btn-yellow {
    height: 50px;
    background-color: #f6c014;
    color: #01356f;
    font-weight: bold;
    font-size: 16px;
    border: 1px solid #f6c014;
    border-radius: 5px;
    width: 100%;
    transition: 0.5s;
    cursor: pointer;
    min-width: 200px;
}

.fit-content{
    display:inline-block;
    max-width:100px;
}

.btn-yellow:hover {
    color: #01356f;
    background-color: #ddac12;
}

.btn-yellow:active {
    background-color: #f6c014;
    color: #01356f;
}
.btn-blue {
    height: 50px;
    background-color: #01356f;
    color: #ffffff;
    font-weight: bold;
    font-size: 16px;
    border: 1px solid #01356f;
    border-radius: 5px;
    width: 100%;
    transition: 0.5s;
    cursor: pointer;
    min-width: 200px;
}

    .btn-blue:hover {
        color: #01356f;
        background-color: #ffffff;
    }

    .btn-blue:active {
        background-color: #01356f;
        color: #ffffff;
    }
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

    .card-header h3 {
        font-size: 22px;
    }

.update-btn {
    color: #0d74d1;
    cursor: pointer;
    font-weight: 600;
    user-select:none;
}

.green-dot {
    width: 10px;
    height: 10px;
    background: #33b44a;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}

.link {
    color: #0d74d1;
    cursor: pointer;
}

.btn-menu {
    background-color: #f6c014;
    border: 1px solid #f6c014;
    padding: 5px 15px;
    cursor: pointer;
    white-space: nowrap;
    color: #01356f;
    transition:0.5s;
}
    .btn-menu:hover {
        border: 1px solid #ffffff;
    }
    .btn-menu:active {
        border: 1px solid #ffffff;
        background-color:#ffffff;

    }
    /* Leave Cards */
    .stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        margin-bottom: 15px;
    }
.margin-10{
    margin-right:10px;
}
.width-80{
    width:80px;
}
.hidden{
    display:none;
}
.container-attachment {
    margin-top: 20px;
    border: 1px solid gainsboro;
    border-radius: 5px;
    padding: 0px;
    background-color: #f9fafb;
    display: flex;
    position: relative;
}
    .container-attachment .div-pic {
        display: inline-block;
        height: 70px;
        margin-left:10px;
        width: 70px;
        border-end-start-radius: 5px;
        border-start-start-radius: 5px;
        text-align:center;
        align-content:center;
    }
    .container-attachment a {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: 5px;
    }
    .container-attachment .div-pic i {
        font-size: 35px;
        color: red;
    }
    .container-attachment .div-content {
        display: inline-block;
        padding: 10px 0px;
        align-content: center;
        width:100%;
    }
    .container-attachment .div-content .size {
        color:dimgray;
        font-size:10px;
    }
    .container-attachment .div-close {
        display: inline-block;
        align-content: start;
        text-align: center;
        padding: 15px;
    }
    .container-attachment .div-close i {
       cursor:pointer;
       padding:5px;
       transition:0.5s;
    }
        .container-attachment .div-close i:hover {
           color:gray;
        }
        .container-attachment .div-close i:active {
            color: dodgerblue;
        }
.preview-area {
    margin-top:-15px;
    width: 100%;
    height: 569px;
    display: flex;
    align-items: center;
    justify-content: center;
}

iframe {
    width: 100%;
    height: 100%;
    border: none;
}
.stat {
    background: #f9fafb;
    padding: 12px;
    border-radius: 10px;
    text-align: center;
    transition: 0.5s;
    border: 2px solid #f9fafb;
    cursor:pointer;
    margin-bottom:20px;
    user-select:none;
}


.stat:hover {
    border:2px solid gainsboro;
}

    .stat:active {
        border: 2px solid dodgerblue;
    }
    .stat h3 {
        margin: 0;
        font-size: 18px;
    }

    .stat span {
        font-size: 12px;
        color: #6b7280;
    }

table {
    width: 100%;
    border-collapse: collapse;
}

thead {
    background-color: #f6c014;
    color: #01356f;
}

    thead th {
        padding: 16px;
        text-align: left;
        font-size: 12px;
        font-weight: bold;
        text-transform: uppercase;
        background-color: #f6c014;
    }

.td-bold-upper-12 {
    padding: 16px;
    text-align: left;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}
.table-footer {
    text-align: left;
    font-weight: bold;
    text-transform: uppercase;
    background-color: #f9fafb;
}

tbody tr.main-row:hover {
    background: #f8fafc;
}

tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid #edf2f7;
}

.detail-row td {
    background: #fafafa;
    border-bottom: 2px solid #e2e8f0;
    padding: 12px 16px 16px;
}

td.action-default {
    display: block;
    padding-left: 0;
    padding-right: 0;
    max-width: 35px;
    text-align:center;
}

td.action-main {
    display: block;
    padding-left: 0;
    padding-right: 0;
    max-width: 35px;
}
.tr-mobile-only {
    display: none;
}
.search-box {
    position: absolute;
    padding: 0;
    overflow: auto;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
    display: none;
    z-index: 9999;
    max-height:255px;
    overflow:hidden;
    overflow-y:auto;
}

.search-item {
    cursor: pointer;
    color: gray;
    padding: 7px 10px;
    background-color: #f9f9f9;
    transition: 0.5s;
    white-space: nowrap;
    font-weight: 600;
    user-select: none;
}

    .search-item:hover {
        cursor: pointer;
        color: #01356f;
        background-color: #f6c014;
    }

.no-result {
    padding: 10px;
    color: #999;
}

    td.action {
        display: none;
    }

.description {
    color: #64748b;
    line-height: 1.6;
    font-size: 14px;
    white-space: pre-line;
}
.description .header{
    font-weight:bold;
    margin-top:-20px;
}
.description .caption{
    margin-top:-22px;
    margin-bottom:-20px;
}
.remarks {
    color: #64748b;
    line-height: 1.6;
    font-size: 14px;
    white-space: pre-line;
}

    .remarks .header {
        font-weight: bold;
        margin-top: -20px;
    }

    .remarks .caption {
        margin-top: -22px;
        margin-bottom: -20px;
    }
    .balance {
        color: #dc2626;
        font-weight: 700;
    }

.table-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.partial {
    background: #fef3c7;
    color: #92400e;
}

.paid {
    background: #dcfce7;
    color: #166534;
}

.overdue {
    background: #fee2e2;
    color: #991b1b;
}

.status {
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.Approved, .Paid, .Checked, .Regular,.Received {
    background: #dcfce7;
    color: #166534;
}

.Verified,.Posted {
    background: #48A111;
    color: #e8fccf;
}

.Processing,.Partial,.Active,.Project-Based {
    background: #C3E0FF;
    color: #0E579E;
}
.Pending,.Probitionary {
    background: #fef3c7;
    color: #92400e;
}

.Rejected, .Due,.Trainee {
    background: #fee2e2;
    color: #991b1b;
}

.fa-eye {
    color: #022255;
    cursor: pointer;
}

.show-pass {
    position: absolute;
    top: 6px;
    right: 4%;
    z-index: 5;
}
.password-wrapper {
    position: relative;
}
.default-btn {
    background-color: #fff;
    border: 1px solid #e6e6e6;
    color: #333;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    margin-right: 5px;
    transition: 0.5s;
}

    .default-btn:hover {
        background-color: #e6e6e6;
        color: #333;
    }

.edit-btn {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    margin-right: 5px;
}

    .edit-btn:hover {
        background: #2563eb;
    }

.delete-btn {
    background: #ef4444;
    color: white;
    border: none;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
}

    .delete-btn:hover {
        background: #dc2626;
    }

.dropbtn {
    background-color: #ffffff;
    color: black;
    padding: 5px 15px;
    border-radius: 7px;
    font-size: 14px;
    border: 1px solid gainsboro;
    cursor: pointer;
    width: 100%;
    text-align: left;
    height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .dropbtn:focus {
        border:1px solid #0d6efd;
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25);
    }

.searchinput {
    box-sizing: border-box;
    font-size: 14px;
    padding: 14px 20px 12px 45px;
    border: none;
    border-bottom: 1px solid #ddd;
}

    .searchinput:focus {
        outline: 3px solid #ddd;
    }

.dropdown-c {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 55px;
}

.dropdown-content {
    top:45px;
    display: none;
    position: absolute;
    background-color: #ffffff;
    width: 100%;
    overflow: hidden;
    max-height: 275px;
    overflow-y: auto;
    border: 1px solid #ddd;
    z-index: 1001;
    border-end-end-radius: 3px;
    border-end-start-radius: 3px;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 5px 10px 0 rgba(0, 0, 0, 0.19);
}

    .dropdown-content input[type=text] {
        box-sizing: border-box;
        background-position: 14px 12px;
        background-repeat: no-repeat;
        font-size: 14px;
        width: 110%;
        padding: 14px 20px 12px 45px;
        margin-left: -25px;
        border: none;
        border-bottom: 1px solid #ddd;
    }

        .dropdown-content input[type=text]:focus {
            outline: 3px solid #ddd;
        }

    .dropdown-content div div {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        font-size: 14px;
        width: 100%;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.dropdown-c div div:hover {
    background-color: #f6c014;
    color: #01356f;
}

.dropdown-content.show {
    display: block;
}

.dropdown-content.hide {
    display: none;
}

.search-wrapper {
    position: relative;
    width: 100%;
}

.result-box {
    position: absolute;
    width: 100%;
    background: #fff;
    border: 1px solid #dee2e6;
    border-top: none;
    max-height: 220px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.result-item {
    padding: 10px 15px;
    cursor: pointer;
    transition: 0.2s;
}

    .result-item:hover {
        background: #f1f5ff;
        color: #0d6efd;
    }

.label-drag {
    display: block;
    position: relative;
    background-color: #025bee;
    color: #ffffff;
    font-size: 1.1em;
    text-align: center;
    width: 16em;
    padding: 1em 0;
    border-radius: 0.3em;
    margin: 0 auto 1em auto;
    cursor: pointer;
    user-select:none;
}

.container-drag {
    box-sizing: border-box;
    margin-top: 20px;
    outline: 1px solid gainsboro;
    padding: 40px 0 20px 0;
    border-radius: 10px;
    transition: 0.2s;
}

    .container-drag.active {
        outline: 3px dashed #025bee;
        outline-offset: -3px;
    }
.input-group-text{
    border-end-end-radius:0px;
    border-start-end-radius:0px;
}
.hide-on-mobile{
    display:block;
}
.show-on-mobile {
    display: none;
}
.text-label {

}
td[contenteditable="true"] {
    cursor: text;
}

    td[contenteditable="true"]:focus {
        outline: none;
        background: #fff;
        box-shadow: inset 0 0 0 2px #01356f;
    }

.td-error {
    outline: none;
    background: #fff;
    box-shadow: inset 0 0 0 2px #CD5C5C;
}
.fields {
    padding: 20px;
}

.email-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ececec;
}

    .email-row label {
        width: 70px;
        font-weight: 600;
        color: #555;
    }

    .email-row input {
        flex: 1;
        border: none;
        outline: none;
        padding: 14px 0;
        font-size: 15px;
    }

.email-links {
    display: flex;
    gap: 15px;
}
.email-hidden{
    display:none;
}

    .email-links div {
        text-decoration: none;
        cursor: pointer;
        font-size: 14px;
        font-weight: bold;
        user-select: none;
        color: #2563eb;
    }

.email-toolbar {
    display: flex;
    gap: 8px;
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
    background: #fafafa;
    flex-wrap: wrap;
}

    .email-toolbar button {
        border: none;
        background: white;
        border: 1px solid #ddd;
        width: 38px;
        height: 38px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 16px;
    }

        .email-toolbar button:hover {
            background: #f0f4ff;
        }

.email-editor {
    min-height: 320px;
    padding: 20px;
    outline: none;
    font-size: 15px;
    line-height: 1.7;
}

.email-attachments {
    padding: 15px 20px;
    border-top: 1px solid #eee;
}

.email-ttachments ul {
    margin-top: 10px;
    list-style: none;
}

.email-attachments li {
    padding: 6px 0;
    color: #555;
}

.email-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-top: 1px solid #eee;
}

.email-left-buttons {
    display: flex;
    gap: 12px;
}

.email-btn {
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

.email-send {
    background: #2563eb;
    color: white;
}

    .email-end:hover {
        background: #1d4ed8;
    }

.email-draft {
    background: #f1f5f9;
}

.email-discard {
    background: #ef4444;
    color: white;
}

    .email-discard:hover {
        background: #dc2626;
    }


@media (max-width: 768px) {
    .profile-cards {
        grid-template-columns: 1fr;
    }

    .profile-info {
        grid-template-columns: 1fr;
    }

    .profile-full {
        grid-column: auto;
    }
    .div-sidebar {
    display:block;
    }
    .top-left {
        margin-left: -30px;
        margin-top: -10px;
    }

    .nav-links {
        display: none;
    }

    .container {
        flex-direction: column;
        min-width: 100%;
        padding: 10px 0;
        margin: 0;
    }

    .content {
        width: 100%;
        padding: 10px;
    }

    .sidebar {
        width: 100%;
    }

    .hero {
        padding-left: 30px;
        padding-top: 120px;
        height: auto;
        padding-bottom: 30px;
    }

    .profile-pic {
        position: relative;
        left: 0;
        top: 0;
        margin-bottom: 20px;
    }

    .tabs {
        padding-left: 30px;
        flex-wrap: wrap;
    }

    thead {
        display: none;
    }

    table,
    tbody,
    tr,
    td {
        display: block;
        width: 100%;
    }

    .main-row {
        background: white;
        margin: 0px;
        border-radius: 12px 12px 0 0;
        overflow: hidden;
    }

        .main-row td {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

            .main-row td::before {
                content: attr(data-label);
                font-weight: 600;
                padding-right:60px;
                color: #64748b;
            }

    .detail-row {
        margin: 0px;
    }

        .detail-row td {
            border-bottom: none;
        }

    td.action-main {
        display: none;
    }

    td.action, td.action-default {
 
        background-color: #ffffff;
        border-bottom: 2px solid gainsboro;
        text-align: right;
    }
    .td.action-default {

        background-color: #ffffff;
        border-bottom: 2px solid gainsboro;
        text-align: right;
    }

    td.last-item {
        border-bottom: 2px solid gainsboro;
    }
    .hide-on-mobile {
        display: none;
    }
    .show-on-mobile {
        display: block;
    }
    .text-label{
        margin-bottom:5px;
    }
    .tr-mobile-only {
        display: block;
    }
    .tr-desktop-only {
        display: none;
    }
}