html {
    scroll-behavior: smooth;
    /* for Firefox Scrollbar */
    /*overflow-y: scroll;
    scrollbar-width: none;*/
}

body {
    /*background-color: #f8fffc;
    background-color: #fff;
    background-color: #F4F5F7;
    background-color: #E6FFF5;*/
    background-color: #fff;
    /*background: rgb(244,245,247);
    background: linear-gradient(90deg, rgba(244,245,247,1) 22%, rgba(255,255,255,1) 22%, rgba(255,255,255,1) 78%, rgba(244,245,247,1) 78%);*/
    /*padding-top: 65px;*/
    padding-top: 55px;
    position: relative; /**/
    /* for Firefox Scrollbar */
    /*overflow-y: scroll;
    scrollbar-width: none;*/
}
/*
.main.container {
    background-color: #fff;
}
*/

.text-darkgreen {
    color: #1D4D3A;
}

/* Navbar CSS start */
.custom-nav {
    /*background-color: #fff;
    box-shadow: 0.125rem 0.25rem rgba(0,0,0,.075)!important;*/
    background-color: rgba(255,255,255,1);
    box-shadow: 1px 1px 5px 0px rgba(90, 236, 179, 0.2);
}

.custom-nav.navbar-light .navbar-toggler {
    border-color: transparent;
    /*border-color: blue;*/
    transition: 200ms ease-in-out;
}

.custom-nav.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28 100, 236, 179, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-light .navbar-brand {
    color: #5AECB3;
    font-weight: 400;
    /*font-size: 1.3em;*/
}

.custom-nav.navbar-light:hover .navbar-toggler {
    border-color: #5AECB3;
    background-color: #5AECB3;
}

.custom-nav.navbar-light:hover .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28 255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Dropdown list start */
    #onlineExNavbar .nav-link.dropdown-toggle {
    content: " ";
    background: url(/20220416011412oe_/https://www.ilc.cuhk.edu.hk/workshop/Chinese/InteractiveEx/img/svg/leaf_01.svg) 44% center no-repeat;
    background-size: 15px auto;
}

/*a.nav-link.dropdown-toggle:last-child {
    background-position: 55% center;
}*/

#onlineExNavbar .dropdown-menu {
    background-color: #e6fff5;
    border: 1px solid rgb(230 255 245);
}

#onlineExNavbar .dropdown-item {
    content: "";
    background: url(/20220416011412oe_/https://www.ilc.cuhk.edu.hk/workshop/Chinese/InteractiveEx/img/svg/branchwithleaf.svg) 42% center no-repeat;
    background-size: 32px auto;
}

#onlineExNavbar .dropdown-item:hover {
    background: url(/20220416011412oe_/https://www.ilc.cuhk.edu.hk/workshop/Chinese/InteractiveEx/img/svg/branchwithleaf_bw.svg) 42% center no-repeat;
    background-size: 32px auto;
    background-color: #5AECB3;
    opacity: 0.5;
    color: #fff;
}

/*
#onlineExNavbar .dropdown-item span {
    content: "";
    background: url(/20220416011412oe_/https://www.ilc.cuhk.edu.hk/workshop/Chinese/InteractiveEx/img/svg/leaf_01.svg) 42% center no-repeat;
    background-size: 20px auto;
}
*/
/* Dropdown list end */

/* Navbar CSS end */

.ex.jumbotron {
    content: "";
    /*background: url("/20220416011412oe_/https://www.ilc.cuhk.edu.hk/workshop/Chinese/InteractiveEx/img/bamboo_bg.jpg") no-repeat center center;
    background-size: 30rem auto;*/
    /*background-color: #5AECB3;*/
    background-color: #53daa5;
    border-radius: 0.5rem;
}

.ex.jumbotron h4 {
    line-height: 1.4;
    color: #fff;
}


/* Scroll up button CSS start */
#scrollUpBtn {
    position: fixed;
    bottom: 20%;
    /*right: 5%;*/
    z-index: 997;
    cursor: pointer;
    background-color: rgba(255,255,255,.8);
    border: 1px solid #64ecb3;
    color: #64ecb3;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}

#scrollUpBtn:hover {
    opacity: 0.5;
    background-color: #64ecb3;
    color: #fff;
}


