/*!* edit user profile *!*/

/*fieldset {*/
/*  min-width: 0;*/
/*  padding: 0;*/
/*  margin: 0;*/
/*  border: none;*/
/*}*/

/*.row {*/
/*  display: flex;*/
/*  -ms-flex-wrap: wrap;*/
/*  flex-wrap: wrap;*/
/*  margin-right: -15px;*/
/*  margin-left: -15px;*/
/*}*/

/*.profile {*/
/*  margin-right:100px;*/
/*  flex: 0 0 33.333333%;*/
/*  max-width: 33.333333%;*/
/*}*/

/*.d-none {*/
/*  display:none!important;*/
/*}*/

/*.alert {*/
/*  position: relative;*/
/*  padding: .75rem 1.25rem;*/
/*  margin-bottom: 1rem;*/
/*  border: 1px solid transparent;*/
/*  border-radius: .25rem;*/
/*}*/

/*.alert-info {*/
/*  color: #0c5460;*/
/*  background-color: #d1ecf1;*/
/*  border-color: #bee5eb;*/
/*}*/

/*.alert-info a {*/
/*  color: #ffffff;*/
/*}*/

/*.alert-info a:hover {*/
/*  color: #4286b6;*/
/*}*/


/*.error-message {*/
/*    color: #ff0000;*/
/*    font-weight: bold;*/
/*    background-color: #f8d7da;*/
/*    border: 1px solid #f5c6cb;*/
/*    padding: 5px;*/
/*    border-radius: 4px;*/
/*}*/
/*.profile-image-container {*/
/*    text-align:center;*/
/*    margin:50px auto;*/
/*    width: 150px;*/
/*    height: 150px;*/
/*    overflow: hidden;*/
/*    border-radius: 50%;*/
/*    border: 2px solid #ccc;*/
/*    position: relative;*/
/*    cursor: pointer;*/
/*    transition: border-color 0.3s ease;*/
/*}*/

/*.profile-image-container:hover {*/
/*    border-color: #007bff;*/
/*}*/

/*.profile-image-container img {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    object-fit: cover;*/
/*    border-radius: 50%;*/
/*}*/

/*.choose-file-text {*/
/*    position: absolute;*/
/*    bottom: 10px;*/
/*    left: 50%;*/
/*    transform: translateX(-50%);*/
/*    background-color: rgba(0, 0, 0, 0.5);*/
/*    color: white;*/
/*    padding: 5px 10px;*/
/*    border-radius: 20px;*/
/*    font-size: 12px;*/
/*    text-align: center;*/
/*    display: none;*/
/*}*/

/*.profile-image-container:hover .choose-file-text {*/
/*    display: block;*/
/*}*/

/*label {*/
/*  display: inline-block;*/
/*  margin-bottom: 0.8rem;*/
/*  font-weight:600;*/
/*}*/

/*.form-control {*/
/*  display: block;*/
/*  width: 100%;*/
/*  height: calc(1.5em + .75rem + 2px);*/
/*  padding: .375rem .75rem;*/
/*  font-size: 1rem;*/
/*  font-weight: 400;*/
/*  line-height: 1.5;*/
/*  color: #495057;*/
/*  background-color: #fff;*/
/*  background-clip: padding-box;*/
/*  border: 1px solid #ced4da;*/
/*  border-radius: .25rem;*/
/*  transition: border-color .15s*/
/*  ease-in-out, box-shadow .15s*/
/*  ease-in-out;*/
/*  margin-bottom:20px;*/
/*}*/


/*!** update user type page **!*/

