@charset "utf-8";
/* CSS Document */
html {
  /*Keeps Vert Scrollbar on in Firefox at all time and avoids image shifting- do not delete*/
  overflow: -moz-scrollbars-vertical;
  overflow-y: scroll;
}
body {
  background-color: #efefef;
  border: 0px;
  padding: 25px 0px;
  margin: 0px auto;
}

.container {
  background-color: #ffffff;
  margin: 0px auto 0px auto;
  padding-top: 0px;
  padding-bottom: 3px;
  width: 810px;
}
div.plainViewHeader {
  padding: 5px 0px 0px 0px;
  font-family: Verdana, Geneva, sans-serif;
  color: #335878;
  font-weight: bold;
  font-size: 18px;
  text-align: left;
}
div.plainView {
  margin: 10px 25px 50px 25px;
  padding: 0px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  text-align: left;

  color: #3c3c3c;

  background-color: #ffffff;
}

/* CSS Header */
.header {
  margin-bottom: 10px;
}
.famTitle {
  font-family: Verdana, Geneva, sans-serif;
  color: #335878;
  font-weight: bold;
  font-size: 26px;
  padding-top: 14px;
}

.topNagivation {
  margin-right: 150px;
  padding-top: 10px;
  list-style-type: none;
  font-family: Verdana, Geneva, sans-serif;
  color: #3c3c3c;
  font-size: 12px;
  text-align: center;
}

.topNagivation a {
  padding-right: 10px;
  padding-left: 10px;
  text-decoration: none;
  font-family: Verdana, Geneva, sans-serif;
  color: #3c3c3c;
  font-size: 12px;
}
.topNagivationAdmin {
  margin: 0px;
  padding-top: 10px;
  list-style-type: none;
  font-family: Verdana, Geneva, sans-serif;
  color: #3c3c3c;
  font-size: 12px;
  text-align: left;
}
.topNagivationAdmin a {
  padding: 8px;
  padding-left: 8px;
  text-decoration: none;
  font-family: Verdana, Geneva, sans-serif;
  color: #3c3c3c;
  font-size: 12px;
}
.topNagivationAdmin a:hover {
  padding-right: 8px;
  padding-left: 8px;
  text-decoration: none;
  font-family: Verdana, Geneva, sans-serif;
  color: #000000;
  font-size: 12px;
}

.topNagivation a:hover {
  padding-right: 10px;
  padding-left: 10px;
  text-decoration: none;
  font-family: Verdana, Geneva, sans-serif;
  color: #000000;
  font-size: 12px;
}
.topNagivation a.current {
  padding-right: 10px;
  padding-left: 10px;
  cursor: default;
  text-decoration: none;
  font-family: Verdana, Geneva, sans-serif;
  color: #000000;
  font-size: 12px;
}

li a {
  padding-right: 10px;
  padding-left: 10px;
  text-decoration: none;
  font-family: Verdana, Geneva, sans-serif;
  color: #3c3c3c;
  font-size: 12px;
}

li a:hover {
  padding-right: 10px;
  padding-left: 10px;
  text-decoration: none;
  font-family: Verdana, Geneva, sans-serif;
  color: #000000;
  font-size: 12px;
}
/* topLeft corner css for FAM Title and menu bar */

/* CSS content */

/* CSS footer */
.footer {
  margin-top: 10px;
}
.securityContent {
  margin: 10px 10px 8px 10px;
  text-align: center;
  font-family: Verdana, Geneva, sans-serif;
  color: #a1a1a1;
  font-size: 10px;
  line-height: 120%;
  word-spacing: 1px;
}
.Footerlogo {
  text-align: center;
  padding-bottom: 10px;
}

.bottomNagivation {
  padding-top: 16px;
  padding-bottom: 5px;
  width: 100%;
  text-align: center;
  padding-right: 0px;
  list-style-type: none;
  font-family: Verdana, Geneva, sans-serif;
  color: #4e4e4e;
  font-size: 11px;
}
.bottomNagivation a {
  padding-right: 10px;
  padding-left: 10px;
  text-decoration: none;
  font-family: Verdana, Geneva, sans-serif;
  color: #4e4e4e;
  font-size: 11px;
}
.bottomNagivation a:hover {
  text-decoration: none;
  font-family: Verdana, Geneva, sans-serif;
  color: #000000;
  font-size: 11px;
}
.copyRight {
  width: 730px;
  margin: 0px auto 5px auto;
  padding: 5px 0px 0px 0px;
  text-align: center;
  font-family: Verdana, Geneva, sans-serif;
  color: #a1a1a1;
  font-size: 11px;
}

