/* login icon */
.dafenbiao h3{
 text-align: center;   
 font-size: 16px !important;
}
video {
 max-width: 600px;
}
.container-component {
min-height: 450px;
}
.container-bottom-b {
background-color: #d8d8d8;
color: #333;
font-size: 14px;
text-align: center;
}
.container-banner {
margin-bottom: 5px !important;
}
.logo2 img {
width: 90%;
}
.eye-icon {
background-image: url("/123/images/eye-icon.png");
background-color: #ffffff;
}
.dj-megamenu-clean li a.dj-up_a {
  font-size: 18px !important;
  color: #4e7661 !important;
  height: 40px !important;
}
.dj-megamenu-clean li a.dj-up_a > span {
  height: 40px !important;
}
.dj-megamenu-clean li ul.dj-submenu > li > a {
 padding: 6px 10px !important;
}
/* falang more style need to module */
div.mod-languages li {
 margin-right: 15px;
}
.mod-languages {
 margin-right: 20px;
}
/** speaking template */
.sp-template {
margin-bottom: 20px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #cfe1d4;
}
.sp-sample {
margin-bottom: 20px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #f9f9f9;
}
.sp-template h4 {
 padding-left: 10px !important;
}
.sp-sample h4 {
 padding-left: 10px !important;
}
/* heading 
html[lang="en-gb"] #ariQuizContainer blockquote {
display: none !important;
}
*/
/** huo disable font
body {
font-family: "Microsoft YaHei" ! important;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
font-family: "Microsoft YaHei" ! important;
}
*/
h1, .h1 {
  font-size: 20px !important;
}
h2, .h2 {
  font-size: 19px !important;
}
html[lang="zh-CN"] h2, .h2 {
  font-size: 16px !important;
}
h3, .h3 {
  font-size: 19px !important;
}
h4, .h4 {
  font-size: 18px !important;
}
h5, .h5 {
  font-size: 16px !important;
}
h6, .h6 {
  font-size: 14px !important;
}
.alert-message {
  text-align: center !important;
  font-size: 20px !important;
}
table{
border: solid 1px #e0e0e0;
}
.breadcrumb {
background-color: #e2eaf5 !important;
}
/* marquee */
#mod-custom114 {
  max-width: 600px;
  float: left;
  width: 50%;
  text-align: center;
}
#mod-custom157 {
  float: left;
  width: 100px;
  margin-top: -25px;
  margin-left: 20px;
}
.scroll-container {
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            padding: 10px 0;
            position: relative;
        }
.scroll-text {
            display: inline-block;
            white-space: nowrap;
            position: absolute;
			top: 0;
            animation: scroll 15s linear infinite;
        }
        @keyframes scroll {
            from {
                transform: translateX(0%);
            }
            to {
                transform: translateX(-100%);
            }
        }
