form.hidden .button {
    display: none;
}
form.hidden input {
    display: none;
}


.login-form {
  display: flex;
  gap: 5px;
  padding: 20px;
  justify-content: center;
  align-content: center;
  text-align: center;
}

.login-form .col1 {
  flex: 1;
  align-content: center;
}

.login-form .col2 {
  flex: 0.1;
  align-content: center;
  color: #aaa;
}

.login-form .col2 .line {
  height: 70px;
  display: block;
  width: 1px;
  background: #aaa;
  margin: auto;
}

.login-form .col1 .sign-up {
  margin-bottom: 20px;
}

.login-form .col1 a {
    display: block;
    text-align: center;
    direction: rtl;
}

.login-form .button i {
    color: #fff;
}

.login-form .button {
    margin-top: 20px;
}

.login-form .button::before {
    background-color: #ffa7a7 !important;
}

.login-form .button:hover i {
    color: #fff;
}

.login-form input {
  width: 100% !important;
    text-align: center;
}

.login-form .col1 a.button {
  color: #fff;
}

.dashboard-menu {
  padding: 20px;
  background: #ffcaca;
  border-radius: 10px;
}

.dashboard-item {
  background: #ffcaca;
  border-radius: 15px;
}

.dashboard-item .profile-form {
  display: flex;
  padding: 20px;
}

.dashboard-item .profile-form .avatar-col {
  flex: 0.3;
  padding: 10px;
}

.dashboard-item .profile-form .details-col {
  flex: 1;
  padding: 10px;
}

.profile-form .avatar-col .button {
  padding: 10px;
}

.dashboard-item .my-avatar {
    width: 128px;
    height: 128px;
    display: block;
    margin: 20px auto;
    border-radius: 50%;
    border: 4px solid var(--mfn-woo-themecolor);
}

.dashboard-item .profile-form input, .dashboard-item .profile-form select {
    width: 100%;
    color: #000;
    border: 2px solid var(--mfn-woo-themecolor);
    border-radius: 25px;
}
.dashboard-item .profile-form label {
  margin-top: 15px;
}

.dashboard-item .profile-form select {
    padding-right: 40px;
}

.dashboard-item .hint {
  margin: 0;
  font-size: 12px;
  text-align: center;
  line-height: 16px;
}

.profile-form .details .row {
  display: flex;
  width: 100%;
}

.dashboard-item .profile-form .details {
  flex: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.details-col .button.pw-button {
  padding: 10px;
  margin: 2px;
  text-align: center;
}

.dashboard-menu .my-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 20px auto;
    display: block;
    border: 4px solid var(--mfn-woo-themecolor);
}

.dashboard-menu .username {
  font-weight: bold;
  font-style: italic;
  color: var(--mfn-woo-bg-themecolor);
  text-align: center;
  display: block;
  margin-bottom: 20px;
  direction: ltr;
}

.dashboard-menu .button.logout-button {
    padding: 10px;
    background: #f24949;
    color: #fff;
    margin-top: 30px !important;
}

.dashboard-menu .button.logout-button i {
    color: #fff;
}

.dashboard-menu .button.logout-button:hover, .dashboard-menu .button.logout-button::before {
    background-color: #ff7b7b;
}

.dashboard-item .hint.green {
  color: #2ab66e;
}

.profile-form .button.save-button {
  padding: 15px;
  margin: auto;
  width: 200px;
  color: #fff;
}

.dashboard-item .profile-form #phone, .dashboard-item .profile-form #email {
    text-align: center;
}

.hint a {
  cursor: pointer;
}

.popup-panel.password {
  width: 400px;
}

.popup-panel #passwordForm {
  margin: auto;
  display: block;
  text-align: center;
  padding: 10px;
}

.popup-panel #passwordForm input {
  margin: 10px auto;
  text-align: center;
}

.popup-contents #passwordForm #submitButton {
  margin-top: 20px !important;
}

.profile-form #dob {
  cursor: pointer;
  text-align: center;
}

.test-history table thead tr th {
    background: #ff9292 !important;
}

table thead th:last-child {
    border-top-left-radius: 10px;
}

table thead th:first-child {
    border-top-right-radius: 10px;
}

.test-history {
    padding: 20px;
    padding-bottom: 20px;
    min-height: 600px;
    position: relative;
    padding-bottom: 50px;
}

.test-history a.button {
    margin: 0;
    padding: 10px;
    background: #ffeaea;
}

.test-history table thead tr {
    border-bottom: 1px solid #999 !important;
}

.test-history table tr th:last-child {
    border-right: 1px solid rgba(0, 0, 0, .08) !important;
    border-color: rgba(0, 0, 0, .08);
}

.test-history .pagination {
    background: #ffe3e3;
    border-radius: 15px;
    position: absolute;
    bottom: 10px;
    padding: 2px 10px;
    left: 0;
    display: flex;
    justify-content: center;
    align-content: center;
    gap: 10px;
    width: max-content;
    left: 50%;
    transform: translateX(-50%);
}

.test-history .pagination a.current {
    color: var(--mfn-woo-body-color);
}

.test-history .center-att {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
}

.dashboard-menu .button {
    margin: 5px auto !important;
}

.top-row {
    padding: 20px;
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-content: center;
    justify-content: center;
}

.top-row .card {
    flex: 1;
    background: var(--mfn-woo-bg-themecolor);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

.top-row .card i {
    text-align: center;
    padding: 10px;
    font-size: 32px;
}

.top-row .card .value {
    font-size: 20px;
    font-weight: bold;
    padding: 10px;
}

.analysis .ui-tabs .ui-tabs-nav li a {
    display: inline-block;
    padding: 5px 10px;
}
.analysis i {
    display: inline-block;
    margin-right: 8px;
}

.analysis li {
    padding: 0 10px !important;
}

.analysis li.ui-state-active.listening a {
    color: #17abd8 !important;
}

.analysis li.ui-tabs-active.listening {
    color: #17abd8;
    background: #fff;
}

.analysis li.ui-state-active.reading a {
    color: #32a618 !important;
}

.analysis li.ui-tabs-active.reading {
    color: #32a618;
    background: #fff;
}

.analysis li.ui-state-active.writing a {
    color: #d8b817 !important;
}

.analysis li.ui-tabs-active.writing {
    color: #d8b817;
    background: #fff;
}

.analysis li.ui-state-active.speaking a {
    color: #d81784 !important;
}

.analysis li.ui-tabs-active.speaking {
    color: #d81784;
    background: #fff;
}

.analysis .ui-tabs-tab {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.analysis {
    padding: 20px;
}

.analysis .ui-tabs-panel {
    background: #fff !important;
}

.analysis-report {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
}

.analysis-report table {
    font-size: 14px;
}

.analysis-report .col1  {
    flex: 1;
    align-content: center;
}

.analysis-report thead tr th {
    color: #fff;
}

.analysis-report.listening thead tr th {
    background: #17abd8 !important;
}

.analysis-report.reading thead tr th {
    background: #17d82c !important;
}

.analysis-report.writing thead tr th {
    background: #d8b117 !important;
}

.analysis-report.speaking thead tr th {
    background: #d81784 !important;
}