/* Scroll up button CSS end */

.copyright {
    /*background-color: rgba(255,255,255,.8);*/
    background-color: #fff;
    color: #aaa;
}

.breadcrumb.custom {
    background-color: rgba(230, 255, 245, 0.5);
    color: #5AECB3;
}

.card.ex {
    overflow: hidden;
    border-radius: 1rem;
}
.card-img-top {
    overflow: hidden;
}

.card.ex img {
    height: 300px;
    transition: transform .2s;
}

.card.ex img:hover {
    transform: scale(1.1);
}

.card.ex.btn {
    padding: 0;
}

/* Custom Button Start */
.custom-btn1 {
    /*background-color: transparent;
    border: 1px solid #DADADA;
    color: #DADADA;
    background-position: 100%;
    transition: 200ms ease-in-out;*/
    /*border-color: #DADADA;
    color: #DADADA;*/
    /*border-color: #5AECB3;*/
    border: none;
    box-shadow: 1px 1px 10px 0px rgba(90, 236, 179, 0.5);
    color: #5AECB3;
    background-image: -webkit-linear-gradient(45deg, #5AECB3 50%, #fff 50%);
    background-image: linear-gradient(45deg, #5AECB3 50%, #fff 50%);
    background-position: 100%;
    background-size: 400%;
    -webkit-transition: background 400ms ease-in-out;
    transition: background 400ms ease-in-out;
}


.custom-btn1:hover {
    /* border: 1px solid #5AECB3;
    background-color: #5AECB3;
    color: #fff;*/
    border: 1px solid #5AECB3;
    color: #fff;
    background-position: 0%;
}

.custom-btn1:active {
    color: #fff;
}

.custom-btn1 h5 {
    /*font-weight: 600;*/
    font-weight: bold;
}

.ex-body {
    /*width: 100%;
    overflow: hidden;*/
    height: 920px;
    background-color: #E6FFF5; /**/
}
/*
div#ex_main {
    background-color: #fff;
    margin-top: 3em;
    padding: 3em 3em 6em 3em;
    border-radius: 1rem;
}
*/
#vocab_main, #idiom_main {
    top: 0%;
    left: 100%;
}

.custom-btn2 {
    /*border-color: #E6FFF5;*/
    /*border-color: #5AECB3;*/
    color: #1D4D3A;
    /*background-image: -webkit-linear-gradient(135deg, #5AECB3 50%, #E6FFF5 50%);
    background-image: linear-gradient(135deg, #5AECB3 50%, #E6FFF5 50%);*/
    /*background-image: -webkit-linear-gradient(135deg, #388C6B 50%, #5AECB3 50%);
    background-image: linear-gradient(135deg, #388C6B 50%, #5AECB3 50%);*/
    background-image: -webkit-linear-gradient(135deg, #FFD561 50%, #5AECB3 50%);
    background-image: linear-gradient(135deg, #FFD561 50%, #5AECB3 50%);
    /*background-position: 100%;*/
    background-position: 90%;
    background-size: 600%;
    -webkit-transition: background 500ms ease-in-out;
    transition: background 500ms ease-in-out;
    border-radius: 1em;
    border: none;
}

.custom-btn2:hover {
    /*border: 1px solid #5AECB3;*/
    color: #fff;
    background-position: 0%;
}

.custom-btn2:active {
    color: #fff;
}

.custom-btn2 h5 {
    font-weight: bold;
}

.path-menu {
    /*border: 1px solid #5AECB3;*/
    /*background-color: #E6FFF5;
    color: #5AECB3;*/
    background-color: rgba(230, 255, 245, 0.5);
    color: #5AECB3;
}

.breadcrumb.custom {
    background-color: rgba(230, 255, 245, 0.5);
}

.breadcrumb-item {
    color: #5AECB3;
}


.custom-btn3 {
    /*border: 1px solid #5AECB3;
    color: #5AECB3;
    background-color: #fff;*/
    border: 1px solid #fff;
    color: #fff;
    background-color: #5AECB3;
    transition: background-color 200ms ease-in-out;
}

.custom-btn3:hover {
    border: 1px solid #5AECB3;
    color: #fff;
    background-color: #5AECB3;
}

.custom-btn3:active {
    color: #fff;
}

.path-menu {
    color: #5AECB3;
    font-weight: 400;
    background-color: rgba(255, 255, 255, 0.75);
}

/* Custom Button End */

/*.scroll-bar {
    position: fixed;
    z-index: 2;
    top: 20%;
    height: 250px;
    overflow-x: hidden;
}*/

.scroll-bar {
    position: fixed;
    z-index: 2;
    top: 10%;
    height: 210px;
    /*height: 250px;
    overflow-x: hidden;*/
    overflow: hidden;
}

/* Hide scrollbar but allow scrolling */

/*for vertical scroll bar*/
.scroll-bar {
    -ms-overflow-style: none; /* for Internet Explorer Edge */
    scrollbar-width: none; /* for Firefox */
    /*overflow-y: scroll;*/ /* Updated on 4/3 */
}

.scroll-bar::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}
/**/
/*
.scroll-bar-line {
    background-color: #fff;
    opacity: 0.5;
    border: 1px solid #388C6B;
    border-radius: 1em;
}
*/

.scroll-bar-line {
    text-align: right;
}

.scroll-bar .nav-item {
    margin: 0.5em auto;
}

.scroll-bar a.nav-link {
    display: none; /* new add */
    padding: 0.5rem 0rem;
}

.scroll-bar a.nav-link.ready {
    display: block;
}

.scroll-bar a.nav-link span.scrolltext {
    /*color: #5AECB3;*/
    color: #388C6B;
    padding: 0.85em 0.5em;
    font-size: 0.9em;
    border-radius: 2em;
    transition: 1s transform;
    /*
    padding: 0.25em;
    font-size: 0.75em;
    */
    border: 1px solid #388C6B;
    border-radius: 2em;
}

.scroll-bar a.nav-link span.scrolltext:hover {
    color: #fff;
    /*background-color: #5AECB3;*/
    background-color: #388C6B;
    opacity: 0.5;
}

.scroll-bar a.nav-link.active span.scrolltext {
    /*background-color: #5AECB3;*/
    background-color: #388C6B;
    color: #fff;
    
}
/*
.scroll-bar a.nav-link {
    padding: 0.5rem 0rem;
}

.scroll-bar a.nav-link span.scrolltext {
    color: #388C6B;
    padding: 0.5em;
    border-radius: 2em;
    transition: 1s transform;
}

.scroll-bar a.nav-link span.scrolltext:hover {
    color: #fff;
    background-color: #388C6B;
    opacity: 0.5;
}

.scroll-bar a.nav-link.active span.scrolltext {
    background-color: #388C6B;
    color: #fff;
    font-size: 1em;
    
}
*/

/*
.scroll-bar a.nav-link.active:before span.scrolltext {
    background-color: #ff0000;
    color: #fff;
    font-size: 1em;
}
*/
/*
.scroll-bar a.nav-link span.dot {
    height: 5px;
    width: 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
}
*/


.verticle-txt {
    writing-mode: vertical-lr;
    text-orientation: upright;
}

/*
.verticle-txt::before {
    background: url("img/choice_button_bg.svg") no-repeat;
    height: 200px;
}
*/

div#footer_L {
    border-bottom: none;
}

#footer_L div.ex {
    /*background-color: #5AECB3;*/
    background-color: #5AECB3;
    opacity: 0.75;
    font-weight: 600;
}

