.studentdev {
    display: flex;
    flex-direction: column;
    max-width: 1200px;
}

.studentdev .lastact {
  color: var(--primary-color);
  font-family: psuStidi-Bold;
  text-align: center;
  font-size: 1.3rem;
  margin-bottom: 10px;
}

.studentdev .underline {
  margin: 30px auto;
  width: 90%;
  border-bottom: #000 2px solid;
}

.studentdev .row-com .header {
  font-size: 1.7rem;
  font-family: psuStidi-Bold;
  text-align: left;
}
.studentdev .row-com .header2 {
  font-size: 1.3rem;
  text-align: left;
}

.studentdev .upcoming .activity-carousel a {
  cursor: pointer;
  text-decoration: none;
  color: unset;
}
.studentdev .slick-next,
.slick-prev {
  width: 30px;
  height: 30px;
  top: 45%;
}
.studentdev .upcoming .slick-next:before,
.slick-prev:before {
  font-size: 30px;
  color: #b9b8b8;
}
/*
.studentdev .recom {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.studentdev .recom .act {
  text-align: left;
  font-family: psuStidi-Bold;
}
#main canvas {
    position: relative;
    left: -20px !important;
}

.studentdev .recom .header-1 {
  display: flex;
  align-items: center;
  justify-items: center;
  width: fit-content;
  font-size: 1.2rem;
  font-family: psuStidi-Bold;
  padding: 5px 20px;
  background-color: var(--primary-color);
  color: #ffff;
  border-radius: 14px;
  margin-bottom: 15px;
}
            */
.studentdev .compentency .hint-btn {
  width: 30px;
  height: 30px;
  opacity: 40%;
}

.studentdev .compentency .radarpart .hintclass {
  position: absolute;
  top: 20px;
  right: 20px;
}
/*

.studentdev .row-com .activity .header-1 {
  font-size: 1.3rem;
  font-family: psuStidi-Bold;
  text-align: left;
  margin-left: 30px;
  color: var(--primary-color);
}

.studentdev .row-com .activity img {
  margin: 5px auto;
  height: auto;
  width: 95%;
  border-radius: 10px;
}

.studentdev .row-com .activity .detail {
  text-align: left;
}

.studentdev .row-com .activity label {
  font-family: psuStidi-Bold;
  font-size: 1.3rem;
}

.studentdev .row-com .activity .detail .topic {
  display: flex;
  color: var(--gray-color5);
}

.studentdev .row-com .activity .detail .data {
  margin-left: 20px;
  color: var(--gray-color5);
}

.studentdev .row-com .activity .detail .boxbutton {
  justify-self: center;
  border-radius: 10px;
  margin: 10px 0px;
  text-align: center;
  min-width: 200px;
  width: fit-content;
  padding: 5px 20px;
  background-color: var(--gray-color1);
}
*/
.studentdev .upcoming {
  background-color: var(--gray-color3);
  display: flex;
  flex-direction: row;
  border-radius: 15px;
  padding: 10px 0px;
}

.studentdev .upcoming .left {
  display: flex;
  flex-direction: column;
  font-family: psuStidi-Bold;
  align-items: center;
  justify-content: center;
}