/*input[type='color'], input[type='date'], input[type='datetime'], input[type='datetime-local'], input[type='email'], input[type='month'], input[type='number'], input[type='password'], input[type='search'], input[type='tel'], input[type='text'], input[type='url'], input[type='week'], input:not([type]), textarea, select {*/
/*  -webkit-appearance: none;*/
/*  display:block;*/
/*  background-color: transparent;*/
/*  border: 0.1rem solid #d1d1d1;*/
/*  border-radius: .4rem;*/
/*  box-shadow: none;*/
/*  box-sizing: inherit;*/
/*  height: 2rem;*/
/*  padding: .6rem 1.0rem .7rem;*/
/*  width: 50%;*/
/*  margin-bottom:20px;*/
/*}*/

/*input[type='radio'] {*/
/*  appearance: none; !* remove default styling *!*/
/*  border:1px solid #3068d9;*/
/*  border-radius:50%;*/
/*  width: 15px;*/
/*  height: 15px;*/
/*  position: relative;*/
/*  margin:10px 6px 0 10px;*/
/*  cursor:pointer;*/
/*}*/

/*input[type="radio"]:checked {*/
/*  background-color: #3068d9; !* bg for the checked state *!*/
/*  border-color: #3068d9;*/
/*}*/

/*input[type="radio"]:checked::after {*/
/*  content: '';*/
/*  display: block;*/
/*  width: 10px;*/
/*  height: 10px;*/
/*  background-color: white; !* inner dot color *!*/
/*  border-radius: 50%;*/
/*  position: absolute;*/
/*  top: 50%;*/
/*  left: 50%;*/
/*  transform: translate(-50%, -50%);*/
/*}*/

/*.update-user-type {*/
/*  display:inline;*/
/*}*/

/*.update-user-type-options { !* options text *!*/
/*  margin-left:20px;*/
/*}*/

/*.update-user-type label { !* options label *!*/
/*  font-weight:normal;*/
/*}*/

/*label.update-user-type-label { !* select new role *!*/
/*  font-weight:600;*/
/*  margin-right:40px;*/
/*}*/

/*.update-user-type.fieldset {*/
/*  border:none;*/
/*}*/

/*.security-reminder {*/
/*  color: #EF233C;*/
/*  font-weight: bold;*/
/*  margin-top: 20px;*/
/*}*/

/*@media (max-width: 992px) {*/
/*  .profile {*/
/*    flex: 0 0 50%;*/
/*    max-width: 50%;*/
/*    margin-right: 0;*/
/*  }*/

/*  input[type='text'],*/
/*  input[type='email'],*/
/*  select,*/
/*  textarea {*/
/*    width: 80%;*/
/*  }*/
/*}*/

/*@media (max-width: 768px) {*/
/*  .row {*/
/*    flex-direction: column;*/
/*    margin: 0;*/
/*  }*/

/*  .profile {*/
/*    flex: 0 0 100%;*/
/*    max-width: 100%;*/
/*    margin: 0 auto 30px;*/
/*  }*/

/*  input[type='text'],*/
/*  input[type='email'],*/
/*  select,*/
/*  textarea {*/
/*    width: 100%;*/
/*  }*/

/*  .profile-image-container {*/
/*    width: 120px;*/
/*    height: 120px;*/
/*  }*/

/*  .choose-file-text {*/
/*    font-size: 10px;*/
/*    padding: 3px 8px;*/
/*  }*/

/*  label {*/
/*    font-size: 0.9rem;*/
/*  }*/

/*  .form-control {*/
/*    font-size: 0.9rem;*/
/*    height: auto;*/
/*  }*/
/*}*/

/*@media (max-width: 480px) {*/
/*  body {*/
/*    padding: 0 10px;*/
/*  }*/

/*  .profile-image-container {*/
/*    width: 100px;*/
/*    height: 100px;*/
/*  }*/

/*  .update-user-type-options {*/
/*    margin-left: 10px;*/
/*  }*/

/*  .alert {*/
/*    font-size: 0.85rem;*/
/*    padding: .5rem .8rem;*/
/*  }*/

/*  label.update-user-type-label {*/
/*    margin-right: 10px;*/
/*  }*/