.q-tab {
    /* for q-tab question list */
    counter-reset: listitem;
}

ol.q-tab {
    background-color: #fff;
    border-radius: 1em 1em 0 0;
    box-shadow: 1px 1px 10px 0px rgba(100, 236, 179, 0.25);
}
/**/
.q-tab li {
    /*padding: 100px 0px;*/
    /* new */
    padding: 2rem 1rem;
    /*background-color: #fff;
    box-shadow: 1px 1px 10px 0px rgba(100, 236, 179, 0.25);*/
    /*margin: 2rem auto;*/
    /*box-shadow: 2px 2px 10px 0px #eee;*/
    border-radius: 1em;
    /*background-color: #e6fff5;
    border: 1px solid #5aecb3;*/
    border: 1px solid #eee;
}

.q-tab li:first-child {
    margin-top: 0.5rem !important;
}

.q-tab li:hover {
    background-color: rgba(100, 236, 179, 0.25);
    border: 1px solid #5aecb3;
}

/**/
ol.q-tab li h6::before {
    /*content: var(--bullet-content, " " counter(listitem) ".");*/
    counter-increment: listitem;
    content: var(--bullet-list, " " counter(listitem) ".");
    padding-right: 5px;
}

/* q-tab - Custom Select Field CSS start */
/*select {
    display: none;
}*/