.securityPolicy a {
  text-decoration: none;
  font-family: Verdana, Geneva, sans-serif;
  color: #7f99af;
  font-size: 11px;
}
.securityPolicy a:hover {
  text-decoration: none;
  font-family: Verdana, Geneva, sans-serif;
  color: #335878;
  font-size: 11px;
}

.leftContent {
  cursor: pointer;
  background: url(../slices/caa_whiteArea_372x252.jpg) no-repeat;
  width: 372px;
  height: 252px;
  margin: 20px 0px 10px 25px;
  padding: 10px;
  font-family: Verdana, Geneva, sans-serif;
  color: #3c3c3c;
  font-size: 12px;
}

.leftContentDetail {
  margin: 35px 35px 0px 23px;
  font-family: Verdana, Geneva, sans-serif;
  color: #3c3c3c;
  font-size: 12px;
}
.leftContentDetailAdmin {
  margin: 10px 0px 0px 10px;
  padding: 0px;
  font-family: Verdana, Geneva, sans-serif;
  color: #3c3c3c;
  font-size: 12px;
}

#htmlAdminTB {
  margin: 0px 0px 10px 0px;
  padding: 0px;
}

.LoginContent {
  cursor: pointer;
  background: url(../slices/caa_greyArea_372x252.jpg) no-repeat;
  width: 372px;
  height: 252px;
  margin: 0px 25px 10px 0px;
  padding: 0px;
}

.LoginContentDetail {
  width: 330px;
  height: 252px;
  padding: 10px;
  padding-left: 60px;
  padding-top: 30px;
  font-family: Verdana, Geneva, sans-serif;
  color: #3c3c3c;
  font-size: 12px;
}
.LoginDetail {
  width: 330px;
  height: 252px;
  padding: 10px;
  padding-left: 60px;
  padding-top: 50px;
  font-family: Verdana, Geneva, sans-serif;
  color: #3c3c3c;
  font-size: 12px;
}

.InputText {
  width: 248px;
  height: 29px;
  background: url(../slices/caa_textInput_trans.png) no-repeat;
  font-family: Verdana, Geneva, sans-serif;
  color: #000;
  font-size: 12px;
  border: 0px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 5px;
}

.LoginContent a {
  margin: 0px;
  text-decoration: none;
  font-family: Verdana, Geneva, sans-serif;
  color: #335878;
  font-size: 12px;
}
.LoginContent a:hover {
  margin: 0px;
  text-decoration: none;
  font-family: Verdana, Geneva, sans-serif;
  color: #3c3c3c;
  font-size: 12px;
}

.caaWindow {
  display: none;
}

.errMsg {
  color: #c0392b;
  font-size: 12px;
  font-weight: bold;
  background-color: #fdf2f2;
  border-left: 3px solid #c0392b;
  padding: 6px 10px;
  margin: 6px 0;
  display: block;
}

.goodMsg {
  color: #27ae60;
  font-size: 12px;
  font-weight: bold;
  background-color: #f2fdf5;
  border-left: 3px solid #27ae60;
  padding: 6px 10px;
  margin: 6px 0;
  display: block;
}

.TestDiv {
  cursor: pointer;
  width: auto;
  margin: 0px 0px 10px 25px;
  padding-top: 20px;
  font-family: Verdana, Geneva, sans-serif;
  color: #3c3c3c;
  font-size: 12px;
}

.testContent {
  padding-left: 35px;
}

div.subHeader_full {
  font-family: Verdana, Geneva, sans-serif;
  color: #5e7b94;
  font-size: 12px;
  font-weight: bold;
  width: 700px !important;
  width: 680px;
  padding-bottom: 20px;
}

.levelDiv {
  font-family: Verdana, Geneva, sans-serif;
  color: #8b422f;
  font-size: 12px;
  font-weight: bold;
}

.oneColumnLightBg {
  padding: 0px 10px;
  margin: 0px;
  float: left;
}

.testList {
  margin: 5px;
  height: 200px;
  width: 340px !important;
  width: 330px;
  padding: 0px 0px 10px 10px;
  overflow: auto;
}

.testList-full {
  margin: 5px;
  padding: 0px 0px 10px 10px;
}

