#heroImage {
    width: 100%;
    height: clamp(120px, 14vw, 200px);
    background-image: url('../image/home/new-icreate-imgs/bck_1.jpg');
    background-size: cover;
    background-position: center;
}

.wrap {
    width: 100%;
    background-color: #fff;
    max-width: 100%;
    min-width: auto;
    text-align: left;
}

.profile-top-row {
    display: flex;
    align-items: flex-start;
    width: 100%;
        max-width: 1920px;
    justify-content: center;
    margin: 0 auto;
}
#profileImageDiv {
    display: flex;
    position: relative;
    width: 20%;
    flex-shrink: 0;
    margin-top: -5%;
    flex-direction: column;
    align-items: center;
}
.info {
    flex: 1;
    min-width: 0;
    margin: 0;
}
#mainContent {
  display: flex;
  flex-direction: column;
  height: auto;
  width: 100%;
}
.page-bg-wrapper {
    width: 100%;
    background-image: url('../image/home/new-icreate-imgs/bck_4.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}
.ws2-wrapper {
    height: 100%;
    flex: 1;
    width: 100%;
    padding: 20px 0;
}
.ws2-inner {
    max-width: 1500px;
    margin: 0 auto;
}
/* --- Tab overrides --- */
#mainContent #tabs {
    margin: 0 auto;
    height: auto !important;
    padding: 0;
}
#mainContent #tabs-ul {
    display: flex;
    position: relative;
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 96%;
    list-style: none;
    margin: 0 auto !important;
    padding: 0 !important;
    justify-content: center;
    z-index: 2;
}
/* When the tabs don't fit, a centered flex row in an overflow-x container pushes
   the first tab past the left edge, where scrolling can't reach it (public
   profile at 375px: 52px of "Δημοσιευμένες Μαθητικές Δημιουργίες" was cut).
   "safe" falls back to start alignment on overflow; the media query covers
   browsers without "safe". Same fix as #tabs-ul in mydspace/main2.jsp. */
#mainContent #tabs-ul {
    justify-content: safe center;
}
@media (max-width: 768px) {
    #mainContent #tabs-ul {
        justify-content: flex-start;
    }
}
#mainContent #tabs-ul li {
    float: none !important;
    margin: 0 !important;
    border-right: 1px solid #c1c1c1;
    border-bottom: 1px solid #c1c1c1;
}
#mainContent #tabs-ul li a {
    display: block;
    align-content: center;
    padding: 10px clamp(40px, 10vw, 144px) 10px clamp(12px, 2vw, 26px) !important;
    background: #f2f2f2 !important;
    color: #777 !important;
    font-size: clamp(12px, 1.1vw, 16px);
    font-weight: 100;
    text-decoration: none;
    height: clamp(28px, 2.5vw, 36px);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    -webkit-transition: color 0.15s, border-color 0.15s;
    transition: color 0.15s, border-color 0.15s;
}
#mainContent #tabs-ul li a:hover {
    background: #fff !important;
    color: #f5a623 !important;
    border-bottom-color: #e78c3a;
}
#mainContent #tabs-ul li a.tabulous_active {
    align-content: center;
    background: #ffb069 !important;
    color: #3b3b3b !important;
    border-bottom-color: #e78c3a;
}
#mainContent #tabs_container {
    background: #fff !important;
    border-radius: 14px;
    -webkit-box-shadow: 0 4px 20px rgb(0 0 0 / 50%);
    box-shadow: 0 4px 20px rgb(0 0 0 / 50%);
    padding: clamp(20px, 2.8vw, 40px) clamp(12px, 2vw, 28px) clamp(16px, 2.2vw, 32px) !important;
    z-index: 1;
    margin: -32px auto 0 !important;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