.studentdev .upcoming .right .scroll-container {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.studentdev .upcoming .end {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  color: var(--primary-color);
}

.studentdev .upcoming .end span {
  background-color: var(--primary-color);
  width: 8px;
  height: 8px;
}

.studentdev .upcoming .left .register {
  background-color: #ff914d;
  padding: 6px 5px;
  border-radius: 10px;
  color: white;
  font-size: 1.2rem;
  text-align: center;
  min-width: 80%;
}

.studentdev .upcoming .left .all {
  color: var(--primary-color);
  font-size: 0.8rem;
}

.studentdev .upcoming .right .scroll-container {
  display: flex;
  transition: transform 1s ease;
}

.studentdev .upcoming .right .scroll-container ::-webkit-scrollbar {
  display: none;
}

.studentdev .calender {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left:10px;
  margin-right: 10px;
  width: 130px;
  text-align: center;
}

.studentdev .calender .name {
  width: 140px;
  padding-left: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.studentdev .calender .activity-item {
  display: flex;
  flex-direction: column;
  width: 100px;
  padding: 7px;
  background: var(--primary-color);
  border-radius: 15px;
}

.studentdev .calender .nomargin {
  margin-bottom: -10px;
}

.studentdev .calender .activity-item .top {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: -7px;
  z-index: 1;
}

.studentdev .calender .activity-item .topred {
  width: 100%;
  height: 10px;
  background-color: red;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.studentdev .calender .activity-item .bottom {
  padding: 0px 5px 0px 5px;
  background-color: white;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  color: black;
  font-family: psuStidi-Bold;
  font-size: 1rem;
  min-height: 60px;
}

.studentdev .calender .activity-item .bottom .int {
  font-size: 1.3rem;
  margin-top: -8px;
  margin-bottom: -8px;
}

.studentdev .calender .activity-item .bottom .minwidth {
  text-align: center;
}

.studentdev .calender .activity-item span {
  width: 6px;
  height: 13px;
  border-radius: 3px;
  background-color: white;
}

.studentdev .calender .calendar-icon {
  background-color: #003366;
  border-radius: 15px;
  padding: 15px;
  text-align: center;
  width: 80px;
  color: white;
}

.studentdev .calender .activity-name {
  margin-top: 10px;
  font-size: 14px;
  text-align: center;
}

.studentdev .calender .more-items {
  font-size: 24px;
  color: #003366;
}

.fade-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50px; /* Adjust as needed */
  pointer-events: none;
  z-index: 1;
}

.fade-left {
  left: 0;
  background: linear-gradient(to right, white, rgba(255, 255, 255, 0));
}

.fade-right {
  right: 0;
  background: linear-gradient(to left, white, rgba(255, 255, 255, 0));
}
.last-activity {
  position: relative;
  background: white;
  overflow: hidden;
}

.last-activity .lastAct-carousel {
  width: 100%;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #fff 15%,
    #fff 85%,
    transparent 100%
  );
}

.last-activity .slick-dotted.slick-slider {
    margin-bottom: 0px;
}
.lastAct-carousel .slide-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0.5;
    z-index: 2;
    transform: scale(0.7);
    position: relative;
    text-align: center;
    max-width: 500px;
    width: 100%;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.lastAct-carousel .slick-center .slide-content {
  opacity: 1 !important;
  z-index: 100;
  transform: scale(1);
}

.lastAct-carousel .slide-content .carousel-image {
  margin-bottom: 15px;
  object-fit: cover;
  width: 100%;
  height: 300px;
  border-radius: 20px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.lastAct-carousel .slide-content .slide-title {
  font-size: 1.2rem;
}

.lastAct-carousel .slide-content .slide-date {
  font-size: 1rem;
}

.studentdev .reportproblem {
  background-color: var(--gray-color1);
  font-family: psuStidi-Bold;
  border-radius: 10px;
  row-gap: 15px;
  display: flex;
  flex-wrap: wrap;
}
.studentdev .reportproblem.row {
  margin-left: 0px !important;
  margin-right: 0px !important;
  --mdb-gutter-x: unset !important;
}

.studentdev .reportproblem .line {
  height: 80%;
  border-left: 2px solid #000;
}

.studentdev .reportproblem .box {
  border-radius: 10px;
  padding: 15px 10px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.studentdev .reportproblem .box-issue {
  cursor: pointer;
  min-height: 70px;
  background-color: #ffbd59;
  border: 3px solid #d80f0f;
  color: #d80f0f;
  font-size: 1.4rem;
}

.studentdev .reportproblem .box-count {
  min-height: 130px;
  background-color: var(--primary-color);
  color: #ffff;
  height: 100%;
}

.studentdev .reportproblem .box-count:hover {
  text-decoration: unset !important;
}

.studentdev .reportproblem .box-count .value {
  font-size: 3.2rem;
}

.studentdev .reportproblem .report-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.reportproblem .box-status {
  display: flex;
  align-items: center;
  flex-direction: column;
  row-gap: 15px;
}
.reportproblem .box-status .total-issues {
  font-size: 1.4rem;
  text-align: center;
}

.reportproblem .box-status .total-issues .normal {
  font-size: 1rem;
  font-family: psuStidi-Regular;
}

.reportproblem .box-status .summary {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.reportproblem .box-status .summary .boxin {
  text-align: center;
  height: 100px;
  border-radius: 10px;
  width: 30%;
  padding: 10px 5px;
  color: #ffff;
  font-size: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.reportproblem .box-status .summary .sb {
  background-color: #004aad;
}

.reportproblem .box-status .summary .or {
  background-color: #ff914d;
}

.reportproblem .box-status .summary .gr {
  background-color: #00bf63;
}

.reportproblem .box-status .summary .boxin .value {
  font-size: 2.3rem;
}

.studentdev .upcoming {
  background-color: var(--gray-color3);
  display: flex;
  flex-direction: row;
  border-radius: 15px;
}

.report-form .contact textarea.form-control,
.report-form .contact input.form-control {
  padding: 3px 10px;
}

.report-form .contact {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 10px;
  background-color: #fccd63;
  padding: 10px;
}

.submitted-report {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--gray-color1);
  border-radius: 50%;
  width: 120px;
  height: 120px;
}

.formtop {
  display: flex;
  background: var(--gray-color3);
  border-radius: 10px;
  font-family: psuStidi-Bold;
  font-size: 0.9rem;
  padding: 10px;
}

.studentdev .custom-radio {
  display: flex;
  align-items: center;
  margin: 10px;
}

.studentdev .custom-radio-input {
  position: absolute;
  opacity: 0;
}

.studentdev .custom-radio-label {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
}
/* ตัดบรรทัดเป็น … */
.clamp-1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clamp-2, .clamp-3, .clamp-4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.clamp-2 {
    -webkit-line-clamp: 2;
}

.clamp-3 {
    -webkit-line-clamp: 3;
}

.announcement .text-center {
    color: var(--primary-color);
    font-family: psuStidi-Bold;
    text-align: center;
    font-size: 1.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.post-card {
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);

}

    .post-card .type {
        padding: 1px 12px;
        border-radius: 8px;
        font-weight: 600;
        color: white;
        width: fit-content;
        background: #FACC15;
        display: inline-block;
        margin-bottom: 6px;
        font-size: 0.9rem;
    }

    .post-card .title {
        font-weight: 800;
        line-height: 1.35;
        margin: 4px 0 6px;
    }

    .post-card .desc-title {
        color: #4b5563;
        line-height: 1.6;
        margin-bottom: 8px;
        font-size: 0.8rem;
    }

    .post-card .attachments {
        display: flex;
        gap: 8px;
        margin-bottom: 8px;
    }

.badge-attach {
    font-size: 12px;
    color: #0f172a;
    background: #e2e8f0;
    border-radius: 8px;
    padding: 3px 8px;
}

.nav-post {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.nav-post-icon {
    width: 16px;
    height: 16px;
}


/*
.studentdev .announcement .card .type {
    padding: 1px 12px;
    border-radius: 8px;
    font-weight: 600;
    color: white;
    width: fit-content;
    background-color: #FACC15;
}
.studentdev .announcement .card .title {
    font-family: psuStidi-Bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.studentdev .announcement .card .content {
    font-size: 0.8rem;
    color: gray;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.studentdev .announcement .card .date {
    font-size: 0.8rem;
    color: gray;
}

.studentdev .announcement .card .nav-post {

}
    */
    .studentdev .custom-radio-label:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    border: 2px solid var(--primary-color);
    border-radius: 5px;
    background-color: transparent;
    transition: background-color 0.3s, border-color 0.3s; /* Combine transitions */
}

.studentdev .custom-radio-input {
  position: absolute;
  opacity: 0; /* Hide the default radio */
}

.studentdev .custom-radio-input:checked + .custom-radio-label:before {
  background-color: #ffff; /* Change this to your desired color */
  border-color: var(--primary-color);
}

.studentdev .custom-radio-label:after {
  content: ""; /* Ensure the :after content is defined */
  position: absolute;
  left: 3.2px;
  top: 50%;
  transform: translateY(-50%);
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background-color: transparent; /* Initial state */
  transition: background-color 0.3s; /* Ensure transition is defined */
}

.custom-radio-input:checked + .custom-radio-label:after {
  background-color: var(
    --primary-color
  ); /* Change to your desired color when checked */
}

/* Scoped to the .report-dash container */

/* Custom Navigation Pills */

.report-dash .custom-nav-pills {
  gap: 10px;
}

.report-dash .custom-nav-pills .nav-link {
  display: flex;
  align-items: center;
  background-color: #e9ecef;
  font-size: 0.9rem;
  color: #333;
  border-radius: 30px;
  padding: 10px 20px;
  margin-right: 10px;
  transition: background-color 0.3s;
}

.report-dash .custom-nav-pills .nav-link.active {
  background-color: #007bff;
  color: #fff;
}

/* Status Badge */
.report-dash .status-badge {
  padding: 5px 15px;
  font-size: 12px;
}

/* General Layout */
.report-dash {
  padding: 20px;
  background-color: #f7f7f7;
  border-radius: 10px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-100% + 100vw));
  }
}

.table {
  display: flex;
  flex-direction: column;
  width: 100%;
  font-size: 0.8rem;
  font-family: psuStidi-Bold;
}

.table .thead {
  display: flex;
  gap: 10px;
  font-size: 1.1rem;
}

.table .bording {
  background-color: var(--gray-color3);
  border-radius: 10px;
  padding: 10px 10px;
}

.table .id {
  flex: 0.5;
}

.table .title {
  flex: 4.5;
}

.table .tr-row .title {
  text-align: left;
}

.table .status {
  flex: 1.5;
}

.table .tbody {
  display: flex;
  flex-direction: column;
}

.table .tbody .tr {
  display: flex;
  flex-direction: column;
  margin: 10px 0px;
  background-color: var(--gray-color1);
  border-radius: 15px;
}

.table .tbody .tr .tr-row {
  display: flex;
  flex-direction: row;
  background-color: transparent;
  align-items: center;
  gap: 10px;
}

.table .tbody .tr {
  padding: 0px 0px !important;
}

.table .tbody .tr .id {
  padding: 0px 10px 0px 10px;
}

.table .tbody .tr .state {
  justify-self: center;
  padding: 5px 10px;
  border-radius: 10px;
  min-width: 170px;
  color: white;
  align-items: center;
  display: flex;
  justify-content: center;
  z-index: 10;
  cursor: pointer;
}

.table .tbody .tr .over {
  position: relative;
  border: none;
  justify-self: center;
}

.table .tbody .tr .status .dropdown-menu {
  padding-top: 0px !important;
  min-width: 190px;
  background-color: darksalmon;
  gap: 10px;
  border: none;
  padding-bottom: 1px;
}

.table .tbody .tr .status .dropdown-menu .state {
  min-width: 170px;
}

.dropdown .filter {
  background-color: #007bff;
  display: flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.dropdown-item {
  font-size: 1rem;
  cursor: pointer;
}

.compentency ul {
  list-style-type: none;
  padding: 0;
}

.compentency li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
  text-align: left;
}

.compentency .hintclass ul {
  top: 20px;
  padding: 10px;
  width: 300px;
}

.compentency .dot {
  margin-top: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 10px;
  background-color: currentColor;
  color: #ff9933;
  display: inline-block; /* Ensure inline-block display to respect width/height */
}

/* Example colors for the dots */
.compentency .red {
  color: #e60012;
}

.compentency .cyan {
  color: #5ce1e6;
}
.material-icons {
  font-variation-settings: "FILL" 0, "wght" 700, "GRAD" 0, "opsz" 24;
}

.compentency .pink {
  color: #ff66c4;
}

.compentency .green {
  color: #7ed957;
}

.compentency .orange {
  color: #ff914d;
}

.compentency .text {
  font-size: 0.7rem;
  display: block;
  margin-bottom: 3px;
  color: #333;
}

.compentency .text strong {
  font-size: 0.8rem;
  display: block;
  font-family: psuStidi-Bold;
  margin-bottom: 3px;
  color: #333;
}

.studentdev .announcementAlert {
  font-size: 1.2rem;
  color: red;
  font-family: psuStidi-Bold;
}
.studentdev .report .row{
    justify-content: center;
}
.studentdev .report .tab-btn {
    min-width: 150px;
    padding: 0.25rem 0.75rem;
    border-radius: 19px;
    font-size: 1.5rem;
    color: white;
    font-family: psuStidi-Bold;
    text-align: center;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 4px 4px 0px #00000040;
    cursor: pointer;
}
    .studentdev .report .tab-btn.reportbtn {
        background: #FF9E58;
    }
.studentdev .report .tab-btn.follow {
    background: #4DA3FF;
}
.studentdev .report .tab-btn img{
    height: 2.3rem;
}
.studentdev .report form {
    box-shadow: 0px 4px 4px 0px #00000040;
    border: 1px solid #D7D7D7;
    background: #F3F3F3;
    padding: 1rem;
    border-radius: 14px;
}
.studentdev .report form .submit-btn{
    border: 1px solid #787878;
    background: #D9D9D9;
    min-width: 110px;
    padding: .375rem .75rem;
}
.studentdev .animate-expand {
    max-height: 120px;
}
    .studentdev .animate-expand.report-exp {
        max-height: 1200px;
    }
.studentdev .animate-expand.report-exp #complaintFormCrop{
    max-height: 500px;
}
.studentdev .animate-expand.report-exp #talbe-followCrop {
    max-height: 500px;
}
.studentdev .animate-expand.report-exp.hidden{
        max-height: 0px !important;
}
        .studentdev .animate-expand.report-exp #complaintFormCrop.hidden {
            max-height: 0px;
        }

        .studentdev .animate-expand.report-exp #talbe-followCrop.hidden {
            max-height: 0px;
        }