.TestListContent {
  cursor: pointer;
  background: url(../slices/caa_whiteArea_372x252.jpg) no-repeat;
  width: 372px;
  height: 252px;
  margin: 0px 25px 10px 0px;
  padding-top: 10px;
}

.RoundTable {
    display: block;
    border: 1px solid #ccc; /* Match your existing border color */
    border-radius: 15px;    /* Matches the 'round' look */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    background: #fff;
    padding: 20px;
    height: auto !important; /* Ensure it grows with content */
    width: 763px;
}

/* .RoundTable {
  width: 763px;
} */

.RoundTable_Left_Top {
  background-image: url(../slices/LeftTop_Round.jpg);
  width: 17px;
  height: 17px;
  background-repeat: no-repeat;
}

.RoundTable_Top {
  background-image: url(../slices/TopLine.jpg);
  background-repeat: repeat-x;
}

.RoundTable_right_Top {
  background-image: url(../slices/RightTop.jpg);
  width: 17px;
  height: 17px;
  background-repeat: no-repeat;
}

.RoundTable_Middle_Left {
  background-image: url(../slices/LeftLine.jpg);
  background-repeat: repeat-y;
  height: 1px;
}

.RoundTable_Middle_right {
  background-image: url(../slices/RightLine.jpg);
  background-repeat: repeat-y;
  height: 1px;
}

.RoundTable_Left_Bottom {
  background-image: url(../slices/LeftBottom.jpg);
  background-repeat: no-repeat;
}

.RoundTable_Bottom {
  background-image: url(../slices/BottomLine.jpg);
  background-repeat: repeat-x;
}

.RoundTable_right_Bottom {
  background-image: url(../slices/RightBottom.jpg);
  background-repeat: no-repeat;
}

#countryTextBox {
  margin: 0px;
  width: 248px;
  height: 29px;
  background: url(../slices/caa_textInput_trans.png) no-repeat;
}

#countries {
  background: none;
  border: none;
  margin: 5px 0px 0px 6px;
  width: 238px;
  height: 20px;
  font-family: Verdana, Geneva, sans-serif;
  color: #6b6b6b;
  font-size: 11px;
}
#languageTextBox {
  margin: 0px;
  margin-top: 5px;
  width: 248px;
  height: 29px;
  background: url(../slices/caa_textInput_trans.png) no-repeat;
}
#languages {
  background: none;
  border: none;
  margin: 5px 0px 0px 6px;
  width: 238px;
  height: 20px;
  font-family: Verdana, Geneva, sans-serif;
  color: #6b6b6b;
  font-size: 11px;
}
.submit {
  margin-left: 10px;
}
#changePassword {
  margin: 20px 0px 50px 0px;
}
#changePassword a {
  margin: 0px;
  text-decoration: none;
  font-family: Verdana, Geneva, sans-serif;
  color: #335878;
  font-size: 12px;
}
#changePassword a:hover {
  margin: 0px;
  text-decoration: none;
  font-family: Verdana, Geneva, sans-serif;
  color: #3c3c3c;
  font-size: 12px;
}

.contentPaneOneColumnLightBg {
  cursor: default;
  background: url(../slices/caa_grey_passWdArea_383x298.png) no-repeat;
  width: 383px;
  height: 298px;
  margin: 0px 0px 10px 85px;
  padding: 35px 0px 0px 40px;
  font-family: Verdana, Geneva, sans-serif;
  color: #3c3c3c;
  font-size: 12px;
}
.contentPaneOneColumnLightBg a {
  margin: 0px;
  text-decoration: none;
  font-family: Verdana, Geneva, sans-serif;
  color: #335878;
  font-size: 12px;
}
.contentPaneOneColumnLightBg a:hover {
  margin: 0px;
  text-decoration: none;
  font-family: Verdana, Geneva, sans-serif;
  color: #3c3c3c;
  font-size: 12px;
}
.titleContent {
  margin: 20px 0px 10px 145px;
  color: #741d06;
  font-family: Verdana, Geneva, sans-serif;
  font-weight: bold;
  font-size: 12px;
}