/* header */
.container-below-top {
 width: 100%;
 background-color: #fff;
}
.container-below-top .mod-custom {
 margin: 0 auto;
}
.container-header {
  background-color: #f7f7f7;
  box-shadow: unset;
  background-image: none;
}
.container-topbar {
  background-color: #4e7661;
  padding: 10px 0;
  text-align: right;
  min-height: 40px;
  margin-top: -26px;
}
.container-header .mod-menu {
  color: #4e7661;
}
/* menu center */
.container-header .container-nav {
  justify-content: center;
  padding-bottom: 0.5em !important;
}
.below-top-bg {
 padding: 10px 0;
}
.logo-img {
max-height: 40px;
margin-left: -10px;
}
/* footer */
.footer {
 background-color: #0f1823;
 background-image: none;
}
.footer .grid-child {
padding: .5em;
}
/* login */
.login-note {
  display: none;
}
.mod-login {
  width: 300px;
  margin: 0 auto;
  padding: 20px 10px 0;
}
.mod-login-logout {
  width: 200px;
  margin: 0 auto;
  padding: 20px;
}
#com-users-login__form {
  display: none;
}
.com-users-login__options  {
  display: none;
}
/* alert */
#system-message-container joomla-alert[type="info"], #system-message-container joomla-alert[type="notice"] {
  --alert-accent-color: #4e7661;
  --alert-heading-text: #fffffff2;
  --alert-close-button: #4e7661;
  background-color: #fff;
}
#system-message-container joomla-alert{
  border: 1px solid #4e7661;
}
/* menu */
.container-banner {
  background-color: #e2eaf5;
}
#navbar1 {
  margin-left: -16px;
}
.container-header .navbar-toggler {
  color: #333;
  cursor: pointer;
  border: none;
  position: fixed;
  left: 10px;
  top: 68px;
}
.navbar-toggler:focus {
  box-shadow: none;
}
/* button */
.btn-primary {
  --btn-color: #fff;
  --btn-bg: #4e7661;
  --btn-border-color: #4e7661;
  --btn-hover-color: #fff;
  --btn-hover-bg: #4e7661;
  --btn-hover-border-color: #4e7661;
  --btn-focus-shadow-rgb: 39,39,111;
  --btn-active-color: #fff;
  --btn-active-bg: #4e7661;
  --btn-active-border-color: #4e7661;
  --btn-active-shadow: inset 0 3px 5px #00000020;
  --btn-disabled-color: #fff;
  --btn-disabled-bg: #4e7661;
  --btn-disabled-border-color: #4e7661;
}
.btn-primary {
  background-color: #4e7661;
  border-color: #4e7661;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    background-color: #446754;
    box-shadow: inset -1px -1px 1px rgba(0, 0, 0, 0.15);
    color: #ffffff;
	border: 1px solid #4e7661;
}
.pagenavigation .btn-secondary {
  background-color: #4e7661 !important;
  color: #fff !important;
}
/* link */
a {
  color: #4e7661;
}
a:hover {
  color: #4e7661;
}
a:not([class]) {
  text-decoration: none !important;
}
/* component */
.container-component {
 max-width: 90% !important;
}
/* alert */
#system-message-container joomla-alert div{
 background-color: #e2eaf5;
}
/* huo add */
.aq-question-answers {
  margin-top: -20px !important;
  margin-bottom: -20px !important;
}
.reading-note {
  font-size: 14px;
  color: #333;
  margin-bottom: 10px;
}
/** gundong 
.ariQuizMainContainer {
  max-height: 330px;
  overflow-y: scroll;
  overflow-x: hidden;
  background-color: #eee;
  border-top: 2px solid #eee;
  border-radius: 5px;
  padding: 3px;
}
*/
.aq-button-panel{
margin-top: 20px;
}
.reading-left {
max-height: 580px;
overflow-y: scroll;
overflow-x: hidden;
border: solid 2px #ddd;
border-radius: 5px;
}
.reading-left img{
 max-height: 570px !important;
}
/** huo disable zh
html[lang="zh-CN"] .reading-left { 
max-height: 870px;
overflow-y: scroll;
overflow-x: hidden;
border: solid 2px #ddd;
border-radius: 5px;
}
*/
/** huo
html[lang="en-gb"] .aq-dt-results {
max-height: 750px;
}
/** RESULT */
.aq-dt-results {
max-height: 495px;
overflow-y: scroll;
overflow-x: hidden;
border: solid 2px #ddd;
border-radius: 5px;
background-color: #eee;
}
#ariQuizContainer .aq-status-panel {
    margin-bottom: 10px !important;
}
html[lang="zh-CN"] #ariQuizContainer .aq-status-panel {
    margin-bottom: -10px !important;
}
/*
.container-component nav {
    padding-top: 1px !important;
}
 */
#ariQuestions {
max-height: 375px;
overflow-y: scroll !important;
overflow-x: hidden !important;
border-top: solid 1px #ddd;
border-bottom: solid 2px #eee;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
#ariQuizContainer .pagination {
text-align: center;
}
#dtResults_pag {
 display: block;
}
#dtResults {
/**
  height: 1300px;
  overflow: scroll !important;
  */
}
#dtResults .clear {line-height:0px;}
#dtResults .aq-question-answers {display:none;}
#dtResults .aq-answer-result-summary {display:none;}
#ariQuizContainer .aq-question-panel-content {
    padding: 10px 0px 10px 10px !important;
    width: 99% !important;
    max-width: 99% !important;
}
@media screen and (max-width: 480px) {
#ariQuizContainer .aq-question-panel-content {
width: 98%;
}
}
/* ariquiz */
#limitactivelogins {
background: #fff;
margin-bottom:100px;
padding: 20px;
position: absolute;
top: 30px;
left: 0px;
z-index: 999999;
}
.w357kit-alert-danger {
padding: 10px 20px;
border: solid 1px #ddd;
border-radius: 4px;
background: #f9f9f9;
color: #3a5748;      
}
.chinese-trans-s {
  color: #666;
  font-size: 14px;
  font-style: italic;
}

#ariQuizContainer blockquote p {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  background: azure;
  padding: 5px;
}
.aq-button-panel a{
width: 100%;
}
#ariQuizContainer TABLE.aq-timer TH{
  background-image: linear-gradient(#00B9B9,#009999);
  border-color: #009999;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.33);
}

#ariQuizContainer .aq-answer-container {
padding: 0 !important;
margin-bottom: 0px !important;
line-height: 20px;
}
#ariQuizContainer .aq-question-buttons {
    padding: 0px !important;
}

/** huo change number **/
#ariQuizContainer label {
    font-size: 12px;
    line-height: 12px;
}
#ariQuizContainer .aq-answer-container .aq-answer-label LABEL {
    padding: 1px 3px;
	border-radius: 0;
}
#ariQuizContainer .aq-answer-label {
    width: 38px !important;
}
#ariQuizContainer .btn-primary {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#00B9B9), to(#009999)) !important;
border: none !important;
padding: 6px 30px !important;
}
.disable-onsubmit {
width: 150px !important;
}
.reading-left h2 {
font-size: 20px !important;
margin-top: 20px !important;
margin-left: 5px !important;
font-weight: 600 !important;
}