/*  input[type='radio'] {*/
/*    width: 14px;*/
/*    height: 14px;*/
/*  }*/
/*}*/

/*!* ===== Edit User Page Layout Enhancements ===== *!*/

/*!* Wraps entire edit profile area *!*/
/*.table-card fieldset {*/
/*  border: none;*/
/*  padding: 30px;*/
/*  border-radius: 16px;*/
/*  background-color: #fff;*/
/*  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);*/
/*  margin: 30px auto;*/
/*  max-width: 1200px;*/
/*}*/

/*!* Headings *!*/
/*.table-card h2 {*/
/*  font-size: 1.8rem;*/
/*  margin-bottom: 30px;*/
/*  color: #2b2b2b;*/
/*  border-bottom: 3px solid #3068d9;*/
/*  display: inline-block;*/
/*  padding-bottom: 5px;*/
/*}*/

/*!* Each profile section (profile image, info form, enrolments) *!*/
/*.row {*/
/*  display: flex;*/
/*  flex-wrap: wrap;*/
/*  gap: 30px;*/
/*  justify-content: space-between;*/
/*}*/

/*!* Left profile image column *!*/
/*.profile:first-of-type {*/
/*  flex: 0 0 25%;*/
/*  max-width: 25%;*/
/*  text-align: center;*/
/*  background: #f9fafc;*/
/*  padding: 20px;*/
/*  border-radius: 12px;*/
/*  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);*/
/*}*/

/*!* Middle section: user form *!*/
/*.profile:nth-of-type(2) {*/
/*  flex: 0 0 40%;*/
/*  max-width: 40%;*/
/*  background: #ffffff;*/
/*  padding: 25px 30px;*/
/*  border-radius: 12px;*/
/*  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);*/
/*}*/

/*!* Right section: enrolment records *!*/
/*.profile:last-of-type {*/
/*  flex: 0 0 30%;*/
/*  max-width: 30%;*/
/*  background: #f9fafb;*/
/*  padding: 25px;*/
/*  border-radius: 12px;*/
/*  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);*/
/*}*/

/*!* Enrolment record header *!*/
/*.profile:last-of-type h5 {*/
/*  font-size: 1.2rem;*/
/*  color: #2b2b2b;*/
/*  margin-bottom: 20px;*/
/*  border-bottom: 2px solid #3068d9;*/
/*  padding-bottom: 5px;*/
/*}*/

/*!* Individual enrolment cards *!*/
/*.profile:last-of-type .card {*/
/*  margin-bottom: 15px;*/
/*  border: 1px solid #ddd;*/
/*  border-radius: 10px;*/
/*  overflow: hidden;*/
/*  transition: transform 0.2s ease, box-shadow 0.2s ease;*/
/*}*/

/*.profile:last-of-type .card:hover {*/
/*  transform: translateY(-3px);*/
/*  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);*/
/*}*/

/*.cartoon-card-header {*/
/*  background-color: #3068d9;*/
/*  color: #fff;*/
/*  padding: 10px;*/
/*  font-weight: 600;*/
/*}*/

/*.cartoon-card-title {*/
/*  color: #fff;*/
/*  text-decoration: none;*/
/*}*/

/*.cartoon-card-title:hover {*/
/*  text-decoration: underline;*/
/*}*/

/*.cartoon-card-body {*/
/*  background-color: #ffffff;*/
/*  padding: 15px;*/
/*  color: #333;*/
/*}*/

/*!* File upload list styling *!*/
/*.file-upload-requirements ul {*/
/*  padding-left: 20px;*/
/*  margin-top: 8px;*/
/*}*/

/*!* === Responsive Layout === *!*/
/*@media (max-width: 992px) {*/
/*  .row {*/
/*    flex-direction: column;*/
/*    align-items: center;*/
/*  }*/

/*  .profile {*/
/*    flex: 1 1 100%;*/
/*    max-width: 90%;*/
/*    margin-bottom: 25px;*/
/*  }*/