/* --- Skeleton loader --- */
@keyframes ws2-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}
.ws2-skeleton-wrapper {
    min-height: 350px;
}
.ws2-skeleton-table {
    width: 100%;
    border-collapse: collapse;
}
.ws2-skeleton-cell {
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(90deg, #ececec 25%, #f5f5f5 50%, #ececec 75%);
    background-size: 1200px 100%;
    animation: ws2-shimmer 1.4s infinite linear;
}
.ws2-skeleton-table td {
    padding: 14px 15px !important;
    vertical-align: middle;
}
.ws2-skeleton-table tbody tr {
    border-bottom: 1px solid #f0f0f0;
}
#tabs_container {
    transition: opacity 0.25s ease;
}
#tabs_container.ws2-fade-in {
    animation: ws2-fadeIn 0.3s ease forwards;
}
@keyframes ws2-fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
}
/* --- Table styles --- */
.tablesorter-jui .header, .tablesorter-jui .tablesorter-header {
    background: #edceb2 !important;
}
.tablesorter-header-inner {
    color: #2b2b2b;
    font-size: clamp(12px, 1.1vw, 16px) !important;
    font-weight: 400 !important;
}
.tablesorter-jui thead th,
.tablesorter-jui thead td {
    padding: clamp(8px, 1.1vw, 15px) !important;
}
.tablesorter-jui {
    table-layout: fixed;
    width: 100%;
    min-width: 640px;
}
.tablesorter-jui td {
    font-size: clamp(13px, 1.25vw, 18px);
    font-weight: 400;
    vertical-align: middle;
    padding: 0 clamp(8px, 1.1vw, 15px) !important;
    height: clamp(36px, 3.5vw, 50px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tablesorter-jui tbody td {
    border-bottom: 1px solid #000;
}
.titleButtonAsLink a {
    font-size: clamp(13px, 1.25vw, 18px);
    display: block;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-image: linear-gradient(0deg, #235264, #235264);
    background-size: 100% 0;
    background-position: bottom;
    background-repeat: no-repeat;
    -webkit-transition: background-size 0.3s ease-in-out;
    transition: background-size 0.3s ease-in-out;
}
.titleButtonAsLink a:hover {
    background-size: 100% 3px;
}
@media (max-width: 1300px) {
    #mainContent #tabs_container { overflow-x: auto; }
}
@media (max-width: 600px) {
    .profile-top-row { flex-direction: column; }
    #profileImageDiv { width: 100%; margin-top: -70px; }
}
.profileInfoWrapper {
    box-sizing: border-box;
    margin-top: clamp(20px, 5.5vw, 80px);
    min-height: 200px;
    width: 94%;
    padding: clamp(10px, 1.5vw, 20px);
}
@media (max-width: 600px) {
    .profileInfoWrapper {
      margin: 0 auto;
    }
    .info{
      margin: 90px auto 0;
    }
}
.profileBlock {
    display: flex;
    gap: clamp(12px, 1.6vw, 22px);
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    box-shadow: 1px 5px 5px #999;
    -moz-box-shadow: 1px 5px 5px #999;
    -webkit-box-shadow: 1px 5px 5px #999;
    margin-bottom: clamp(10px, 1.4vw, 20px);
    padding: clamp(16px, 3.5vw, 50px);
    width: 98%;
    background-color: #FFF;
    border-radius: 10px;
}

.profileBlock span {
    color: #2B3E42;
}

.labelWrapper {
    cursor: move;
}
.profileValWrapper {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.8vw, 25px);
}

.profileFullNameWrapper {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(16px, 2vw, 32px);
}

.profileEmailWrapper {
    display: flex;
}

.profileField {
    display: flex;
    align-items: center;
    gap: clamp(6px, 0.6vw, 10px);
    justify-content: space-between;
}

/* "Γενικά στοιχεία": Όνομα / Επώνυμο / Ηλεκτρονική Διεύθυνση as one label column
   + one value column, so the three values start at the same x. The wrappers and
   .profileField become display:contents so their label/value spans are the grid
   cells; the label column is as wide as the longest label. Scoped with :has() to
   this block - the other blocks also use .profileValWrapper. */
.profileValWrapper:has(> .profileFullNameWrapper) {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(6px, 0.6vw, 10px);
    row-gap: 0;
}

.profileValWrapper > .profileFullNameWrapper,
.profileValWrapper > .profileEmailWrapper,
.profileValWrapper > div > .profileField {
    display: contents;
}

/* styles.css gives .profileLbl width:30% (of its grid cell here) */
.profileValWrapper > div > .profileField > .profileLbl {
    width: auto;
}

.profileValWrapper > .profileEmailWrapper .profileVal {
    overflow-wrap: anywhere;
}

/* Phones: a 170px label column left ~115px for the values, so label above value */
@media (max-width: 480px) {
    .profileValWrapper:has(> .profileFullNameWrapper) {
        grid-template-columns: minmax(0, 1fr);
    }
    .profileValWrapper > div > .profileField > .profileLbl {
        padding-bottom: 0;
    }
    .profileValWrapper > div > .profileField > :not(.profileLbl) {
        margin-bottom: 8px;
        overflow-wrap: anywhere;
    }
}

.profileName {
    font-weight: bold;
    color: #363636;
    font-size: clamp(14px, 1.2vw, 18px);
}

.profileLbl {
    padding: clamp(8px, 0.9vw, 13px) clamp(6px, 0.7vw, 10px) clamp(8px, 0.9vw, 13px) 0;
    letter-spacing: 0.02em;
    font-size: clamp(14px, 1.5vw, 20px);
    font-weight: bold;
}

.profileBlockLbl {
    padding: clamp(10px, 1.4vw, 20px) 5px clamp(20px, 2.8vw, 40px) clamp(48px, 5.5vw, 80px);
    color: #363636;
    letter-spacing: 0.02em;
    font-size: clamp(15px, 1.6vw, 22px);
    font-weight: bold;
    border-bottom: #ccc 1px solid;
    background-image: url(../image/home/new-icreate-imgs/SVG/user.svg);
    background-repeat: no-repeat;
    background-size: clamp(36px, 4.2vw, 60px) clamp(36px, 4.2vw, 60px);
}

.generalBlock .profileBlockLbl, .displayBlock .profileBlockLbl, .displayBlock, .displaySubBlock .profileSubBlockLbl, .displaySubBlock {
    cursor: default;
}

.profileVal, .profileVal p {
    font-size: clamp(14px, 1.5vw, 20px);
}

#experienceBlock div.profileBlockLbl {
    background-image: url(../image/home/new-icreate-imgs/SVG/proffesion.svg);
}
#educationBlock div.profileBlockLbl {
    background-image: url(../image/home/new-icreate-imgs/SVG/education.svg);
}
#projectsBlock div.profileBlockLbl {
    background-image: url(../image/home/new-icreate-imgs/SVG/erga.svg);
}
#interestsBlock div.profileBlockLbl {
    background-image: url(../image/home/new-icreate-imgs/SVG/intrests.svg);
}
#publicationsBlock div.profileBlockLbl {
    background-image: url(../image/home/new-icreate-imgs/SVG/published.svg);
}
#skillsBlock div.profileBlockLbl {
    background-image: url(../image/home/new-icreate-imgs/SVG/knowledge.svg);
}