.studentdev .report .count-container {
    box-shadow: 0px 4px 4px 0px #00000040;
    border: 1px solid #D7D7D7;
    padding: 0.25rem 0.75rem;
    background: #F3F3F3;
    border-radius: 14px;
}
.studentdev .report .count-container .ovr {
    text-align: center;
    font-weight: bold;
    font-size: 1.5rem;
}
.studentdev .report .count-container .ovr .small {
    font-weight: normal;
    font-size: 1rem;
}
.studentdev .report .count-container .box-count {
    height: 100%;
    font-weight: bold;
    text-align: center;
    color: white;
    padding: 0.75rem;
    border-radius: 1rem;
    box-shadow: 0px 4px 4px 0px #00000040;
}
.studentdev .report .count-container .box-count label{
    font-size: 1.8rem;
}
.count-container .box-count.gr {
    background: #B2B2B2;
}
.count-container .box-count.bl {
    background: #356ADD;
}
.count-container .box-count.or {
    background: #FF710C;
}
.count-container .box-count.green {
    background: #28DD64;
}
.studentdev .report .collapse {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}
.studentdev .report .e-table {
    box-shadow: 0px 4px 4px 0px #00000040;
    border: 1px solid #D7D7D7;
    background: #F3F3F3;
    padding:0.5rem;
    border-radius: 12px;
}
.studentdev .report .e-table table{
    border-collapse: separate;
    border-spacing: 0 10px; /* 10px คือช่องว่างในแนวตั้ง */
    table-layout: fixed;              /* สำคัญสุด */
}
/* -------- Desktop / Default -------- */
.studentdev .report .col-id {
    width: 80px;
}