/*  .profile:first-of-type,*/
/*  .profile:nth-of-type(2),*/
/*  .profile:last-of-type {*/
/*    box-shadow: none;*/
/*    background: #fff;*/
/*  }*/

/*  .profile:last-of-type {*/
/*    border-top: 1px solid #ddd;*/
/*    padding-top: 20px;*/
/*  }*/
/*}*/

/*@media (max-width: 480px) {*/
/*  .table-card fieldset {*/
/*    padding: 15px;*/
/*  }*/

/*  .table-card h2 {*/
/*    font-size: 1.4rem;*/
/*  }*/

/*  .profile {*/
/*    max-width: 100%;*/
/*  }*/
/*}*/

.profile-image-container {
  width: 150px;
  height: 150px;
  margin: 0 auto 20px auto;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #ccc;
  position: relative;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.profile-image-container:hover {
  border-color: #3068d9;
}

.profile-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* keeps aspect ratio while filling circle */
  border-radius: 50%;
}

.choose-file-text {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 12px;
  text-align: center;
  display: none;
}

.profile-image-container:hover .choose-file-text {
  display: block;
}

.table-card fieldset {
  border: none;
  padding: 40px 35px;
  border-radius: 16px;
  background-color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  margin: 40px auto;
  max-width: 1200px;
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 25px;
  flex-wrap: nowrap;
}

.profile {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

.profile:first-of-type {
  flex: 0 0 25%;
  text-align: center;
}

.profile:nth-of-type(2) {
  flex: 0 0 40%;
  padding: 10px 20px;
  background-color: #fafbfc;
  border-radius: 10px;
}

.profile:last-of-type {
  background-color: #fafbfc;
  padding: 15px 20px;
  border-radius: 10px;
  overflow-y: auto;
  max-height: 80vh;
}

.alert-info .button {
  margin-bottom:20px;
}

/* Headings */
.table-card h2 {
  font-size: 1.8rem;
  margin-bottom: 25px;
  color: #2b2b2b;
  border-bottom: 3px solid #3068d9;
  display: inline-block;
  padding-bottom: 5px;
}

.profile:last-of-type .card {
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: none;
}

.profile:last-of-type .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

.cartoon-card-header {
  background-color: #3068d9;
  color: #fff;
  padding: 10px;
  font-weight: 600;
}

.cartoon-card-body {
  background-color: #ffffff;
  padding: 15px;
  color: #333;
}

@media (max-width: 992px) {
  .table-card fieldset {
    padding: 30px 25px;
    margin: 25px 15px;
  }

  .row {
    flex-direction: column;
    gap: 25px;
  }

  .profile {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .profile:nth-of-type(2),
  .profile:last-of-type {
    background-color: #fafbfc;
    border-radius: 10px;
    padding: 15px;
  }
}
@media (max-width: 768px) {
  .table-card fieldset {
    padding: 30px 25px; /* slightly larger padding */
    border-radius: 12px;
  }

  .row {
    flex-direction: column;
    gap: 35px; /* increase gap between stacked elements */
  }

  .profile {
    flex: 1 1 100%;
    max-width: 100%;
    margin-bottom: 30px; /* add bottom spacing */
  }

  .profile:nth-of-type(2),
  .profile:last-of-type {
    padding: 20px 15px;
    border-radius: 10px;
    background-color: #fafbfc;
  }

  .profile-image-container {
    margin-bottom: 25px;
  }

  .table-card h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
  }
}

@media (max-width: 480px) {
  .table-card fieldset {
    padding: 25px 20px;
    margin: 20px 10px;
  }

  .row {
    gap: 40px; /* more separation for narrow screens */
  }

  .profile {
    margin-bottom: 40px;
  }

  .profile:nth-of-type(2),
  .profile:last-of-type {
    padding: 20px;
  }

  .cartoon-card-body {
    padding: 12px;
    font-size: 0.9rem;
  }
}