#ariQuizContainer .h3title {
 display: none;
}
/** quiz **/
.reading-article, .reading-answer{
border: solid 1px #333;
border-radius: 3px;
padding: 10px 10px 20px 10px;
background-color: #eef8f9;
}
.reading-top {
width:100%;
}
.reading-bellow {
display: none;
/** width:100%;
float: left;
padding-top: 10px;
border-top: solid 1px #ddd; **/
}
.reading-left {
width:48%;
float: left;
margin-right: 2%;
margin-left: 0px;
position: relative;
/* gundong 
max-height: 535px;
overflow-y: scroll;
  border-radius: 3px;
  border-bottom: 1px solid #333;
  */
}
.reading-right {
width:48%;
float: left;
margin-left: 2%;
margin-top: -30px;
margin-bottom: -70px;
}
@media screen and (max-width:767px){
#mod-custom114 {
width: 100%;
}
#mod-custom157 {
display: none;
}
.reading-left {
width:100%;
margin-right: 0;
margin-left: 0;
max-height: 600px;
}
.reading-right h2 {
font-size: 20px !important;
margin-top: 20px !important;
}
.reading-right {
width:100%;
margin-left: 0;
margin-top: 0;
}
}
/** bellow small screen */
@media (max-width: 767px) {
.container-component {
 max-width: 100% !important;
}
/* language center */
.container-topbar {
  text-align: center;
}
div.mod-languages ul {
	margin-left: 14px !important;
}
}
@media (width <= 767px) {
  .container-nav {
    display: none;
  }
  [data-rlta-element=container][data-rlta-state=ready][data-rlta-theme=neutral][data-rlta-type=accordions]>[data-rlta-element=button] {
  margin-top: 0px !important;
}
.reading-right { 
 margin-bottom: 0px !important;
}
}
/* homepage grid */
.pgrow {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
}

/* Create four equal columns that sits next to each other */
.column {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 20px 5%;
}


/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 33.333%;
    flex: 33.333%;
    max-width: 33.333%;
  }
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}
/** overlay */
  .menu-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
   }
   .menu1 {
    background-color: #f0f8ff !important;
   }
   .menu2 {
    background-color: #ffe4e1 !important;
   }
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 100;
    }
    .menu-wrapper {
      display: flex;
      gap: 30px;
    }
    .menu-container {
	  background-color: wheat;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      text-align: center;
      min-width: 200px;
	  max-width: 300px;
    }
	.menu-container img {
	  width: 60px;
	  margin-right: 20px;
	}
    .menu-container a {
      display: block;
      padding: 8px;
      margin: 5px 0;
      text-decoration: none;
      color: black;
      border-radius: 5px;
      transition: background-color 0.3s;
    }
    .menu-container a:hover {
      background-color: #e0e0e0;
    }
	@media screen and (max-width: 600px) {
  .menu-wrapper {
    display: flex;
    gap: 5px;
  }
   body.wrapper-fluid .site-grid {
   grid-gap: 0 1em;
 }
}
/** huo add */
#ariQuizContainer .aq-question-explanation {
 margin-top: -20px !important;
}
/* 取消自动高度调整 */
body, 
#container, 
#content, 
#system-message-container, 
#main, 
#footer {
  min-height: unset !important;
  height: auto !important;
  max-height: none !important;
}

/* 处理 textarea、输入框等表单控件 */
textarea
.form-control {
  min-height: unset !important;
  height: auto !important;
  max-height: none !important;
}

.kouyunote {
 font-size: 12px;
 margin-top: 100px !important;
}
.kouyutable {
 margin-left: auto; 
 margin-right: auto; 
 max-width: 600px;
 min-width: 500px;
}
.com-content-article__body {
 margin-bottom:-10px;
}
.com-content-article__body p{
 padding: 0 10px;
}
/* 悬浮按钮样式 */
 /* 按钮容器 */
        .button-container {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            display: flex;
        }

        /* 按钮样式 */
        .floating-button {
            flex: 1; /* 让两个按钮各占50%宽度 */
            height: 40px;
            background-color: black; /* 黑色背景 */
            color: white; /* 白色文字 */
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.2s;
            font-size: 16px;
            font-weight: bold;
            text-transform: uppercase;
			z-index: 0;
        }

        /* 按钮悬停效果 */
        .floating-button:hover {
            background-color: #333; /* 悬停时稍微变亮 */
            transform: scale(1.05);
        }

        /* 按钮内部内容（图标 + 文字） */
        .button-content {
            display: flex;
            align-items: center;
            gap: 8px; /* 图标与文字的间距 */
        }

        /* SVG 图标样式 */
        .floating-button svg {
            width: 24px;
            height: 24px;
            fill: white;
        }
@media screen and (min-width: 767px) {
.floating-button {
  display:none;
}
/** footer */
.footer {
  display:none;
}

@media screen and (max-width: 480px) {
 audio {
  width: 260px;
 }
 .kouyutable {
 max-width: 320px;
 min-width: 300px;
}
.kouyunote {
 margin-top: 10px;
 margin-bottom: 30px;
}
.footer {
margin: 0 !important;
}
}
/** 隐藏系列 */
.home_class .pagenavigation {
display: none;
}