.studentdev .report .col-date {
    width: 110px;
}

.studentdev .report .col-title {
    width: auto;
}
/* กินพื้นที่ที่เหลือ */
.studentdev .report .col-type {
    width: 105px;
}

.studentdev .report .col-status {
    width: 140px;
}

.studentdev .report .col-type span {
    text-align: center;
}
.studentdev .report .e-table th {
    font-weight: normal;
}
.studentdev .report .e-table td .box{
    margin: 0.25rem;
    border-radius: 10px;
    font-weight: bold;
    color: white;
    padding: 0.25rem;
    min-width: 130px;
    max-width: 75%;
    font-size: 0.8rem;
    min-height: 15px;
}
    .studentdev .report .e-table th .details,
    .studentdev .report .e-table td .details {
        display: block; /* ให้ตัดได้ */
        width: 100%; /* เต็มคอลัมน์ */
        white-space: nowrap; /* ไม่ตัดบรรทัด */
        overflow: hidden;
        text-overflow: ellipsis; /* ตัดเป็น … */
    }
td .box.gr {
    background-color: #B3B3B3;
}
td .box.bl {
    background: #004AAD;
}
td .box.or {
    background: #FF8731;
}
td .box.green {
    background: #03C443;
}
.studentdev .report .e-table tbody td {
    background-color: white;
}