.custom-select {
    content: "";
    width: 20%;
    border: 1px solid #5aecb3;
    color: #5aecb3;
    /*background-color: #5aecb3;
    color: #fff;
    background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
    background: #5aecb3 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;*/
    background: #fff url('/20220416011412oe_/https://www.ilc.cuhk.edu.hk/workshop/Chinese/InteractiveEx/img/svg/caret-down-fill_green.svg') right 0.75rem center no-repeat;
}

select.custom-select:hover {    
    border-color: #388C6B;
    color: #388C6B;
    background: #fff url('/20220416011412oe_/https://www.ilc.cuhk.edu.hk/workshop/Chinese/InteractiveEx/img/svg/caret-down-fill_deepgreen.svg') right 0.75rem center no-repeat;
}

select.custom-select.text-muted, select.custom-select.text-muted:hover {
    background: #fff url('/20220416011412oe_/https://www.ilc.cuhk.edu.hk/workshop/Chinese/InteractiveEx/img/svg/caret-down-fill_muted.svg') right 0.75rem center no-repeat;
}

select.custom-select.text-success, select.custom-select.text-success:hover {
    background: #fff url('/20220416011412oe_/https://www.ilc.cuhk.edu.hk/workshop/Chinese/InteractiveEx/img/svg/caret-down-fill_success.svg') right 0.75rem center no-repeat;
}

select.custom-select.text-danger, select.custom-select.text-danger:hover {
    background: #fff url('/20220416011412oe_/https://www.ilc.cuhk.edu.hk/workshop/Chinese/InteractiveEx/img/svg/caret-down-fill_danger.svg') right 0.75rem center no-repeat;
}

select.custom-select.text-info, select.custom-select.text-info:hover {
    background: #fff url('/20220416011412oe_/https://www.ilc.cuhk.edu.hk/workshop/Chinese/InteractiveEx/img/svg/caret-down-fill_info.svg') right 0.75rem center no-repeat;
}

/*.custom-select option:checked ~ .custom-select {
select.custom-select[value="0"]:checked, select.custom-select[value="1"]:checked, .custom-select option:checked {*/
select.custom-select:active, select.custom-select:focus {
    /*color: #fff;*/
    color: #5aecb3;
    background: #388C6B url('/20220416011412oe_/https://www.ilc.cuhk.edu.hk/workshop/Chinese/InteractiveEx/img/svg/caret-down-fill_white.svg') right 0.75rem center no-repeat !important;
}/**/

.ex-choices option:hover {
    color: #fff !important;
    background: #5aecb3 !important;
}

.ex.level {
    color: #388C6B;
    background: #5aecb3;
    font-weight: bold;
}

/* q-tab - Custom Select Field CSS end */

/*
div#ExChoicesFrame {
    position: relative;
    overflow: hidden;
}

div#vocabEx, div#idiomEx {
}

div#vocabEx {
    background-color: #ffd800;
    position: absolute;
    z-index: 1;
}

div#idiomEx {
    background-color: #b6ff00;
    position: absolute;
    left: 100%;
    z-index: 2;
}
*/

/* Custom control checkbox & radio Start */
.custom-control {
    padding-left: 0;
}

.custom-control-label::before, .custom-control-label::after {
    /*display: none;*/
    visibility: hidden;
}

.custom-control-label {
    /*background-color: #ddd;
    background-color: #fff;
    background-color: transparent;*/
    background-color: rgba(255,255,255,0.5);
    border: 1px solid #ddd;
    padding: 0.5rem 0.8rem;
    margin: 0.4rem auto;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: 200ms ease-in-out;
}

.custom-control-label:hover {
    background-color: #fff;
    border: 1px solid #5AECB3;
    color: #5AECB3;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label, .custom-radio .custom-control-input:checked ~ .custom-control-label {
    background-color: #5AECB3;
    border: 1px solid #5AECB3;
    color: #fff;
}