.profileSubBlock {
    padding: 5px 3px 3px 5px;
    border-radius: 5px;
}

.profileSubBlockLbl {
    font-size: clamp(13px, 1.3vw, 18px);
    font-weight: bold;
    letter-spacing: 0.02em;
    cursor: move;
}

.profileSubBlockVal {
    margin: clamp(14px, 2vw, 28px) 10px;
}

.profileSubBlockVal div {
    font-size: clamp(12px, 1.15vw, 16px);
}

.editable-empty {
    font-size: clamp(12px, 1.15vw, 16px);
}

.profileBlockMenuImg {
    margin: 5px;
    width: clamp(24px, 2.5vw, 36px);
    height: clamp(24px, 2.5vw, 36px);
    cursor: pointer;
}

.profileSubBlock .profileBlockMenuImg {
    margin: 0;
}

.profileBlockMenu {
    height: 20px;
}

table#publishedItemsTable1 {
    border: none;
}
.generalLabelWrapper {
    margin-bottom: 15px;
}
.profileBlockDelete {
    float: right;
    cursor: pointer;
    position: relative;
}
.profileBlockDelete img {
    width: clamp(24px, 2.5vw, 36px);
    height: clamp(24px, 2.5vw, 36px);
}
.tablesorter-jui .tablesorter-filter-row td {
    padding: 0px !important;
}
.tablesorter-jui .tablesorter-filter {
    width: 98% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 12px 15px !important;
    background-color: #fff !important;
    border: 1px solid #bbb !important;
    color: #333 !important;
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    box-sizing: border-box !important;
    -webkit-transition: height 0.1s ease !important;
    -moz-transition: height 0.1s ease !important;
    -o-transition: height 0.1s ease !important;
    transition: height 0.1s ease !important;
}
.ui-widget-content {
    border: none !important;
}