/* My Hub basic layout */
.myhub-container{display:flex;min-height:520px;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}
.myhub-left{width:260px;background:#0f172a;color:#fff;padding:16px}
.myhub-brand{font-weight:700;font-size:20px;margin-bottom:12px}
.myhub-menu{list-style:none;margin:0;padding:0}
.myhub-menu li{padding:10px 12px;border-radius:10px;margin-bottom:6px;cursor:pointer;user-select:none}
.myhub-menu li:hover{background:#1f2937}
.myhub-menu li.active{background:#2563eb}
.myhub-right{flex:1;background:#f8fafc;padding:18px}
.myhub-panel{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.myhub-form{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.myhub-form input{flex:1;min-width:240px;padding:10px;border:1px solid #e5e7eb;border-radius:8px}
.myhub-form button{padding:10px 16px;border:none;border-radius:8px;background:#2563eb;color:#fff;font-weight:600;cursor:pointer}
.myhub-note{margin-top:8px;font-size:12px;color:#64748b}
#content-header{font-size:18px;font-weight:700;margin-bottom:10px}
table.myhub{width:100%;border-collapse:collapse}
table.myhub th,table.myhub td{border-bottom:1px solid #e5e7eb;padding:10px;text-align:left}
.myhub-tabs{display:flex;gap:8px;margin-bottom:12px}
.myhub-tabs button{padding:8px 10px;border:1px solid #e5e7eb;background:#fff;border-radius:8px;cursor:pointer}
.myhub-tabs button.active{background:#2563eb;color:#fff;border-color:#2563eb}
.myhub-pill{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px}
.myhub-pill.pending{background:#fef3c7}
.myhub-pill.process{background:#dbeafe}
.myhub-pill.done{background:#dcfce7}

/* Modal */
.myhub-modal{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(2,6,23,0.6);display:flex;align-items:center;justify-content:center;z-index:9999}
.myhub-modal-box{background:#fff;padding:18px;border-radius:12px;min-width:320px;max-width:680px;box-shadow:0 10px 40px rgba(2,6,23,0.4)}
.myhub-close{position:absolute;right:12px;top:8px;border:none;background:transparent;font-size:22px;cursor:pointer}
.myhub-profile-box{position:relative;padding:20px;max-height:80vh;overflow:auto}
.myhub-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px}
.myhub-btn{padding:8px 12px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;cursor:pointer}
.myhub-card img{max-width:100%}
.myhub-modal-box h2{ margin: 0px;display: inline;font-size: 32px;}
.myhub-modal-box{ position:relative;min-width: 480px;}
#myhub-portal-modal button#portal-close, #myhub-emp-modal button#emp-close {
    position: absolute;
    right: 10px;
    top: 10px;

}
.myhub-form {
    flex-direction: column;
}
.myhub-form input, form#emp-form  input{
    border-radius: 7px;
}

.myhub-btn {
    background: #000000;
}
.myhub-brand {
    border: 5px solid;
    height: 130px;
    width: 130px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    padding: 20px;
    margin-bottom: 20px;
}
.myhub-card div+div {
    margin-bottom: 20px;
}
.myhub-tabs button {
    background: indianred;
}

#profile-close {
    background: #000;
    padding: 10px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}
#perfChart{
    height: 200px!important;
    width: 200px!important;
}


@media (max-width: 767px) {

.myhub-modal-box{min-width: 300px;}

}