.report .e-table tbody tr td:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.report .e-table tbody tr td:last-child {
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}

.actpage label {
    font-weight: bold;
    font-size: 1.5rem;
    padding-bottom: 0.3rem;
    text-align: center;
    min-width: max-content;
    margin-right: 1rem;
}

.actpage .ethead {
    display: flex;
    text-align: center;
}

.actpage .etdata {
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    background-color: #FAF2EB;
    text-align: center;
    padding: 0.3rem 0;
}

.actpage .crop-scroll {
    background-color: white;
    padding: 0.5rem 1rem;
    overflow: auto;
    max-height: 80vh;
}

    .actpage .crop-scroll .acttable {
        min-width: 800px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

        .actpage .crop-scroll .acttable .regist {
            cursor: pointer;
        }


        .actpage .crop-scroll .acttable .slide-toggle {
            overflow: hidden;
            transition: max-height 0.4s ease;
            max-height: 0;
            display: flex;
        }

        .actpage .crop-scroll .acttable .regist-btn {
            background-color: #ff9800;
            border: none;
            padding: 5px;
            border-radius: 10px;
            color: white;
        }

        .actpage .crop-scroll .acttable .slide-toggle.show {
            max-height: 80px; /* ปรับตามความสูงของกล่อง */
        }

    .actpage .crop-scroll .highlight-scroll {
        animation: highlightFade 2s ease;
        background-color: #fffae5;
    }

@keyframes highlightFade {
    0% {
        background-color: #fff3cd;
    }

    100% {
        background-color: transparent;
    }
}


/* Make scrollbar thin by default */
.actpage .crop-scroll::-webkit-scrollbar {
    width: 5px; /* Thin scrollbar */
    height: 5px;
}

/* Make the track transparent */
.actpage .crop-scroll::-webkit-scrollbar-track {
    background: transparent;
}

/* Style the thumb to be barely visible by default */
.actpage .crop-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2); /* Light, semi-transparent color */
    border-radius: 10px; /* Rounded corners */
    transition: background-color 0.2s ease-in-out, width 0.2s ease-in-out;
}