.textFieldBox {
  margin: 3px 0px 10px 0px;
  width: 248px;
  height: 29px;
  background: url(../slices/caa_textInput_trans.png) no-repeat;
}
.textField {
  background: none;
  border: none;
  margin: 3px 0px 0px 6px;
  width: 238px;
  height: 20px;
  font-family: Verdana, Geneva, sans-serif;
  color: #6b6b6b;
  font-size: 12px;
}
.forgotPassword {
  cursor: default;
  background: url(../slices/caa_grey_forgotPassWd.png) no-repeat;
  width: 383px;
  height: 194px;
  margin: 30px 0px 0px 85px;
  padding: 35px 0px 0px 40px;
  font-family: Verdana, Geneva, sans-serif;
  color: #3c3c3c;
  font-size: 12px;
}
.forgotPassword a {
  margin: 0px;
  text-decoration: none;
  font-family: Verdana, Geneva, sans-serif;
  color: #335878;
  font-size: 12px;
}
.forgotPassword a:hover {
  margin: 0px;
  text-decoration: none;
  font-family: Verdana, Geneva, sans-serif;
  color: #3c3c3c;
  font-size: 12px;
}
#msgForgetPass {
  margin: 0px;
}

/* ---- UI Improvements ---- */

/* Input focus highlight */
.InputText:focus,
.textField:focus {
  outline: 2px solid #335878;
  outline-offset: 1px;
}

/* Password hint text */
small {
  display: block;
  color: #666;
  font-size: 11px;
  margin-bottom: 6px;
}

/* Responsive: allow container to shrink on smaller screens */
@media (max-width: 850px) {
  .container {
    width: 100%;
    max-width: 810px;
    box-sizing: border-box;
  }
  .RoundTable {
    width: 100%;
  }
}

/* Skip navigation link for accessibility */
.skip-nav {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-nav:focus {
  position: static;
  width: auto;
  height: auto;
  left: auto;
  top: auto;
  padding: 4px 8px;
  background: #335878;
  color: #fff;
  font-size: 12px;
  font-family: Verdana, Geneva, sans-serif;
  text-decoration: none;
  display: inline-block;
}



/* ---- Shared UI Refresh ---- */
body {
  color: #273645;
  font-family: Verdana, Geneva, sans-serif;
  line-height: 1.5;
}

.container {
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(33, 55, 76, 0.12);
  overflow: hidden;
}

.topNagivation {
  margin-right: 110px;
  line-height: 1.8;
}

.topNagivation a {
  transition: color 0.2s ease;
}

.leftContent,
.LoginContent,
.TestListContent,
.contentPaneOneColumnLightBg,
.forgotPassword {
  border-radius: 18px;
  box-shadow: 0 14px 28px rgba(36, 50, 66, 0.12);
}

.InputText,
.textField {
  box-sizing: border-box;
}

#msgDiv {
  margin-top: -25px;
}

#msgForgetPass {
  margin: 12px 0px 0px 0px;
}

.errMsg,
.goodMsg {
  border-radius: 0 10px 10px 0;
}

.errMsg:empty,
.goodMsg:empty {
  display: none;
}

#msgDiv .errMsg,
#msgDiv .goodMsg,
#msgForgetPass .errMsg,
#msgForgetPass .goodMsg {
  box-shadow: 0 10px 24px rgba(27, 39, 51, 0.08);
}

/* Add padding to the container holding the level image */
#testDetailDiv {
    padding-bottom: 50px; /* Adjust this value as needed to fit the image */
}


.TestDiv {
  line-height: 1.6;
}