.custom-control-input:disabled ~ .custom-control-label, .custom-control-input[disabled] ~ .custom-control-label {
    background-color: #ddd;
    color: #6c757d;
}

/* Incorrect Answer */
li.text-danger .custom-control .custom-control-label {
    background-color: #ddd;
    border-color: #dc3545;
}

li.text-danger .custom-checkbox .custom-control-input:checked ~ .custom-control-label, li.text-danger .custom-radio .custom-control-input:checked ~ .custom-control-label {
    background-color: rgba(220, 53, 69, 0.4);
    border-color: #dc3545;
}

/* Correct Answer */
li.text-success .custom-control .custom-control-label {
    background-color: #ddd;
    border-color: #28a745;
}

li.text-success .custom-checkbox .custom-control-input:checked ~ .custom-control-label, li.text-success .custom-radio .custom-control-input:checked ~ .custom-control-label {
    background-color: rgba(90, 236, 179, 0.4);
    border-color: #28a745;
}

/* Incomplete Answer */
li.text-info .custom-control .custom-control-label {
    background-color: #ddd;
    border-color: #17a2b8;
}
/*
li.text-info .custom-checkbox .custom-control-input:checked ~ .custom-control-label, li.text-info .custom-radio .custom-control-input:checked ~ .custom-control-label {
    background-color: rgba(23, 162, 184, 0.4);
    border-color: #17a2b8;
}
*/

/* Check Answers */
li.text-muted .custom-checkbox .custom-control-input:checked ~ .custom-control-label, li.text-muted .custom-radio .custom-control-input:checked ~ .custom-control-label {
    background-color: #5AECB3;
    border-color: #5AECB3;
}

label.custom-control-label.text-muted {
    background-color: #5AECB3 !important;
    border-color: #5AECB3 !important;
}


/* Custom control checkbox End */

.flex-container {
    display: flex;
    flex-direction: row;
}

/* Responsive layout - makes an one column layout instead of a two-column layout */
@media (max-width: 800px) {

.flex-container {
    flex-direction: column;
}

/* q-tab - Custom Select Field CSS start */
.custom-select {
    width: 50%;
}

/* q-tab - Custom Select Field CSS end */

}

/* ----------- iPad Pro 12.9" ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
/*body { background: #ffffff;}*/
}

/* ----------- iPad Pro 10.5" ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 834px) and (max-device-width: 1112px) and (-webkit-min-device-pixel-ratio: 2) {
/*body { background: #ffffff;}*/
}

/* ----------- iPad 3, 4 and Pro 9.7" ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
/*body { background: #ffffff;}*/
}

/* ----------- iPad 1, 2, Mini and Air ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
/*body { background: #ffffff;}*/
}

@media (max-width: 1199px) {
/*body { background: #ffffff;}*/
}

/* Extra Small < 576px */
@media (max-width: 576px) {

/* Dropdown list start */
#onlineExNavbar .nav-link.dropdown-toggle {
    content: "";
    background: url(/20220416011412oe_/https://www.ilc.cuhk.edu.hk/workshop/Chinese/InteractiveEx/img/svg/leaf_01.svg) 25% center no-repeat;
    background-size: 1rem auto;
}

#onlineExNavbar .dropdown-item {
    content: "";
    background: url(/20220416011412oe_/https://www.ilc.cuhk.edu.hk/workshop/Chinese/InteractiveEx/img/svg/branchwithleaf.svg) 13% center no-repeat;
    background-size: 32px auto;
}

#onlineExNavbar .dropdown-item:hover {
    background: url(/20220416011412oe_/https://www.ilc.cuhk.edu.hk/workshop/Chinese/InteractiveEx/img/svg/branchwithleaf_bw.svg) 13% center no-repeat;
    background-size: 32px auto;
    background-color: #5AECB3;
    opacity: 0.5;
    color: #fff;
}
/* Dropdown list end */

/**/
.q-tab li {
    /*padding: 2em 0em;*/
    padding: 2rem 1rem;
}

/*
  ** for mobile scroll-bar overflow height **
   
.scroll-bar {
    height: 300px;
}

*/


div#footer_L {
    border-bottom: 3px solid #eee;
}

.custom-control-label {
    padding: 0.5rem 0.5rem;
}


}