/* On hover over the scrollable area, make the scrollbar thumb more visible */
.actpage .crop-scroll:hover::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.5); /* Darker, more opaque color */
}

.acttable .etdata .redata {
    display: flex;
    align-items: center;
}

.acttable .etdata .toggle-btn {
    cursor: pointer;
}

.actpage .underline.act {
    width: 100%;
    border-bottom: 2px solid black;
    height: 1px;
}



.status-opening {
    background-color: #e6ffe6; /* Light green */
    color: #006600; /* Dark green text */
    text-decoration-color: #006600;
    text-decoration: underline;
}

.status-closed {
    background-color: #ffe6e6; /* Light red */
    color: #cc0000; /* Dark red text */
    text-decoration-color: #cc0000;
    text-decoration: underline;
}

.status-upcoming {
    background-color: #fffacd; /* Lemon Chiffon (light yellow) */
    color: #b8860b; /* Dark Goldenrod text */
    text-decoration-color: #b8860b;
    text-decoration: underline;
}

.status-description {
    font-size: 0.9em;
    font-weight: normal;
    color: #555; /* Neutral color for description */
}
/*******************************  E-Vote Css ****************************/
.eheader {
  font-family: psuStidi-Bold;
  display: flex;
  align-items: center;
}
.eheader .header1 {
  margin: 10px 10px 10px 0px;
  font-family: psuStidi-Bold;
  min-width: fit-content;
  font-size: 1.3rem;
}
.eheader span {
  border-radius: 5px;
  background-color: black;
  height: 1.6px;
  width: 100%;
}
.evote .data {
  display: flex;
  flex-wrap: wrap;
}
.evote .data .evoteposter {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.evote .eleft {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}
.evote .eleft .ebtn {
  border: unset;
  border-radius: 18px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  padding: 5px 10px;
  color: white;
  width: 200px;
}
.ebtn.eg {
  background-color: #009d41;
}
.ebtn.er {
  background-color: #d10000;
}
.ebtn.egr {
  background-color: #bfbfbf;
  color: #f44e06 !important;
}
.evote .eright .listparticipant {
  background-color: #f8f7f7;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 700px;
  overflow: auto;
}
.evote .eright .listcard img {
  height: auto;
  width: 130px;
  object-fit: cover;
  margin-right: 30px;
  margin-bottom: 20px;
}
.evote .eright .listcard {
  flex-direction: column;
  display: flex;
  border-bottom: 1.5px solid black;
}
.evote .listcard .name {
  background-color: #e2e2e2;
  font-family: psuStidi-Bold;
}
.evote .listcard .position {
  font-family: psuStidi-Bold;
}
.status-evote {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.status-evote .btncount {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: psuStidi-Bold;
  padding: 10px 30px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  gap: 5px;
  min-width: 227px;
  height: max-content;
}
.btncount.alluser {
  background: linear-gradient(180deg, #fffafa 0%, #ff9500 100%);
  color: #744400;
}
.btncount.useduser {
  background: linear-gradient(180deg, #fffafa 0%, #2b00eb 100%);
  color: #2b00eb;
}
.status-evote {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.status-evote .count {
  background-color: white;
  padding: 10px;
  border-radius: 10px;
  width: 100%;
  text-align: center;
  font-size: 2rem;
}
.status-evote .btnpercent {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-wrap: wrap;
}
.status-evote .percentage {
  font-family: psuStidi-Bold;
  min-height: 121.8px;
  text-align: center;
  font-size: 0.9rem;
  padding: 10px;
  color: #02a10d;
  background: #ffffff;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 20px;
}
.status-evote .percentage .percent {
  font-family: psuStidi-Bold;
  font-size: 3rem;
}

.listparticipant .col,
.listparticipant .col-1,
.listparticipant .col-10,
.listparticipant .col-11,
.listparticipant .col-12,
.listparticipant .col-2,
.listparticipant .col-3,
.listparticipant .col-4,
.listparticipant .col-5,
.listparticipant .col-6,
.listparticipant .col-7,
.listparticipant .col-8,
.listparticipant .col-9,
.listparticipant .col-auto,
.listparticipant .col-lg,
.listparticipant .col-lg-1,
.listparticipant .col-lg-10,
.listparticipant .col-lg-11,
.listparticipant .col-lg-12,
.listparticipant .col-lg-2,
.listparticipant .col-lg-3,
.listparticipant .col-lg-4,
.listparticipant .col-lg-5,
.listparticipant .col-lg-6,
.listparticipant .col-lg-7,
.listparticipant .col-lg-8,
.listparticipant .col-lg-9,
.listparticipant .col-lg-auto,
.listparticipant .col-md,
.listparticipant .col-md-1,
.listparticipant .col-md-10,
.listparticipant .col-md-11,
.listparticipant .col-md-12,
.listparticipant .col-md-2,
.listparticipant .col-md-3,
.listparticipant .col-md-4,
.listparticipant .col-md-5,
.listparticipant .col-md-6,
.listparticipant .col-md-7,
.listparticipant .col-md-8,
.listparticipant .col-md-9,
.listparticipant .col-md-auto,
.listparticipant .col-sm,
.listparticipant .col-sm-1,
.listparticipant .col-sm-10,
.listparticipant .col-sm-11,
.listparticipant .col-sm-12,
.listparticipant .col-sm-2,
.listparticipant .col-sm-3,
.listparticipant .col-sm-4,
.listparticipant .col-sm-5,
.listparticipant .col-sm-6,
.listparticipant .col-sm-7,
.listparticipant .col-sm-8,
.listparticipant .col-sm-9,
.listparticipant .col-sm-auto,
.listparticipant .col-xl,
.listparticipant .col-xl-1,
.listparticipant .col-xl-10,
.listparticipant .col-xl-11,
.listparticipant .col-xl-12,
.listparticipant .col-xl-2,
.listparticipant .col-xl-3,
.listparticipant .col-xl-4,
.listparticipant .col-xl-5,
.listparticipant .col-xl-6,
.listparticipant .col-xl-7,
.listparticipant .col-xl-8,
.listparticipant .col-xl-9,
.listparticipant .col-xl-auto {
  padding: 0px;
}

.status-evote .btnpercent .time {
  text-align: center;
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
}
.status-evote .btnpercent .time label {
  font-family: psuStidi-Bold;
  font-size: 2.5rem;
}
.evoteposter {
  width: 100%;
}
.evote-underline {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  margin-top: 10px;
}
.evote-underline span {
  height: 1.4px;
  background-color: black;
  border-radius: 5px;
  width: 100%;
}
.nav-evote {
  margin: 20px 0px 0px 0px;
  text-align: center;
  border-radius: 20px;
  font-family: psuStidi-Bold;
  font-size: 1.3rem;
  background: linear-gradient(90deg, #0542da 12%, #00cad9 55.5%);
  padding: 10px 25px;
  color: #ffffff;
  text-decoration: none;
  -webkit-text-stroke: 1px #2a008c;
}
.evote .header2 {
  font-family: psuStidi-Bold;
}
.evote .alert-evote {
  color: red;
  font-size: 1.1rem;
  padding-top: 10px;
}
.evote .data .donestatus {
  margin-top: 20px;
  text-align: center;
  padding: 20px 10px;
  color: white;
  background: linear-gradient(180deg, #6bc971 0%, #356338 100%);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 6px;
}
.evote .data .donestatus.red {
  background: linear-gradient(180deg, #ff7373 0%, #d10000 100%);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 6px;
}
.evote .data .donestatus .thankyou {
  color: white;
  font-family: psuStidi-Bold;
  font-size: 1.2rem;
}

.eventpage {
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  transition: background-color 0.3s ease, border-left 0.3s ease;
  cursor: pointer;
}

.eventpage .event-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.eventpage .event-item:hover {
  background-color: #f9f9f9;
}

.eventpage .event-item.active {
  background-color: #fef6e4; /* สีพื้นหลัง Active */
  border-left: 5px solid #ff9900;
}

.eventpage .event-item .event-number {
  font-size: 1.2em;
  font-weight: bold;
  color: #333;
  width: 30px;
}

.eventpage .event-item .event-details {
  flex-grow: 1;
  margin-left: 10px;
}

.eventpage .event-item .event-details .event-title {
  margin: 0;
  font-size: 1.1em;
  font-weight: bold;
}

.eventpage .event-item .event-status {
  text-align: right;
  color: #666;
}

.event-more-details {
  display: block; /* แสดงเมื่อคลาส active ถูกเพิ่ม */
  margin-top: 10px;
  font-size: 0.9em;
  color: #555;
  transition: all 0.3s ease;
}

.event-item.active {
  background-color: #fef6e4; /* สีเหลืองอ่อน */
  border-left: 5px solid #ff9900; /* แถบสีส้ม */
}

.event-more-details {
  margin-top: 10px;
  font-size: 0.9em;
  color: #555;
  transition: all 0.3s ease;
}
.esd .modal.data .focus-highlight:focus-within {
    border: 1px solid #007bff; /* Blue border when focused */
    transform: scale(1.01);
}

.esd .modal.data .focus-highlight {
    display: flex;
    border-radius: 5px;
    border: 1px solid gray;
    padding: 2px 5px;
    transform: scale(1);
    transition: all 0.2s ease; /* More visible transition */
}

    .esd .modal.data .focus-highlight label {
        min-width: fit-content;
        padding-right: 10px;
    }

.esd .modal.data .none {
    width: 100%;
    border: unset;
    background-color: white;
    border-radius: 5px;
}

    .esd .modal.data .none:focus {
        transition: all 0.2s ease; /* More visible transition */
        background-color: #e9ecef;
        border: none;
        outline: none; /* Optional: also remove blue focus ring */
        box-shadow: none; /* In case Bootstrap or other styles add focus effects */
    }

.esd .modal.data input:-webkit-autofill {
    background-color: transparent !important; /* หรือสีพื้นหลังที่คุณต้องการ */
    -webkit-box-shadow: 0 0 0px 1000px white inset !important; /* แก้ปัญหาขอบใน */
    box-shadow: 0 0 0px 1000px white inset !important;
    transition: background-color 5000s ease-in-out 0s; /* Hack ป้องกัน flash */
}

.full-screen .name-act {
    font-size: 2rem;
    font-weight: bold;
}

.full-screen .box-render {
    background-color: #f7fafc;
    padding: 30px 10px;
    border-radius: 15px;
    width: 800px;
    max-width: 90%;
    display: flex;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

#identitySection {
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.5s ease, margin 0.5s ease;
    max-height: 1000px; /* ค่าใหญ่พอครอบเนื้อหาปกติ */
    opacity: 1;
}

    #identitySection.hide {
        max-height: 0;
        opacity: 0;
        margin: 0;
    }

@media screen and (max-width: 450px) {
    .status-evote .btncount {
        font-size: 0.9rem;
        flex: 1;
        font-family: psuStidi-Bold;
        padding: 10px 10px;
        min-width: max-content;
        height: max-content;
    }
}
@media screen and (max-width: 768px) {
    .registration-status {
        justify-content: center;
    }

    .acttable .ethead {
        display: none;
    }

    .studentdev .animate-expand {
        max-height: 160px;
    }

    .actpage .crop-scroll .acttable {
        max-width: 100%;
        min-width: 0px;
    }

    .acttable .etdata .redata {
        flex-direction: column;
    }

        .acttable .etdata .redata div::before {
            content: attr(data-label);
            left: 1rem;
            font-weight: bold;
            text-align: left;
        }

        .acttable .etdata .redata div {
            text-align: left;
        }

    .actpage .crop-scroll .acttable .slide-toggle.show {
        max-height: 110px; /* ปรับตามความสูงของกล่อง */
    }

    .actpage .crop-scroll .acttable .slide-toggle {
        flex-direction: column;
    }

    .actpage .crop-scroll .acttable .etdata {
        padding: 0.5rem 0.5rem;
    }

    .actpage .crop-scroll .acttable .regist-btn {
        width: 80%;
        margin: 10px;
    }

    .studentdev .calender .activity-item {
        display: flex;
        flex-direction: column;
        width: 90px;
        padding: 7px;
        background: var(--primary-color);
        border-radius: 15px;
    }

        .studentdev .calender .activity-item .bottom .int {
            font-size: 1.3rem;
            margin-top: -5px;
            margin-bottom: -5px;
        }
    .studentdev .report .col-id {
        width: 50px;
    }

    .studentdev .report .col-date {
        width: 70px;
    }

    .studentdev .report .col-title {
        width: auto;
    }
    /* กินพื้นที่ที่เหลือ */
    .studentdev .report .col-type {
        width: 65px;
    }

    .studentdev .report .col-status {
        width: 40px;
    }

    .studentdev .report .e-table td .box {
        width: 100%;
        max-width: 30px;
        min-width: 0px;
    }
    .studentdev .report .e-table th .details,
    .studentdev .report .e-table td .details {
        max-width: 90%; /* กำหนดความกว้าง */
    }
    .lastAct-carousel .slick-slide.slick-current {
        transform: scale(0.9); /* ปรับขนาดให้ใหญ่ขึ้นในมือถือ */
        opacity: 1;
        max-width: 80%;
    }

    .lastAct-carousel .slide-content .carousel-image {
        height: 200px; /* ลดความสูงของภาพ */
        border-radius: 12px;
    }

    .lastAct-carousel .slide-content .slide-title {
        font-size: 1rem;
    }

    .lastAct-carousel .slide-content .slide-date {
        font-size: 0.9rem;
    }
}
@media screen and (max-width: 992px) {
    body {
        background-color: lightblue;
    }

    .table .tbody .tr .state {
        min-width: max-content;
    }
}