@media (max-width: 850px) {
  .container {
    border-radius: 0;
  }

  .topNagivation {
    margin-right: 0;
    padding: 10px 16px 0;
  }

  .leftContent,
  .LoginContent,
  .TestListContent,
  .contentPaneOneColumnLightBg,
  .forgotPassword {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---- Admin Layout Restore ---- */
.admin-page .caaWindow {
  display: block;
}

.admin-page .adminHeader {
  height: 120px;
  width: 760px;
  background-image: url(../images/caaa_logo.gif);
  background-repeat: no-repeat;
  background-position: 25px 20px;
}

.admin-page .menu {
  float: right;
  height: 35px;
  width: 600px;
}

.admin-page .menu .tab {
  float: right;
  text-align: center;
  width: 150px;
  height: 35px;
}

.admin-page .subHeaderLightBg {
  height: 20px;
  width: 760px;
  margin-left: 20px;
  background-image: url(../images/sub_headerLightBg.gif);
  background-repeat: no-repeat;
}

.admin-page .subHeader_full {
  width: 760px !important;
  float: left;
  padding-left: 40px;
  padding-bottom: 0;
}

.admin-page .contentPaneOneColumnLightBg {
  background: #e8e8eb;
  width: 740px !important;
  min-height: 120px;
  height: auto;
  margin: 0 0 0 20px;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

.admin-page .oneColumnLightBg {
  background-color: #e8e8eb;
  padding: 20px 10px;
  margin: 0;
  width: 720px;
  float: left;
}

.admin-page .roundedCornerBottomLightBg {
  width: 740px;
  height: 15px;
  margin: 0;
  background-image: url(../images/caa_light_bottom.gif);
  background-repeat: no-repeat;
  background-position: bottom;
  clear: both;
}

.admin-page #msgDiv {
  clear: both;
  margin: 16px 10px 0;
}

.admin-page .resultsDivHeader {
  margin: 0 10px !important;
  padding: 0 0 0 1px !important;
  min-height: 20px;
  width: 701px !important;
}

.admin-page .resultsDiv {
  border: 1px solid #000 !important;
  margin: 0 10px;
  padding-left: 1px;
  width: 700px !important;
  overflow-y: auto !important;
  overflow-x: auto;
  background: #dbdce1;
}

table.adminResults {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  background-color: #dbdce1;
  border: 1px solid #000;
}

table.adminResults th,
table.adminResults td {
  border: 1px solid #000;
  padding: 6px 8px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
}

table.adminResults th {
  font-weight: bold;
  text-align: center;
  background: #9999aa;
}

table.adminResults td {
  background-color: #dbdce1;
}

table.adminResults td.addeditDK,
table.adminResults td.idDK,
table.adminResults td.levelDK,
table.adminResults td.categoryDK,
table.adminResults td.promptDK,
table.adminResults td.countryNameDK,
table.adminResults td.languageDK,
table.adminResults td.activatedDK,
table.adminResults td.numResultsDK,
table.adminResults td.emailDK,
table.adminResults td.rolesDK,
table.adminResults td.counLangNameDK,
table.adminResults td.answerDK,
table.adminResults td.correctDK {
  background-color: #b9bae0;
}

table.adminResults td.prompt,
table.adminResults td.promptDK,
table.adminResults td.email,
table.adminResults td.emailDK,
table.adminResults td.counLangName,
table.adminResults td.counLangNameDK,
table.adminResults td.answer,
table.adminResults td.answerDK {
  text-align: left;
}

table.adminResults td.level,
table.adminResults td.levelDK,
table.adminResults td.category,
table.adminResults td.categoryDK,
table.adminResults td.countryName,
table.adminResults td.countryNameDK,
table.adminResults td.language,
table.adminResults td.languageDK,
table.adminResults td.activated,
table.adminResults td.activatedDK,
table.adminResults td.roles,
table.adminResults td.rolesDK,
table.adminResults td.id,
table.adminResults td.idDK,
table.adminResults td.correct,
table.adminResults td.correctDK,
table.adminResults td.addedit,
table.adminResults td.addeditDK {
  text-align: center;
}

table.adminResults td.numResults,
table.adminResults td.numResultsDK {
  width: 100%;
  text-align: left;
  background: #9999aa;
}

.account-page .contentPaneOneColumnLightBg {
  width: 383px;
  height: auto;
  min-height: 298px;
  margin: 0 0 10px 85px;
  padding: 35px 0 24px 40px;
}

.account-page .oneColumnLightBg {
  float: none;
  width: auto;
  padding: 0 10px 0 0;
}

.primaryButton {
  margin: 10px 0 0 8px;
  padding: 8px 14px;
  border: 1px solid #335878;
  background: #335878;
  color: #fff;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}

.primaryButton:hover {
  background: #27445d;
}

@media (max-width: 850px) {
  .admin-page .subHeaderLightBg,
  .admin-page .contentPaneOneColumnLightBg,
  .admin-page .roundedCornerBottomLightBg {
    width: 100% !important;
    margin-left: 0;
  }

  .admin-page .oneColumnLightBg,
  .admin-page .resultsDivHeader,
  .admin-page .resultsDiv {
    width: auto !important;
  }

  .account-page .contentPaneOneColumnLightBg {
    margin-left: auto;
    margin-right: auto;
  }
}

.dangerButton {
  margin: 10px 0 0 12px;
  padding: 8px 14px;
  border: 1px solid #a93226;
  background: #c0392b;
  color: #fff;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}

.dangerButton:hover {
  background: #962d22;
}