/* CSS Document */

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap");

body {
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: 'Nunito', sans-serif;
}

a {
    text-decoration: none;
}

    a img {
        border: 0px;
    }

li {
    list-style-type: none;
}

ul {
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}

#wrapper {
    /*margin: 0 auto;
	padding: 0 0 0 0;*/
    width: 100%;
    text-align: left;
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar content"
        "sidebar footer";
    grid-template-rows: auto 1fr auto;
    grid-template-columns: auto 1fr;
    /*min-height: 100vh;*/
    background-color: #f2f2f2;
    position: relative;
    min-width: fit-content;
}

/* header start */

.header {
    grid-area: header;
    display: flex;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 100;
}

.header_top {
    width: 100%;
    height: 70px;
    background-color: #2593FC;
}

    .header_top li a {
        color: White;
    }

.year {
    background-color: #FFF;
    width: 55px;
    height: 20px;
    padding: 9px 7px;
    border-radius: 16px;
    color: #2593FC;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: #2593FC 0px 0px 0px;
}

.header-profile {
    display: flex;
    align-items: center;
    height: 70px;
    justify-content: space-between;
    padding-right: 24px;
    position: relative;
}

.col-menu {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 24px;
    cursor: pointer;
}

    .col-menu.bg-white svg {
        fill: #121212 !important;
    }

.bg-white {
    background-color: #fff;
}

.hide-side-bar.hide {
    display: none !important;
    transition: .5s;
}

.hide-titlemenu-arrow.active {
    display: none;
}

.hide-arrow::before {
    display: none;
}

.hide-arrow {
    justify-content: center;
    padding-left: 0 !important;
}

.login a {
    color: White;
}

    .login a:hover {
        background-color: ActiveCaption;
    }

.header_logo {
    float: left;
    width: 250px;
    /*height:100px;*/
    /*margin:10px 0px 2px 0px;*/
    transition: width 0.5s ease;
}

    .header_logo.collapse {
        width: 0px;
    }

.header_cyberschoolsupports {
    float: left;
    width: 560px;
    height: 20px;
    padding: 55px 0px 0px 0px;
    margin: 19px 40px 7px 100px;
}

.home {
    float: left;
    width: 82px;
    height: 43px;
    background-image: url(../images/main/header/navigator/menu-home-bg.png);
}
    /* Jass Ãß°¡ */
    .home img {
        margin: 5px 0 0 21px;
    }

.navigation {
    behavior: url(/css/csshover3.htc);
    float: left;
    width: 1022px;
    height: 43px;
}

    .navigation ul {
        float: left;
        margin: 0 0 0 0;
        padding: 0;
    }

        .navigation ul li {
            position: relative;
            float: left;
            width: 154px; /* 185px 5 Menus */
            height: 43px;
            list-style-type: none;
            z-index: 4000;
            background-image: url(../images/main/header/navigator/menu-bg.png);
        }

    .navigation li a {
        float: left;
        width: 154px; /* 185px 5 Menus */
        height: 26px;
        padding: 12px 0 6px 0; /* 8px 0 8px 0 when font-size(whiteMenu) is 16 */
        color: #999999;
        text-align: center;
        text-decoration: none;
    }

        .navigation li a:hover {
            color: White;
            background: url(../images/main/header/navigator/menu-bg_roll-over.png) no-repeat 0 0;
            margin: 0 0 0 0;
        }

    .navigation li ul {
        margin: 0px 0 0 0px;
        display: none;
    }

    .navigation li:hover ul {
        display: block;
        z-index: 1000;
    }

    .navigation li ul li {
        background: url(../images/main/header/navigator/menu-bg.png) no-repeat 0 0;
    }

    .navigation li:hover ul li a:hover {
        background: url(../images/main/header/navigator/menu-bg_roll-over.png) no-repeat 0 0;
    }

    .navigation li.selected {
        background: url(../images/main/header/navigator/menu-bg_roll-over.png) no-repeat 0 0;
    }


/* header end */


.content {
    width: 100%;
    background: #fff;
    /*min-height: 570px;*/
    padding-bottom: 0px;
}

.content-minitest {
    width: 100%;
    background: #fff;
    /*min-height: 570px;*/
    padding-bottom: 0px;
}

    .content-minitest:after {
        clear: both;
        content: "";
        display: block;
    }

.content_OcttcChallenge {
    width: 100%;
    background: #fff;
    /*min-height: 570px;*/
    padding-bottom: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.content-myprofile {
    width: 100%;
    background: #fff;
    /*min-height: 570px;*/
    padding-bottom: 0px;
    display: flex;
    flex-direction: column;
    padding-top: 48px;
    align-items: center;
    height: calc(100vh - 192px);
}

#container {
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    background-color: #fff;
    margin-bottom: 48px;
    border-radius: 10px;
}

#container-welcome {
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    background-color: #fff;
    margin: 48px 0;
    border-radius: 10px;
}

#container-new {
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 0;
    display: block;
    /*align-items: center;*/
    /*flex-direction: row;*/
    /*justify-content: flex-start;*/
    background-color: #fff;
    padding: 48px 0;
    border-radius: 10px;
    overflow: auto;
}

.container_last_revision {
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    background-color: #fff;
    border-radius: 10px;
}
/*#container_last_revision:after {
		clear: both;
		content: "";
		display: block;
	}*/

#container-banner {
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    background-color: #f2f2f2;
    margin-bottom: 16px;
    border-radius: 10px;
}

#example {
    width: 100%;
    aspect-ratio: 16/9;
    /*height:600px;*/
    position: relative;
}

#ribbon {
    position: absolute;
    top: -3px;
    left: -10px;
    z-index: 500;
}


/*
	Slideshow
*/

#slides {
    width: 100%;
    aspect-ratio: 16/9;
    position: absolute;
    top: 0px;
    /*left: 25px;*/
    z-index: 100;
}

/*
	Slides container
	Important:
	Set the width of your slides container
	Set to display none, prevents content flash
*/

.slides_container {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    position: relative;
    display: none;
    background-color: #FFF;
}

    /*
	Each slide
	Important:
	Set the width of your slides
	If height not specified height will be set by the slide content
	Set to display block
*/

    .slides_container a {
        width: 100%;
        aspect-ratio: 16/9;
        /*height:600px;*/
        display: block;
    }

    .slides_container p {
        width: 100%;
        aspect-ratio: 16/9;
        /*height: 600px;*/
        display: block;
    }

    .slides_container a img {
        width: 100%;
        aspect-ratio: 16/9;
        /*height: 600px;*/
    }

.slides_control {
    width: 100% !important;
    height: calc((100vw - 48px - 250px) * 9 /16) !important;
    /*height: 600px !important;*/
}

    .slides_control > p > a > img {
        width: 100% !important;
        height: calc((100vw - 48px - 250px) * 9 /16) !important;
    }

    .slides_control > a > p > img {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 16/9 !important;
        height: calc((100vw - 48px - 250px) * 9 /16) !important;
    }

.collapse.slides_control {
    width: 100% !important;
    height: calc((100vw - 48px - 86px) * 9 /16) !important;
    /*height: 600px !important;*/
}

    .collapse.slides_control > p > a > img {
        width: 100% !important;
        height: calc((100vw - 48px - 86px) * 9 /16) !important;
    }

    .collapse.slides_control > a > p > img {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 16/9 !important;
        height: calc((100vw - 48px - 86px) * 9 /16) !important;
    }

.slides_container p {
    display: block;
    margin: 0;
    margin-left: -3px;
}

.sidebar {
    grid-area: sidebar;
    background-color: #FFF;
    padding-top: 16px;
    padding-left: 6px;
    padding-right: 6px;
    width: 250px;
    transition: width 0.65s ease;
    white-space: nowrap;
    z-index: 100;
    overflow: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: sticky;
    top: 70px;
    left: 0;
    max-height: calc(100vh - 86px);
}

    .sidebar.collapse {
        width: 86px;
    }

.box {
    min-height: 50px;
    display: flex;
    align-items: center;
    text-decoration-line: none;
    text-decoration-style: solid;
    text-decoration-thickness: auto;
    text-shadow: rgb(0, 0,0) 0px 0px 0px;
    text-decoration-color: rgb(255, 255, 255);
    /*padding-left: 32px;*/
}

.box1 {
    width: 100%;
    min-height: 50px;
    padding-left: 48px;
    display: flex;
    align-items: center;
    text-decoration-line: none;
    text-decoration-style: solid;
    text-decoration-thickness: auto;
    text-shadow: rgb(0, 0,0) 0px 0px 0px;
    text-decoration-color: rgb(255, 255, 255);
}

    .box1:hover {
        color: white !important;
    }

ul.submenu {
    display: none;
}

    ul.submenu.active {
        display: block;
    }

.sidebar .sidebar-menu .menu-item .submenu li a {
    color: #121212;
}

.sidebar .sidebar-menu .menu-item .submenu li a {
    color: #121212;
}

.titlemenu {
    padding-left: 16px;
    display: flex;
    align-items: center;
}

a.hightlight {
    color: white !important;
}

    a.hightlight.textIcon {
        color: #fff !important;
    }

.active-menu {
    background-color: #2593FC;
    border-radius: 5px;
    color: #fff;
    text-decoration-line: none;
    text-decoration-style: solid;
    text-decoration-thickness: auto;
    text-shadow: #2593FC 0px -1px 0px;
    text-decoration-color: rgb(255, 255, 255);
}

li.active-menu > .change-color-arrow > .change-color-text > a {
    color: #fff !important;
}

li.active-menu > ul > li.box.pl48 {
    background-color: #fff;
    color: #121212 !important;
}

    li.active-menu > ul > li.box.pl48 > span > a {
        color: #f2f2f2;
    }

li.active-menu > ul > li.box:hover {
    background-color: #2593FC;
    color: #fff !important;
}

    li.active-menu > ul > li.box:hover > span > a {
        color: #fff;
    }

li.active-menu > ul > li.box1:hover {
    background-color: #2593FC;
    color: #fff !important;
}

    li.active-menu > ul > li.box1:hover > span > a {
        color: #fff;
    }

li.active-menu .icon_fill svg path {
    fill: #fff;
    transition: .3s;
}

.sub-content {
    padding-left: 32px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.sub-second-content {
    padding-left: 32px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.box1.a-black{
    background-color: #fff
}
    .box1.a-black.hightlight {
        background-color: #2593FC
    }

.pl48 {
    padding-left: 48px;
}

.titlemenu:hover,
.sub-content:hover, .box:hover, .sub-second-content:hover {
    background-color: #2593FC;
    border-radius: 5px;
    text-shadow: #2593FC 0px -1px 0px;
    text-decoration-color: rgb(255, 255, 255);
}

.sub-content:hover, .box1:hover, .sub-second-content:hover {
    background-color: #2593FC;
    border-radius: 5px;
    text-shadow: #2593FC 0px -1px 0px;
    text-decoration-color: rgb(255, 255, 255);
}

.titlemenu:hover > .hide-side-bar > a {
    color: #fff;
    transition: .3s;
}

.titlemenu:hover > .hide-side-bar > span {
    color: #fff;
    transition: .3s;
}





.subitem-text:hover, .box:hover {
    color: white;
    transition: .3s;
}

.subitem-text:hover, .box1:hover {
    color: white;
    transition: .3s;
}

.icon_fill svg path {
    fill: #121212;
}

.pl48:hover a {
    color: #fff !important;
}

.sidebar-icon {
    /*margin-bottom: 2px;*/
    margin-right: 5px;
}

.sidebar-svg-icon svg {
    stroke: #121212 !important;
    fill: #fff;
    stroke-width: 1.5px;
}

.change-color-text {
    color: #fff;
    transition: 0.3s;
}

.change-color-svg svg {
    stroke: #fff !important;
    fill: #2593FC;
    transition: .3s;
}

.titlemenu:hover .sidebar-svg-icon svg {
    stroke: #fff !important;
    fill: #2593FC;
    transition: .3s;
}

.titlemenu:hover .textIcon {
    color: white;
    transition: .3s;
    font-weight: 500;
}

.titlemenu:hover .icon_fill svg path {
    fill: #fff;
    transition: .3s;
}



.titlemenu .textIcon {
    color: #121212;
    font-weight: 500;
}

.sidebar-menu-icon {
    margin-bottom: 3px;
    margin-right: 8px;
}

    .sidebar-menu-icon.reset-margin {
        margin-bottom: 0px;
        margin-right: 0px;
    }

.submenutwo {
    display: none;
}

.submenuthree {
    display: none;
}

    .submenuthree.active {
        display: block;
    }

.logout_button {
    min-height: 50px;
    display: flex;
    align-items: center;
    padding-left: 16px;
    color: #121212;
    text-decoration-line: none;
    text-decoration-style: solid;
    text-decoration-thickness: auto;
    text-shadow: rgb(0, 0,0) 0px 0px 0px;
    text-decoration-color: rgb(255, 255, 255);
    /*	position: absolute;
	bottom: 0px;
	left: 0px;*/
    width: 222px;
    background-color: #fafafa;
    transition: width 0.65s ease;
    /*margin: 0 6px;*/
    justify-content: flex-start;
}

    .logout_button.collapse {
        width: 74px;
        padding: 0px;
        justify-content: center;
    }

    .logout_button:hover {
        background-color: #2593FC;
        color: #fff;
        border-radius: 5px;
        text-decoration-line: none;
        text-decoration-style: solid;
        text-decoration-thickness: auto;
        text-shadow: #2593FC 0px -1px 0px;
        text-decoration-color: rgb(255, 255, 255);
    }

        .logout_button:hover svg {
            stroke: #fff !important;
            fill: #2593FC;
            transition: .3s;
        }

    .logout_button svg {
        stroke: #121212 !important;
        fill: #fafafa;
        stroke-width: 1.5px;
    }


.main-content {
    grid-area: content;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    /*background: #e7e7e7 url(../images/main/header_bg.png) center top no-repeat;*/
    /*padding: 20px;*/
    padding: 24px 24px 0;
    /*background-color: #fff;*/
}

.titlemenu {
    min-height: 50px;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
}

    .titlemenu::before {
        height: 6px;
        width: 6px;
        content: "";
        position: absolute;
        right: 15px;
        top: 20px;
        transition: .3s all;
        transform: rotate(-45deg);
        border-right: 2px solid black;
        border-bottom: 2px solid black;
    }

    .titlemenu:hover::before {
        border-right: 2px solid white;
        border-bottom: 2px solid white;
    }

    .titlemenu.change-color-arrow::before {
        border-right: 2px solid white;
        border-bottom: 2px solid white;
    }



.sub-content::before {
    height: 6px;
    width: 6px;
    content: "";
    position: absolute;
    right: 15px;
    top: 20px;
    transition: .3s all;
    transform: rotate(-45deg);
    border-right: 2px solid black;
    border-bottom: 2px solid black;
}

.sub-second-content::before {
    height: 6px;
    width: 6px;
    content: "";
    position: absolute;
    right: 15px;
    top: 20px;
    transition: .3s all;
    transform: rotate(-45deg);
    border-right: 2px solid black;
    border-bottom: 2px solid black;
}

.sub-content:hover::before {
    border-right: 2px solid white;
    border-bottom: 2px solid white;
}

.sub-second-content:hover::before {
    border-right: 2px solid white;
    border-bottom: 2px solid white;
}

.wrapper_logo {
    width: 250px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FFF;
}

.titlemenu.active {
    /*background-color: #33a0ff;
color: #fff;*/
    transition: .4s
}

    .titlemenu.active::before {
        transform: rotate(45deg);
        top: 17px
    }

.sub-content.active::before {
    transform: rotate(45deg);
    top: 17px
}

.sub-second-content.active::before {
    transform: rotate(45deg);
    top: 17px
}

.image-logo {
    height: 60px;
    width: 64px;
}

.h3-custom {
    margin-bottom: 0px;
}
/*
	Next/prev buttons
*/
#slides .next, #slides .prev {
    position: absolute;
    top: calc((100vw - 250px - 48px)*9/16/2 - 43px/2);
    width: 24px;
    height: 43px;
    display: block;
    z-index: 101;
}

#slides .prev {
    left: 0;
}

#slides .next {
    right: 0;
}
/*
	Pagination
*/
.pagination {
    margin-right: 24px;
    float: right;
}

    .pagination li {
        display: inline;
        list-style: none;
    }

        .pagination li a {
            width: 20px;
            height: 0;
            margin: 15px 0 0 5px;
            padding-top: 20px;
            background-image: url(../images/main/slider/SlideShow-Btn_grey.png);
            background-position: 0 0;
            float: left;
            overflow: hidden;
        }

            .pagination li a:hover {
                background-image: url(../images/main/slider/SlideShow-Btn_blue.png);
            }

        .pagination li.current a {
            background-image: url(../images/main/slider/SlideShow-Btn_blue.png);
        }






.banner {
    float: left;
    width: 100%;
    aspect-ratio: 16/9;
    /*height: 600px;*/
    margin: 0 0 0 0px;
}

.SlideShow {
    float: left;
    width: 100%;
    height: 30px;
}

    .SlideShow ul {
        margin: 0 0 0 740px;
    }

        .SlideShow ul li {
            float: left;
            width: 15px;
            height: 10px;
            margin: 5px 5px 5px 5px;
            list-style-type: none;
        }

.SlideShowBtn {
    float: left;
    width: 10px;
    height: 10px;
    margin: 5px 5px 5px 5px;
}



/* Introduction page*/

.Intro {
    float: left;
    width: 70%;
    margin-top: 50px;
}

.IntroContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70%;
    margin-top: 50px;
}

.introbox {
    width: 250px;
    height: 150px;
    margin: 0px 0 0 0;
}


.Introbar {
    float: left;
    height: 140px;
    width: 20px;
    padding: 10px 0 0 0;
}


.line {
    float: left;
    width: 10px;
    height: 120px;
    border-right: 1px solid #CCC;
}


.IntroQuesiton {
    float: left;
    width: 230px;
    height: 30px;
    padding: 0 0 0 10px;
}

.IntroAnswer {
    float: left;
    width: 220px;
    height: 100px;
    padding: 10px 10px 0 10px;
}

.Intro2 {
    display: flex;
    width: 70%;
    margin-top: 50px;
    justify-content: center;
    align-items: center;
}

.WrapperIntro {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.smallbar {
    float: left;
    width: 150px;
    height: 2px;
    background-color: #39F;
    margin: 0 0 0 10px;
}



.introbox2 {
    float: left;
    width: 240px;
    height: 300px;
    margin: 0 20px 0 0;
    border: 1px solid #CCC;
}

.Introimage {
    float: left;
    width: 220px;
    height: 140px;
    margin: 5px 5px 5px 5px;
    text-align: center;
}


.IntroQuesiton2 {
    float: left;
    width: 230px;
    height: 30px;
    padding: 10px 0 0 10px;
}

.IntroAnswer2 {
    float: left;
    width: 220px;
    height: 100px;
    padding: 10px 10px 0 10px;
    letter-spacing: normal;
}


.AboutWelcomeBanner {
    float: left;
    width: 960px;
    height: 360px;
    background: url(../images/about/welcome/WelcomeToCyberschoolBG2.png);
}

.AboutWelcomeTo {
    float: left;
    width: 302px;
    height: 105px;
    margin: 150px 0px 0px 100px;
}

.AboutWelcomeToText {
    float: left;
    width: 115px;
    height: 180px;
    margin: 130px 0px 0px 40px;
}

.AboutLinkBannerBox {
    float: left;
    width: 960px;
    height: 320px;
}

.AboutLinkBanner {
    float: left;
    width: 280px;
    height: 220px;
    background: url(../images/about/welcome/WelcomeSBannerBg_blue.png);
    margin: 50px 11px 50px 11px;
}

.AboutLinkBannerText {
    float: left;
    width: 200px;
    height: 30px;
    padding: 30px 40PX 0 40PX;
}

.AboutLinkBannerText2 {
    float: left;
    width: 200px;
    height: 90px;
    padding: 10px 40PX 0PX 40PX;
}

.AboutLinkBannerText3 {
    float: left;
    width: 200px;
    height: 20px;
    padding: 0px 40PX 40PX 40PX;
}

/* about page end*/

/* Page Title*/

.PageTitle {
    float: left;
    width: 70%;
    min-height: 50px;
    display: flex;
    flex-direction: column;
}

.PageModuleAnswerTitle {
    width: 70%;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /*padding:0px 30px 0 30px;*/
}

.retest-title {
    width: 70%;
    margin-bottom: 60px;
}

.PageVideoLessonTitle {
    width: 70%;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.PageTitlePractice {
    float: left;
    width: 850px;
    height: 60px;
    padding: 0px 30px 0 30px;
}

.EssayPageTitle {
    width: 70%;
    height: 100px;
    display: flex;
    flex-direction: column;
}

.PageTitleBar {
    float: left;
    width: 170px;
    height: 10px;
    margin: 5px 0 0 0;
}

.retest-bar {
    width: 170px;
    height: 10px;
    margin: 5px 0 0 0;
}

.PageOrder {
    height: 15px;
    align-self: flex-end;
}

.PageTitleText {
    float: left;
    width: 100%;
    height: 30px;
    margin: 5px 0 0 0;
}

.retest-title-text {
    width: 850px;
    height: 30px;
    margin: 5px 0 0 0;
}

.PageTitleBg {
    float: left;
    width: 100%;
    height: 100px;
    margin: 20px 0 0 0;
}

.PageTitleBg2 {
    float: left;
    width: 850px;
    height: 80px;
    margin: 20px 0 0 0;
}


.subnavi {
    float: left;
    width: 800px;
    height: 10px;
}

    .subnavi ul {
        float: left;
        width: 800px;
        height: 20px;
        list-style-type: none;
        vertical-align: middle;
        margin-bottom: 30px;
    }

        .subnavi ul li {
            float: left;
            width: 70px;
            height: 20px;
            margin-top: 10px;
            margin-right: 30px;
            text-align: left;
            vertical-align: middle;
        }

    .subnavi li a {
        margin-top: 0px;
        height: 20px;
        color: #666;
    }

    .subnavi ul li div {
        width: 200px;
        height: 20px;
        margin-right: 100px;
    }

    .subnavi .testNumber li {
        margin-right: 0px;
    }

.subnaviGA a {
    color: #666;
}

.subnaviGA {
    color: #CC0066;
}

.subnaviGAout {
    color: #666666;
}

.subnavi li a:hover {
    height: 10px;
    color: #3072F3;
}






/* Page Title End*/


/*TTC Cancel page*/
.TTCTitle {
    float: left;
    width: 850px;
    height: 80px;
    padding: 0px 30px 0 30px;
}

.TTCCancelBox {
    float: left;
    width: 760px;
    height: 328px;
    margin: 0px 75px 30px 75px;
    background-image: url(../images/ttc_review/cancel_bg.png);
}

.TTCCancelQ {
    float: left;
    width: 680px;
    margin: 150px 40px 0 40px;
    text-align: center;
}


.yesBtn {
    float: left;
    margin: 30px 20px 0 200px;
}

.noBtn {
    float: left;
    margin: 30px 0 0 0;
}


/*TTC Cancel page end*/

/* News board table*/

.BoardTable {
    float: left;
    width: 850px;
    margin: 0px 30px 0 30px;
}

.BoardHeader {
    float: left;
    width: 850px;
    height: 22px;
    margin: 30px 30px 0 30px;
    background-color: #666;
}

.BoardTable ul {
    float: left;
    width: 850px;
    padding: 0 0 0 0;
    margin: 0;
}

    .BoardTable ul li {
        float: left;
        height: 30px;
        display: inline;
        text-align: left;
        margin: 0;
    }

.TH0 {
    float: left;
    width: 100px;
    height: 19px;
    text-align: center;
    padding: 3px 0 0 0;
}

.TH1 {
    float: left;
    width: 350px;
    height: 19px;
    text-align: center;
    padding: 3px 0 0 0px;
}

.TH2 {
    float: left;
    width: 200px;
    height: 19px;
    text-align: center;
    padding: 3px 0 0 0;
}

.TH3 {
    float: left;
    width: 200px;
    height: 19px;
    text-align: center;
    padding: 3px 0 0 0;
}

.TableHoriMenu0 {
    float: left;
    width: 100px;
    height: 19px;
    text-align: left;
    padding: 3px 0 0 0;
}

.TableHoriMenu2 {
    float: left;
    width: 350px;
    height: 19px;
    padding: 3px 0 0 0px;
}

.TableHoriMenu3 {
    float: left;
    width: 200px;
    height: 19px;
    padding: 3px 0 0 0;
}

.TableHoriMenu4 {
    float: left;
    width: 200px;
    height: 19px;
    padding: 3px 0 0 0;
}


.TableImageBox {
    float: left;
    width: 100px;
    text-align: center;
    padding: 5px 0 0 0;
}


.TableSubjectBox {
    float: left;
    width: 360px;
    text-align: center;
    padding: 5px 0 0 0;
}

.TableFileBox {
    float: left;
    width: 180px;
    text-align: center;
    padding: 5px 0 0 0;
}

.TableDateBox {
    float: left;
    width: 200px;
    text-align: center;
    padding: 5px 0 0 0;
}


/* News board table end*/

/* Test information*/
/* Test no*/

.testinfo {
    float: left;
    width: 800px;
    min-height: 80px;
    padding: 0 60px 0 60px;
}


.testNo {
    float: left;
    height: 80px;
    width: 110px;
}

.testNotext {
    float: left;
    width: 110px;
    font-size: small;
    text-align: center;
    margin-top: 5px;
    font-weight: bold;
    height: 15px;
    letter-spacing: 2px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

.testNumber {
    float: left;
    width: 110px;
    height: 65px;
    margin-top: 0px;
    text-align: center;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-weight: bold;
    font-size: 35pt;
}

/*test no end */
/* student detail*/

.studentBar {
    float: left;
    width: 10px;
    height: 60px;
    margin: 10px 0 10px 20px;
}

.studentDetail {
    float: left;
    min-height: 30px;
    width: 800px;
    margin-top: 10px;
    margin-right: 0;
    margin-bottom: 20px;
    margin-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}

.studentIcon {
    float: left;
    margin: 0 5px 0 5px;
}

.studentIDandName {
    float: left;
    width: 300px;
    height: 60px;
    margin-left: 5px;
}


.studentID {
    float: left;
    width: 240px;
    height: 16px;
    padding: 3px 0 0 5px;
    border-bottom: solid 1px #CCC;
}

.studentName {
    float: left;
    width: 240px;
    height: 16px;
    padding: 3px 0 0 5px;
    border-bottom: solid 1px #ccc;
}

.studentScore {
    float: left;
    width: 75px;
    height: 60px;
    background-image: url(../images/test_result/SPC/scorebg.png);
    border-right: solid 1px #FFF;
    padding: 0 0 0 15px;
}

    .studentScore ul {
        margin: 0px;
        padding: 0px;
        list-style-type: none;
    }

.studentRank {
    float: left;
    width: 150px;
    width: 70px;
    height: 60px;
    background-color: #4D4D4D;
}

    .studentRank ul {
        margin: 0px;
        padding: 0px;
        list-style-type: none;
    }

/* student detail end*/



/*test info end*/



/*result graph box*/

.resultGraphBox {
    float: left;
    width: 790px;
    min-height: 163px;
    margin: 0px 60px 10px 60px;
    box-shadow: 0px 3px 10px 3px #D4D4D4;
}


/*essay writing list*/

.essayRank {
    float: left;
    width: 790px;
    height: 190px;
    margin: 30px 60px 0px 60px;
}

.clickStudentName {
    float: left;
    width: 790px;
    height: 20px;
}

.essayBtn {
    float: left;
    width: 156px;
    height: 85px;
    background-image: url(../images/ttc_review/ewlist_bg_before.png);
    border: solid 1px #999;
    cursor: pointer;
}

    .essayBtn:hover .green12 {
        color: White;
    }

.essayBtnAfter {
    float: left;
    width: 156px;
    height: 85px;
    background-image: url(../images/ttc_review/ewlist_bg.png);
    border: solid 1px #999;
    cursor: pointer;
    z-index: -1;
}

    .essayBtnAfter:hover .green12 {
        color: White;
    }


.essayBtnList {
    float: left;
    width: 790px;
}

.essayName {
    float: left;
    width: 136px;
    height: 20px;
    padding: 10px 0 0 20px;
}

.essayNumber {
    float: left;
    width: 136px;
    height: 50px;
    text-align: right;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 60px;
    font-weight: normal;
    color: #ccc;
    padding: 0 20px 0 0;
    margin: 0 0 0 0;
    line-height: 50px;
}


.ewexample {
    float: left;
    width: 790px;
    border: solid 1px #CCC;
    box-shadow: 0px 3px 10px 3px #D4D4D4;
    margin: 15px 30px 0 30px;
    background-color: #FFF;
}



.resultpapertestNO {
    float: left;
    width: 120px;
    height: 80px;
    left: 20px;
}

.rptestNotext {
    float: left;
    width: 120px;
    height: 15px;
    padding: 5px 0 0 0;
}

.rptestNumber {
    float: left;
    width: 120px;
    height: 60px;
}

.studentnametag {
    float: right;
    width: 236px;
    height: 75px;
    background-image: url(../images/ttc_review/ew_name_bg.png);
    text-align: center;
    padding: 15px 0 0 0;
}

.testPaperImage {
    float: left;
    width: 790px;
    height: 900px;
    text-align: center;
    vertical-align: middle;
    top: 600px;
    position: absolute;
}


.testPaperNavi {
    float: left;
    width: 790px;
    height: 45px;
    background-color: #666;
}

.TestNo {
    background-color: #66CC99;
    margin-top: 436px;
    margin-left: 60px;
    position: absolute;
    height: 80px;
    width: 120px;
    color: White;
    text-align: center;
    vertical-align: middle;
    font-size: large;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

.naviLeft {
    float: left;
    width: 45px;
    height: 45px;
    margin: 0 0 0 280px;
}

.naviRight {
    float: left;
    width: 45px;
    height: 45px;
}

.naviSave {
    float: left;
    width: 45px;
    height: 45px;
    border-right: solid 1px #999;
    border-left: solid 1px #999;
}


/* My Profile */

td .StudentInfoTitle {
    width: 200px;
    height: 35px;
    padding-right: 10px;
    background-color: #F2F9FF;
    text-align: right;
}

td .StudentInfo {
    width: 450px;
    padding-left: 10px;
}

td .StudentInfoBorder {
    height: 1px;
    background-color: #3399FF;
}


/* End My Profile */


/*MODULE ANSWER*/

.moduleDownIcon {
    float: left;
    height: 80px;
    width: 160px;
    margin: 0 0 0 5px;
}

.ModuleAnswerBox {
    width: 70%;
    /*margin:  10px 60px 30px 60px;*/
}

.ModuleAnswerSelected {
    float: left;
    width: 155px;
    height: 50px;
    padding: 20px 0 0 0px;
    border-bottom: 130px solid 1px #999;
    background-image: url('../../../../images/moduleanswer/subject bg_lime.png');
    background-repeat: no-repeat;
    cursor: pointer;
}

    .ModuleAnswerSelected font {
        margin: 0 0 0 -30px;
    }

.ModuleAnswerMouseOn {
    float: left;
    width: 130px;
    height: 50px;
    padding: 20px 0 0 0;
    border-bottom: solid 1px #999;
    background-color: #C6E50E;
    cursor: pointer;
}

.ModuleAnswerMouseOut {
    float: left;
    width: 130px;
    height: 50px;
    padding: 20px 0 0 0;
    border-bottom: solid 1px #999;
    background-color: #333;
    cursor: pointer;
}

.moduleSubject {
    float: left;
    width: 130px;
    height: 50px;
    padding: 20px 0 0 0;
    border-bottom: solid 1px #999;
}

.moduleTableNo1 {
    float: left;
    width: 75px;
    height: 45px;
    border-right: solid 2px #C5C5C5;
    border-bottom: solid 1px #ccc;
    text-align: center;
    padding: 25px 0 0 0;
}

.moduleTableNo2 {
    float: left;
    width: 525px;
    height: 60px;
    border-bottom: solid 1px #ccc;
    text-align: center;
    padding: 10px 0 0 0;
}

.moduleTable2No1 {
    float: left;
    width: 75px;
    height: 45px;
    border-right: solid 2px #C5C5C5;
    border-bottom: solid 1px #ccc;
    text-align: center;
    padding: 25px 0 0 0;
}

.moduleTable2No2 {
    float: left;
    width: 260px;
    height: 60px;
    border-bottom: solid 1px #ccc;
    border-right: solid 2px #C5C5C5;
    text-align: center;
    padding: 10px 0 0 0;
}

.moduleTable2No3 {
    float: left;
    width: 260px;
    height: 60px;
    border-bottom: solid 1px #ccc;
    text-align: center;
    padding: 10px 0 0 0;
}



.moduleTable3No1 {
    float: left;
    width: 75px;
    height: 45px;
    border-right: solid 2px #C5C5C5;
    border-bottom: solid 1px #ccc;
    text-align: center;
    padding: 25px 0 0 0;
}

.moduleTable3No2 {
    float: left;
    width: 174px;
    height: 60px;
    border-right: solid 2px #C5C5C5;
    border-bottom: solid 1px #ccc;
    text-align: center;
    padding: 10px 0 0 0;
}

.moduleTable3No3 {
    float: left;
    width: 174px;
    height: 60px;
    border-bottom: solid 1px #ccc;
    border-right: solid 2px #C5C5C5;
    text-align: center;
    padding: 10px 0 0 0;
}

.moduleTable3No4 {
    float: left;
    width: 174px;
    height: 60px;
    border-bottom: solid 1px #ccc;
    text-align: center;
    padding: 10px 0 0 0;
}



.moduleTable4No1 {
    float: left;
    width: 75px;
    height: 45px;
    border-right: solid 2px #C5C5C5;
    border-bottom: solid 1px #ccc;
    text-align: center;
    padding: 25px 0 0 0;
}

.moduleTable4No2 {
    float: left;
    width: 130px;
    height: 60px;
    border-right: solid 2px #C5C5C5;
    border-bottom: solid 1px #ccc;
    text-align: center;
    padding: 10px 0 0 0;
}

.moduleTable4No3 {
    float: left;
    width: 130px;
    height: 60px;
    border-bottom: solid 1px #ccc;
    border-right: solid 2px #C5C5C5;
    text-align: center;
    padding: 10px 0 0 0;
}

.moduleTable4No4 {
    float: left;
    width: 130px;
    height: 60px;
    border-bottom: solid 1px #ccc;
    border-right: solid 2px #C5C5C5;
    text-align: center;
    padding: 10px 0 0 0;
}


.moduleTable4No5 {
    float: left;
    width: 130px;
    height: 60px;
    border-bottom: solid 1px #ccc;
    text-align: center;
    padding: 10px 0 0 0;
}
/*module answer end*/


/*acrobat*/

.acrobatBox {
    float: left;
    width: 900px;
    margin: 30px 0px 0px 30px;
}

.text-material {
    width: 70%;
    margin-top: 30px;
}


.acrobattext {
    margin-top: 5px;
    float: left;
    width: 720px;
    letter-spacing: -1px;
}

.acrobatdownload {
    float: left;
}

.fb-comments {
    width: calc(100% - 150px);
    margin: 0px 60px 0 60px;
    float: left;
}

/* resultpapertable*/

.resultpaperTable {
    float: left;
    width: 700px;
    height: 200px;
    margin: 30px 45px 0 45px;
}

    .resultpaperTable ul {
        float: left;
        width: 700px;
        padding: 0 0 0 0;
        margin: 0;
    }

        .resultpaperTable ul li {
            float: left;
            display: inline;
            padding: 0 0 0 0;
            margin: 0;
        }

.TableHoriMenu0 {
    float: left;
    width: 103px;
    height: 19px;
    text-align: center;
    padding-top: 3px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
}

.TableHoriMenu1 {
    float: left;
    width: 280px;
    height: 19px;
    text-align: center;
    margin-left: 30px;
    padding-top: 3px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
}

.TableHoriMenu2 {
    float: left;
    width: 180px;
    height: 19px;
    text-align: center;
    padding: 3px 0 0 0;
}

.TableNumbereBox {
    float: left;
    width: 60px;
    height: 19px;
    text-align: center;
}


.TableMarkBox {
    float: left;
    width: 180px;
    height: 19px;
}

.yourAnswer {
    float: left;
    width: 90px;
    height: 19px;
    text-align: center;
}

.correct {
    float: left;
    width: 90px;
    text-align: center;
    height: 16px;
    padding: 3px 0 0 0;
}


.TableDescriptionBox {
    float: left;
    width: 460px;
    height: 19px;
}

.D1 {
    float: left;
    width: 100px;
    text-align: center;
    height: 19px;
}



/* resultpapertable*/



/* resultGraph box end*/

/* result paper box*/

/* A3 
	width:890px;
	height:700px;
*/

.resultPaperBox {
    float: left;
    width: 850px;
    height: 1119px;
    margin: 0px 30px 30px 30px;
    background-image: url(../images/ttc_review/bg%20bar_essay.png);
    background-repeat: no-repeat;
}

/* A3 
	width:835px;
	height:700px;
*/

.resultPaper {
    float: left;
    width: 795px;
    height: 1119px;
    background-color: #FFF;
    box-shadow: 5px 5px 10px #F0F0F0;
    margin-top: 15px;
    margin-right: 30px;
    margin-bottom: 0;
    margin-left: 30px;
}

.resultPaperBoxMG {
    float: left;
    width: 850px;
    height: 750px;
    margin: 30px 30px 30px 30px;
    background-image: url(../images/ttc_review/bg%20bar.png);
    background-repeat: no-repeat;
}

.resultPaperMG {
    float: left;
    width: 795px;
    height: 750px;
    background-color: #FFF;
    box-shadow: 5px 5px 10px #F0F0F0;
    margin-top: 15px;
    margin-right: 30px;
    margin-bottom: 0;
    margin-left: 30px;
}

/*page no*/

.PageNoDiv {
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

.PageNo {
    text-align: center;
    font-family: Lucida Sans Unicode;
}


    .PageNo a {
        display: inline-block;
        width: 30px;
        height: 30px;
        margin-left: 3px;
        vertical-align: middle;
    }

    .PageNo ul {
        float: left;
        width: 100%;
        height: 20px;
        margin: 0 auto;
        list-style-type: none;
    }


        .PageNo ul li {
            float: left;
            width: 30px;
            height: 20px;
            text-align: center;
            padding: 0 0 0 0;
            margin: 0 auto;
        }

            .PageNo ul li a {
                color: #666;
            }

/*page no end*/


/*search*/

.search {
    float: left;
    width: calc(100% - 120px);
    height: 65px;
    margin-left: 60px;
    background-image: url(../images/about/news/seach%20bg.png);
    display: flex;
    align-items: center;
    justify-content: center;
}


.SearchSelect {
    float: left;
    margin: 0px 0 0 0;
}

.SearchInput {
    float: left;
    margin: 0px 5px 0 5px;
}

.SearchBtn {
    float: left;
    margin: 0px 0 0 0;
}

#SearchQuery {
    width: 258px;
}

.PageNo {
    float: left;
    width: calc(100% - 60px);
    margin: 30px 30px 0 30px;
}

    .PageNo ul {
        float: left;
        width: 620px;
        height: 20px;
        padding: 0 0 0 230px;
        list-style-type: none;
    }


.SearchPageNo {
    float: left;
    width: 850px;
    margin: 30px 30px 0 170px;
}

    .SearchPageNo ul {
        float: left;
        width: 620px;
        height: 20px;
        padding: 0 0 0 230px;
        list-style-type: none;
    }

        .SearchPageNo ul li {
            float: left;
            width: 30px;
            height: 20px;
            text-align: center;
            padding: 0 0 0 0;
        }


/*searcg end*/

/*.SampleVideo {  
	float:left; 
	margin-top:50px !important;
	width: 960px; 
	height: 140px;
	text-align:center; 
	margin-bottom:-40px !important;
} 

.SampleVideoLessonBtn {
	float:left;
	width:123px !important;*/ /* width:218px; */
/*height:140px;
	margin:0 3px 0 3px;
}*/

.SampleVideo_title {
    float: left;
    width: 960px;
    height: 33px;
    padding: 0 0 0 20px;
}

.SampleVideo_p {
    float: left;
    width: 960px;
    height: 30px;
    padding: 0 0 0 20px;
}

.VideoLessonBanner {
    float: left;
    width: 960px;
    height: 418px;
}

.VideoLesson {
    float: left;
    width: 960px;
    height: 259px;
    text-align: center;
}

.VideoLessonBtn {
    float: left;
    width: 175px;
    height: 259px;
    margin: 0 3px 0 3px;
}

.IconSubject {
    float: left;
    width: 75px;
    height: 55px;
    margin: 0 82px 0 20px;
}

.wk {
    float: left;
    margin: 30px 0px 0 20px;
}

.IconLevel {
    float: left;
    width: 32px;
    height: 32px;
}

.IconVideo {
    float: left;
    width: 40px;
    height: 40px;
}



.IconVideo2 {
    float: left;
    width: 40px;
    height: 50px;
    margin: 25px 0 0 20px;
}

/*FAQ table*/
.FAQTableTitle {
    float: left;
    width: 100%;
    margin: 0 30px 0 0;
}

    .FAQTableTitle ul {
        float: left;
        width: 100%;
        height: 25px;
        padding: 0 0 0 0;
        margin: 0;
    }

        .FAQTableTitle ul li {
            float: left;
            display: inline;
            padding: 0 0 0 0;
            margin: 0;
        }

.FAQTable {
    width: 70%;
    margin: 30px 0 0;
}

    .FAQTable ul {
        float: left;
        width: 100%;
        padding: 0 0 0 0;
        margin: 0;
    }

        .FAQTable ul li {
            float: left;
            display: inline;
            padding: 0 0 0 0;
            margin: 0;
        }

.FAQTableHeight {
    height: 30px;
}

.FAQTableHoriMenu0 {
    float: left;
    width: 70px;
    height: 40px;
    text-align: center;
    padding: 5px 0 0 0;
}

.FAQTableHoriMenu1 {
    float: left;
    width: 170px;
    height: 40px;
    text-align: center;
    padding: 5px 0 0 0;
}

.FAQTableHoriMenu2 {
    float: left;
    width: 470px;
    height: 40px;
    text-align: center;
    padding: 5px 0 0 0;
}

.FAQTableHoriMenu3 {
    float: left;
    width: 190px;
    height: 40px;
    text-align: center;
    padding: 5px 0 0 0;
}


.FAQTableNoBox {
    float: left;
    width: 50px;
    height: 15px;
    padding: 5px 10px 5px 10px;
    text-align: center;
}


.FAQTableTitleBox {
    float: left;
    width: 150px;
    height: 15px;
    text-align: center;
    padding: 5px 10px 5px 10px;
}

.FAQTableSubjectBox {
    float: left;
    width: 100%;
    height: 15px;
    padding: 5px 10px 5px 50px;
}

.FAQTableClickBox {
    float: left;
    width: 170px;
    height: 15px;
    padding: 5px 10px 5px 10px;
}

.FAQAnswerbox {
    float: left;
    width: 850px;
    background-color: #FBE9D9;
}

.FAQAnswerText {
    float: right;
    width: 580px;
    margin: 20px 20px 20px 0;
    padding: 10px 10px 10px 10px;
    background-color: #fff;
}

.FAQAnswerBG {
    float: left;
    width: 210px;
    height: 70px;
    margin: 0px 20px 0 0;
    padding: 10px 0 0 0;
    text-align: right;
}

.FAQnotice {
    float: left;
    width: 850px;
    height: 50px;
    margin: 30px 30px 0 30px;
}




/*FAQ table end*/



/* news detail page*/

.NewsTitle {
    float: left;
    width: 850px;
    height: 100px;
    padding: 0px 30px 0 30px;
}

.NewsTitleBar {
    float: left;
    width: 30px;
    height: 50px;
    margin: 5px 30px 0 0;
}

.NewsTitleText {
    width: 850px;
    height: 30px;
    margin: 5px 0 0 0px;
}

.NewsDate {
    width: 850px;
    height: 20px;
    margin: 0 0 0 0px;
}

.NewsTable {
    float: left;
    width: 850px;
    margin: 0px 30px 0px 30px;
    border-bottom: solid 1px #CCC;
    border-top: solid 1px #CCC;
}

.Newsfile {
    float: left;
    width: 820px;
    margin: 15px 15px 15px 15px;
}

    .Newsfile ul li {
        list-style-type: disc;
        margin-left: 10px;
    }

        .Newsfile ul li ul li {
            list-style-type: circle;
            margin-left: 20px;
        }

.PageTitleBg2 {
    float: left;
    width: 850px;
    height: 80px;
    margin: 30px 0 0 0;
}

.PageTitleBg3 {
    float: left;
    width: 850px;
    height: 80px;
    margin: 30px 0 0 0;
    background-image: url('/images/ttc_review/TTCTitlebg.png');
}




/*LEVELtable*/

.LEVELabout {
    float: left;
    width: 810px;
    margin: 30px 50px 0 50px;
}

.LEVELSubject {
    float: left;
    width: 810px;
    margin: 30px 50px 0 50px;
}

.LEVELTable {
    float: left;
    width: 810px;
    margin: 30px 50px 0 50px;
}

    .LEVELTable ul {
        float: left;
        width: 810px;
        padding: 0 0 0 0;
        margin: 0;
    }

        .LEVELTable ul li {
            float: left;
            display: inline;
            padding: 0 0 0 0;
            margin: 0;
        }

.LEVELTableHoriMenu0 {
    float: left;
    width: 105px;
    height: 77px;
    text-align: center;
    margin: 0 20px 20px 40px;
}

.LEVELTableHoriMenu0_2 {
    float: left;
    width: 105px;
    height: 77px;
    text-align: center;
    margin: 20px 20px 20px 40px;
}

.LEVELTableHoriMenu0_3 {
    float: left;
    width: 105px;
    height: 77px;
    text-align: center;
    margin: 10px 20px 20px 40px;
}

.LEVELTableHoriMenu2 {
    float: left;
    width: 550px;
    padding: 10px 20px 0 20px;
    line-height: 16px;
}

.LEVELTableHoriMenu2_2 {
    float: left;
    width: 550px;
    padding: 10px 20px 0 20px;
    margin: 20px 0 0 0;
    line-height: 16px;
}




.LEVELTableIconBox {
    float: left;
    width: 50px;
    height: 15px;
    padding: 5px 10px 5px 10px;
    text-align: center;
}


.LEVELTableNameBox {
    float: left;
    width: 100px;
    height: 15px;
    text-align: center;
    padding: 5px 10px 5px 10px;
}

.LEVELTableDetailBox {
    float: left;
    width: 450px;
    height: 15px;
    padding: 5px 10px 5px 10px;
}


/*LEVEL table end*/


/*registrator*/

.RegTitle {
    float: left;
    width: 850px;
    height: 60px;
    padding: 0px 30px 0 30px;
}



.regDOBselect {
    float: left;
    width: 290px;
    height: 28px;
    padding: 2px 0 0 10px;
}

.regDOBselectbox {
    float: left;
    width: 80px;
    height: 25px;
    overflow: hidden;
}

    .regDOBselectbox select {
        float: left;
        background: transparent;
        width: 82px;
        height: 25px;
        border: 1px solid #66ccff;
    }

.errorbox3 {
    float: left;
    width: 10px;
    height: 17px;
    padding: 6px 0 0 2px;
}

.registratorTable {
    float: left;
    width: 850px;
    height: 370px;
    margin: 20px 30px 0 30px;
    background: url(/images/login/bluereg_copy.png) no-repeat;
}

.registratorTable2 {
    float: left;
    width: 850px;
    height: 60px;
    margin: 20px 30px 0 30px;
}

.CongraturationsTable {
    float: left;
    width: 850px;
    height: 360px;
    margin: 20px 30px 0 30px;
    background: url(../images/login/LetsStudyreg.png) no-repeat 370px 0;
}


.Rgbtn {
    float: left;
    background-color: #FFF;
    width: 590px;
    height: 30px;
    padding: 10px 20px 10px 20px;
}


.RgErrorBox {
    float: left;
    width: 450px;
    height: 42px;
    margin-top: -8px;
}


.SubmitBtn {
    float: right;
    width: 78px;
}

.LinkBtn {
    float: left;
    width: 62px;
    margin: 90px 0px 0px 90px;
    box-shadow: 0px 1px 10px 1px #036;
    border-radius: 3em;
}

.tablewrap {
    float: left;
    width: 630px;
    height: 360px;
    margin: 0 0 0 20px;
}

/*registrator end*/

/*Congratulation Box*/
.CongratulationBox {
    float: left;
    width: 500px;
    height: 300px;
    border: 0px solid #999;
    margin: 0px 0px 0 20px;
    border-radius: 15px;
    box-shadow: 0px 3px 10px 3px #D4D4D4;
}

.CongratulationIcon {
    float: left;
    width: 91px;
    height: 70px;
    margin: 30px 0 0 100px;
}

.Congratulation {
    float: left;
    text-align: left;
    width: 450px;
    height: 52px;
    padding: 18px 0 0 30px;
    margin: -80px 0 0 120px;
}

/*invalid box*/
.invalidBox {
    float: left;
    width: 650px;
    height: 300px;
    border: 0px solid #999;
    margin: 100px 125px 0 125px;
    border-radius: 15px;
    box-shadow: 0px 3px 10px 3px #D4D4D4;
}

.invalidIcon {
    float: left;
    width: 91px;
    height: 70px;
    margin: 100px 0 0 100px;
}


.invalidIcon2 {
    float: left;
    margin: 10px 0 0 0;
}

.invalid {
    float: left;
    width: 400px;
    height: 52px;
    padding: 18px 0 0 0;
    margin: 100px 0 0 0;
}


.invalidSTTC {
    float: left;
    width: 720px;
    height: 400px;
    padding: 0 0 0 0;
    margin: -50px 0 0 90px;
}

.NoQuestionBox {
    float: left;
    width: 65%;
    height: 360px;
    margin: 30px 60px 30px 60px;
    box-shadow: 0px 3px 10px 3px #D4D4D4;
    border-radius: 15px;
}


/* contents end */


/*video lseeon icon*/


.videoDownIcon {
    float: left;
    height: 80px;
    width: 160px;
    margin: 0 0 0 5px;
}


.videotDetail {
    float: left;
    height: 50px;
    width: 530px;
    margin-top: 10px;
    margin-right: 0;
    margin-bottom: 10px;
    margin-left: 10px;
    padding-top: 10px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}

.videoTable1No1 {
    float: left;
    width: 75px;
    height: 125px;
    background-color: #FDF0D7;
    border-right: solid 2px #C5C5C5;
    border-bottom: solid 1px #ccc;
    padding: 25px 0 0 0;
}

.videoTable1No2 {
    float: left;
    width: 523px;
    height: 120px;
    border-bottom: solid 1px #ccc;
    text-align: center;
    padding: 30px 0 0 0;
}



.videoTable2No1 {
    float: left;
    width: 75px;
    height: 125px;
    background-color: #FDF0D7;
    border-right: solid 2px #C5C5C5;
    border-bottom: solid 1px #ccc;
    padding: 25px 0 0 0;
}

.videoTable2No2 {
    float: left;
    width: 260px;
    height: 120px;
    border-right: solid 2px #C5C5C5;
    border-bottom: solid 1px #ccc;
    text-align: center;
    padding: 30px 0 0 0;
}

.videoTable2No3 {
    float: left;
    width: 260px;
    height: 120px;
    border-bottom: solid 1px #ccc;
    text-align: center;
    padding: 30px 0 0 0;
}







.videoTable3No1 {
    float: left;
    width: 75px;
    height: 125px;
    background-color: #FDF0D7;
    border-right: solid 2px #C5C5C5;
    border-bottom: solid 1px #ccc;
    padding: 25px 0 0 0;
}

.videoTable3No2 {
    float: left;
    width: 174px;
    height: 120px;
    border-right: solid 2px #C5C5C5;
    border-bottom: solid 1px #ccc;
    text-align: center;
    padding: 30px 0 0 0;
}

.videoTable3No3 {
    float: left;
    width: 174px;
    height: 120px;
    border-bottom: solid 1px #ccc;
    border-right: solid 2px #C5C5C5;
    text-align: center;
    padding: 30px 0 0 0;
}

.videoTable3No4 {
    float: left;
    width: 174px;
    height: 120px;
    border-bottom: solid 1px #ccc;
    text-align: center;
    padding: 30px 0 0 0;
}

.VideoLessonSelected {
    float: left;
    width: 155px;
    height: 50px;
    padding: 20px 0 0 0px;
    border-bottom: 130px solid 1px #999;
    background-image: url('/images/video_lesson/contents/videolesson_menu/New Folder/subject bg_orange.png');
    background-repeat: no-repeat;
    cursor: pointer;
}

    .VideoLessonSelected font {
        margin: 0 0 0 -30px;
    }

.VideoLessonMouseOn {
    float: left;
    width: 130px;
    height: 50px;
    padding: 20px 0 0 0;
    border-bottom: solid 1px #999;
    background-color: #FBB03C;
    cursor: pointer;
}

.VideoLessonMouseOut {
    float: left;
    width: 130px;
    height: 50px;
    padding: 20px 0 0 0;
    border-bottom: solid 1px #999;
    background-color: #333;
    cursor: pointer;
}



.tutorial {
    float: left;
    width: 800px;
    margin: 30px 50px 0 60px;
}

.tutorialVideoIcon {
    float: left;
    width: 240px;
    height: 161px;
    margin: 0px 20px 20px 10px;
}

.tutorialVideoText {
    float: left;
    width: 232px;
    height: 70px;
    margin: 0px 20px 20px 10px;
    padding: 0px 4px 0px 4px;
}

/* Selective Practice Book */

.SPB {
    float: left;
    width: 728px;
    height: 40px;
    margin: 0 35px;
    padding: 20px 0 20px 0;
    border-top: solid 2px #CCC;
}

.SPBTable0 {
    float: left;
    width: 810px;
    height: 635px;
    margin: 30px 50px 0 50px;
    border: solid 2px #CCC;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background-image: url(../images/selective%20practice%20book/SPB-BG.png);
}


.SPBTable {
    float: left;
    width: 806px;
    margin: 30px 50px 0 50px;
    border: solid 2px #CCC;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

.SPBVideoIcon {
    float: left;
    width: 159px;
    height: 161px;
    padding: 40px 122px 40px 122px;
}

.SPBVideotextbox {
    float: left;
    width: 810px;
    height: 30px;
    padding: 20px 0 0 0;
}

.SPBVideotextbox2 {
    float: left;
    width: 810px;
    height: 50px;
}

.SPBVideotextbox3 {
    float: left;
    width: 810px;
    height: 380px;
    padding: 10px 0 5px 0;
}

.SPBVideotextbox4 {
    float: left;
    width: 805px;
    padding: 5px 0px 5px 5px;
}

.vc {
    float: left;
    width: 610px;
    height: 45px;
    margin: 10px 100px 0 100px;
    padding: 15px 0 0 0;
    /* background-color:#006; */
}

.vc_id {
    float: left;
    width: 190px;
    height: 20px;
    padding: 5px 5px 5px 5px;
    margin: 0 10px 0 20px;
    background-color: #69C;
}

.vc_code {
    float: left;
    width: 190px;
    height: 20px;
    padding: 5px 5px 5px 5px;
    background-color: #69C;
}

.vc_submit {
    float: left;
    width: 90px;
    height: 25px;
    margin: 0 0 0 20px;
    padding: 3px 5px 5px 5px;
    text-align: center;
    background-color: #339;
}

.vc_errorMsg {
    float: right;
    width: 580px;
    margin: 5px 5px 5px 5px;
    color: Red;
}

/* Selective Practice Book end */



/* news blog start*/


.News2 {
    float: left;
    width: calc(100% - 60px);
    padding: 0px 30px 0 30px;
}


.NewsBTitle {
    float: left;
    width: calc(100% - 60px);
    padding: 0px 30px 0 30px;
}

    .NewsBTitle a {
        color: #3399ff;
    }

        .NewsBTitle a:visited {
            color: #3399ff;
        }

        .NewsBTitle a:hover {
            color: Silver;
        }

.NewsBDate {
    float: left;
    width: calc(100% - 90px);
    padding: 0px 30px 0px 60px;
}

.NewsBText {
    float: left;
    width: calc(100% - 90px);
    min-height: 70px;
    line-height: 150%;
    padding: 20px 30px 0px 60px;
}

    .NewsBText a {
        color: Gray;
    }

        .NewsBText a:hover {
            color: Silver;
        }


.NewsBImage {
    float: left;
    width: 100%;
    height: 400px;
    margin: 0px 60px 0 60px;
    background-color: #069;
}

.NewsAttachedfile {
    float: right;
    width: 100px;
    height: 30px;
}

.NewsBSMS {
    float: right;
    width: 100%;
    height: 20px;
    text-align: center;
    margin: 10px 0 10px 0;
}

.facebook {
    float: right;
    width: 100px;
    height: 20px;
}

.twitter {
    float: right;
    width: 100px;
    height: 20px;
}

.google {
    float: right;
    width: 120px;
    height: 20px;
}

.email {
    float: right;
    width: 100px;
    height: 20px;
}

.NewsBComment {
    float: left;
    width: 100%;
    height: 100px;
    margin: 0px 60px 0 60px;
    background-color: #DFE0EF;
}

.NewsBLine {
    float: left;
    width: calc(100% - 60px);
    height: 10px;
    margin: 20px 30px 20px 30px;
    border-bottom: dotted #999;
}

.wrapper-user-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background-color: #fff;
    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.wrapper-material-answer {
    display: flex;
    margin-top: 24px;
    justify-content: space-between;
    align-items: center;
}

.term-material-combobox {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
/* news blog end*/
/* contents end */
.footer {
    float: left;
    width: calc(100% - 200px);
    height: 90px;
    padding-top: 40px;
    text-align: right;
    /*background:url(../images/main/footer/footer_bg.png) no-repeat;*/
    background-color: #58ACDA;
    color: Black;
    margin-bottom: 0px;
}

/* contents end */
.footerNew {
    display: flex;
    width: 100%;
    text-align: right;
    background-color: #f2f2f2 !important;
    color: Black;
    margin-bottom: 0px;
    grid-area: footer;
    justify-content: space-between;
    height: 50px;
    align-items: center;
}

.footer_family {
    margin-right: 24px;
    height: 20px;
    vertical-align: middle;
    float: right;
    display: flex;
    align-items: center;
}

.footer_copy {
    margin: 0 60px 20px 0;
    height: 20px;
}

.footer_email {
    margin-left: 24px;
    height: 20px;
    display: flex;
    align-items: center;
}


/*New Module Answer Start*/
/*.ModuleAnswerBox{
	float:left;
	width:70%;
	margin: 0px 60px 30px 30px;
	}*/

td .MA2_Wk {
    float: left;
    width: 50px;
    height: 30px;
    padding: 2px 0 0 0;
    border-right: #FFF solid 2px;
}

.MA2_Subject {
    height: 30px;
    min-width: 70px;
    background-color: #CCC;
    border-right: #FFF solid 2px;
    max-width: 100px;
}

td .MA2_WkNo {
    float: left;
    width: 50px;
    height: 45px;
    padding: 15px 0 0 0;
    background-color: #CCC;
    border-bottom: #FFF solid 1px;
    border-right: #FFF solid 2px;
}

.MA2_ThisWk {
    float: left;
    width: 50px;
    height: 45px;
    padding: 15px 0 0 0;
    background-color: #C6E50E;
    border-right: #FFF solid 2px;
}

.MA2_Icon {
    height: 55px;
    border-bottom: #999 solid 1px;
}


    .MA2_Icon img {
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

.VideoLesson_AvailableDate {
    height: 30px;
    text-align: center;
    border-bottom: #CCC solid 1px;
}

.VideoLesson_Icon {
    height: 55px;
    border-bottom: #D7D8DA solid 1px;
}

    .VideoLesson_Icon img {
        margin-top: 5px;
        margin-bottom: 5px;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

.MA2_IconRigntBar {
    float: left;
    width: 0px;
    padding: 5px 0px 0px 0px;
    height: 60px;
    border-bottom: #999 solid 1px;
}

.VideoLesson_IconRigntBar {
    float: left;
    width: 0px;
    padding: 15px 0px 0px 0px;
    height: 60px;
    border-bottom: #999 solid 1px;
}


.MA2_Available {
    height: 60px;
    border-bottom: #999 solid 1px;
    background-color: #EEE;
}

/*New Module Answer End*/



/* Test Result Start*/
td .TestResultName {
    float: left;
    width: 150px;
    height: 30px;
    padding: 2px 0 0 0;
    border-right: #FFF solid 2px;
}

.TestResultSubject {
    height: 55px;
    min-width: 50px;
    background-color: #CCC;
    border-right: #FFF solid 2px;
    max-width: 100px;
}

.TestResultSubjectBar {
    height: 55px;
    border-bottom: #999 solid 1px;
}

/* Test Result Eng */
.STTCResultSubject {
    height: 25px;
    background-color: #CCC;
    border-right: #FFF solid 2px;
    max-width: 100px;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.STTCResultSubject_PaddingBot0 {
    background-color: #CCC;
    border-right: #FFF solid 2px;
    max-width: 100px;
    height: 18px;
}

.STTCResultSubjectBar {
    height: 25px;
    border-bottom: #999 solid 1px;
}

.MA2_STTCIconRigntBar {
    float: left;
    width: 0px;
    padding: 5px 0px 0px 0px;
    height: 25px;
    border-bottom: #999 solid 1px;
}

.image-student {
    position: relative;
}

.image-wrap {
    position: relative;
    border-radius: 10%;
    display: block;
    overflow: hidden;
}

    .image-wrap label {
        display: block;
        border-radius: 10%;
        overflow: hidden;
        position: relative;
    }

.crop-image-popup, .select-image-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9999;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.6);
}

    .crop-image-popup.active, .select-image-popup.active {
        display: flex;
    }

.close-popup {
    float: right;
    cursor: pointer;
    margin-top: -20px;
}

.close-capture {
    float: right;
    cursor: pointer;
    margin-top: -20px;
    margin-right: -15px;
}

.btn-save {
    float: right;
    color: #000000;
    background: #ffffff;
    border: 1px solid;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer
}

.webcam-image-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10000;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.6);
}

    .webcam-image-popup.active {
        display: flex;
    }

.webcam-container {
    width: 100%;
    height: 100%;
}

.btn-open-webcam {
    background-color: #fff;
    border: 1px solid rgba(27, 31, 35, .25);
    border-radius: 6px;
    color: #27aae1;
    padding: 6px 16px;
    cursor: pointer;
    margin-top: 40px;
}

.btn-Capture {
    background-color: #27aae1;
    border: 1px solid rgba(27, 31, 35, .15);
    box-shadow: rgb(27,31,35,10%) 0 1px 0;
    border-radius: 6px;
    color: #fff;
    padding: 6px 16px;
    cursor: pointer
}

.btn-Cancel {
    background-color: #FF4742;
    border: 1px solid rgba(27, 31, 35, .15);
    box-shadow: rgb(27,31,35,10%) 0 1px 0;
    border-radius: 6px;
    color: #fff;
    padding: 6px 16px;
    cursor: pointer
}

.loading-img {
    display: none;
    border: 5px solid #f3f3f3;
    border-radius: 50%;
    float: right;
    margin-right: 5px;
    border-top: 3px solid #3498db;
    width: 20px;
    height: 20px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.tab-loading-img {
    border: 2px solid #f3f3f3;
    border-radius: 50%;
    margin-right: 7px;
    display: none;
    border-top: 2px solid #3498db;
    width: 16px;
    height: 16px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    position: relative;
    top: 2px;
}

span.tab-loading-img.active {
    display: inline-block;
}

.select-image {
    position: absolute;
    bottom: 7px;
    left: 7px;
    width: 148px;
    height: 48px;
    text-align: center;
    background-color: #000000;
    opacity: 0;
    cursor: pointer;
    border-radius: 0 0 13% 13%;
}

.select-image-container {
    padding: 30px;
    background-color: #ffffff;
    text-align: center;
}

.btn-image {
    margin-right: 20px;
}

.icon-select {
    color: #ffffff;
    font-size: 20px;
    padding-top: 10px;
}

.image-wrap:hover .select-image {
    opacity: 0.7;
}

/* .student-image-popup {
    width: 350px;
    height: 350px;
    border-radius: 50%;
    object-fit: cover;
} */

.image-display {
    object-fit: cover;
}

/* Warning message */
.info-msg,
.info-msg2,
.success-msg,
.warning-msg,
.error-msg {
    margin: 10px 0;
    padding: 5px;
    border-radius: 3px 3px 3px 3px;
}

.info-msg {
    color: #fff;
    background-color: #23bcc6;
}

.info-msg2 {
    color: #fff;
    background-color: #F27072;
}

.success-msg {
    color: #270;
    background-color: #DFF2BF;
}

.warning-msg {
    color: #c92c2c;
    background-color: #FEEFB3;
}

.error-msg {
    color: #D8000C;
    background-color: #FFBABA;
}

/* Warning message */

.current_datetime {
    margin-top: 40px;
}

.current_week {
    margin-left: 40px;
}

.wrapper-content {
    background-color: #fff;
    flex: 1;
    width: 100%;
    border-radius: 10px;
}

.image-wrap.mobile-responsive {
    display: none;
}

#writingLoadingID{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: rgb(0,0,0,0.2);
    display: none;
}

.writing-loading{
    position: fixed;
    top: 50%;
    right: 41%;
    transform: translate(50%, -50%);
}

.familySelect {
    display: inline;
    margin: 0 0 0 10px
}

.tdSeperator.mobile-responsive {
    display: none;
}

.text-policy {
    color: black;
}

.title-tt-review {
    width: 400px;
}

.student-image-size {
    width: 800px;
    height: 700px;
}

@media (max-width: 1024px) {
    #wrapper {
        grid-template-columns: 0px 1fr;
        width: 100vw;
        min-width: unset;
    }

    #container {
        padding: 8px 0;
        margin: 0;
    }

    .header {
        width: inherit;
    }

    .header_logo {
        width: 0px;
    }

    .subnavi {
        width: 85%;
    }

        .subnavi ul {
            width: 85%;
        }

    .image-wrap.mobile-responsive {
        display: none;
    }

    .NoQuestionBox {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 0 30px 0;
    }

    .invalidIcon, .invalid {
        margin: 0;
        padding: 0;
    }

    .slides_control {
        width: 100% !important;
        height: calc((100vw - 32px) * 9 /16) !important;
        /*height: 600px !important;*/
    }

    #container-welcome {
        margin: 0;
        padding: 48px 0;
    }

    .slides_control > p > a > img {
        width: 100% !important;
        height: calc((100vw - 32px) * 9 /16) !important;
    }

    .slides_control > a > p > img {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 16/9 !important;
        height: calc((100vw - 32px) * 9 /16) !important;
    }

    .sidebar {
        box-shadow: 1px 2px 0 0 #D4D4D4;
        width: 250px;
        max-height: calc(100vh - 86px);
        position: sticky;
        top: 70px;
        left: 0px;
    }

    #slides .prev, #slides .next {
        top: calc((100vw - 32px)*9/16/2 - 43px/2);
    }

    .FAQTable {
        overflow: auto;
        margin-top: 0;
    }

        .FAQTable ul {
            min-width: 850px;
        }

    .FAQnotice {
        width: 70%;
    }

    .main-content {
        width: calc(100vw - 32px);
        padding: 16px 16px 0px;
    }

    .header-profile {
        padding-right: 16px;
    }


    .footerNew {
        width: inherit;
    }

    .footer_email {
        margin-left: 16px;
    }

    .footer_family {
        margin-right: 16px;
    }

    .sidebar-menu-icon.reset-margin {
        display: none;
    }

    .sidebar.collapse {
        width: 0px;
        padding: 0px;
    }

    .logout_button {
    }

        .logout_button.collapse {
            display: none;
        }

    .col-menu {
        padding: 0 18px;
    }

    .PageVideoLessonTitle {
        width: 85%
    }

    .PageModuleAnswerTitle {
        width: 85%
    }

    .EssayPageTitle {
        width: 85%
    }

    .ModuleAnswerBox {
        width: 85%
    }

    .text-material {
        width: 85%
    }

    .NoQuestionBox {
        width: 75%
    }

    .PageTitleText {
        width: 85%;
    }

    .retest-title {
        width: 85%;
    }

    .PageTitle {
        width: 85%;
    }

    .Intro {
        width: 85%;
        margin-top: 0;
    }

    .current_week {
        display: block;
        margin-left: 0px;
        margin-top: 8px;
    }

    .wrapper-user-profile {
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .wrapper-content {
        background-color: #f2f2f2;
    }

    .col-menu {
        background-color: #2593FC
    }

    .header {
        position: sticky;
        top: 0;
        left: 0;
        z-index: 1000;
    }

    #container-banner {
        margin: 0;
    }

    #MaterialTabStrip-1 {
        overflow: auto;
    }

    #VideoTabStrip-1 {
        overflow: auto;
    }

    #ReadingTabStrip-2 {
        overflow: auto;
    }

    #SCTGATabStrip-1 {
        overflow: auto;
    }

    #PracticeTestTab-1 {
        overflow: auto;
    }

    #M27ESCourseTabStrip-2 {
        overflow: auto;
    }

    #OnlineLesssonTab-1 {
        overflow: auto;
    }

    #OnlineTestTab1-1 {
        overflow: auto;
    }

    #TestResultTab1-1 {
        overflow: auto;
    }

    #PaymentTab-1 {
        min-width: 600px;
    }

    #PaymentTab {
        overflow: auto;
    }

    .student-image-size {
        width: 100%;
        aspect-ratio: 4/3;
        height: auto;
    }
}

.new-main-content {
    overflow-x: hidden;
}

@media (max-width: 768px) {
    .centerAline1,
    .centerAline {
        padding-left: 0.5 !important;
    }

    .introbox2 {
        margin: 0;
    }

    .Intro2 {
        display: grid;
        gap: 1em;
        grid-template-columns: 1fr auto;
    }

    .IntroContainer {
        display: grid;
        gap: 1em;
        grid-template-columns: 1fr auto;
    }
    .generate-link-wrapper{
        flex-wrap: wrap;
    }
}

@media (max-width: 640px) {
    .content {
        margin-top: 16px;
    }

    #slides .prev, #slides .next {
        top: calc((100vw - 32px)*9/16/2 - 43px/2);
    }

    .footerNew {
        text-align: justify;
    }

    .footer_email {
        display: block;
        height: auto;
        margin-right: 32px;
    }

    .footer_family {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .familySelect {
        margin: 0;
    }

    #container-banner {
        margin: 0;
    }

    .slides_control {
        width: 100% !important;
        height: calc((100vw - 32px) * 9 /16) !important;
    }

        .slides_control > p > a > img {
            width: 100% !important;
            height: calc((100vw - 32px) * 9 /16) !important;
        }

    .image-student {
        display: none;
    }

    .FAQTable {
        width: 96%;
    }

    .FAQnotice {
        width: 96%;
    }

    #SearchQuery {
        width: 200px;
    }

    .slides_control > a > p > img {
        width: 100% !important;
        max-width: 100% !important;
        height: calc((100vw - 32px) * 9 /16) !important;
    }

    .PageVideoLessonTitle {
        width: 96%
    }

    .PageModuleAnswerTitle {
        width: 96%
    }

    .EssayPageTitle {
        width: 96%
    }

    .ModuleAnswerBox {
        width: 96%
    }

    .text-material {
        width: 96%
    }

    .NoQuestionBox {
        width: 86%
    }

    .PageTitleText {
        width: 96%;
    }

    .retest-title {
        width: 96%;
    }

    .acrobattext {
        max-width: 100%;
    }

    .term-material-combobox {
        align-self: flex-end;
    }

    .wrapper-material-answer {
        flex-direction: column;
    }

    .invalid {
        margin: 0 0 16px 0;
        padding: 0;
    }

    .subnavi {
        width: 96%;
    }

        .subnavi ul {
            width: 96%;
        }

    .NoQuestionBox {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 0 30px 0;
    }

    .invalidIcon {
        margin: 0;
    }

    .title-tt-review {
        width: 265px;
    }

    .PageTitle {
        width: 96%;
    }

    .Intro {
        width: 96%;
    }

    .IntroContainer {
        display: flex;
        flex-direction: column;
    }

    .Intro2 {
        display: flex;
        flex-direction: column;
    }
}


@media (max-width: 480px) {
    .image-student {
        display: none;
    }

    .PageVideoLessonTitle {
        width: 96%
    }

    .PageModuleAnswerTitle {
        width: 96%;
        overflow: auto;
    }

    .FAQnotice {
        height: auto;
        width: 96%;
    }

    #SearchQuery {
        width: 150px;
    }

    .SearchBtn {
        margin-top: 6px;
    }

    .FAQTable {
        overflow: auto;
    }

        .FAQTable ul {
            min-width: 850px;
        }

    .EssayPageTitle {
        width: 96%
    }

    .familySelect {
        margin-top: 4px;
        width: 100%;
    }

    .ModuleAnswerBox {
        width: 96%
    }

    .text-material {
        width: 96%
    }

    .NoQuestionBox {
        width: 86%
    }

    .PageTitleText {
        width: 96%;
    }

    .retest-title {
        width: 96%;
    }

    .footerNew {
        width: calc(100vw - 32px);
        margin: 0 16px;
        padding-top: 8px;
        height: auto;
        flex-direction: column;
        background-color: #fff !important;
        padding-bottom: 16px;
    }

    .footer_select {
        width: 100%;
        height: 28px;
    }

    .footer_email {
        margin-left: 16px;
        margin-right: 16px;
        text-align: center;
        /*margin-right: 16px;*/
        display: block;
        /*		width: 42%;*/
        order: 2;
        color: #a5a5a5 !important;
        max-width: unset;
        margin-top: 32px;
    }

    .footer_family {
        margin-right: 0px;
        display: flex;
        margin-left: 16px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        order: 1;
        flex: 1;
        align-self: flex-start;
        width: calc(100% - 32px);
    }

    .invalid {
        max-width: 200px;
    }
    /*#slides .prev, #slides .next {
		top: 130px;
	}*/
    .text-policy {
        color: #a5a5a5;
    }

    #ribbon {
        width: 20%;
    }

    .PageTitleText {
        height: auto;
    }

    #Table_01 table {
        width: 85% !important;
    }

    #container-welcome {
        margin: 0;
        padding: 48px 0;
    }

    .IntroContainer {
        flex-direction: column;
        margin-top: 0;
    }

    .Intro2 {
        flex-direction: column;
        margin-top: 0;
    }

    .Introbar {
        display: none;
    }

    .introbox2 {
        margin: 0 0 24px;
    }
}

@media (max-width: 320px) {
    .year {
        width: 62px;
    }

    .col-menu {
        padding: 0 14px;
    }

    .title-tt-review {
        font-size: 25px;
        width: 250px;
    }

    .invalidIcon.rp-320 {
    }

    .invalid.rp-320 {
        font-size: 12px;
        margin-bottom: 28px;
    }

    .NoQuestionBox.rp-320 {
        height: 200px;
    }

    .pagination {
        margin: 0;
    }
}


@keyframes blinking {
    0% {
        background-color: #05fc58;
        border: 0px solid #05fc58;
    }

    100% {
        background-color: #fc9a21;
        border: 0px solid #fc9a21;
    }
}

#photoTooltip {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    /* NAME | TIME | ITERATION */
    animation: blinking 1s infinite;
}

/* setup tooltips */
.tooltip {
    position: relative;
}

    .tooltip:before,
    .tooltip:after {
        display: block;
        opacity: 1;
        pointer-events: none;
        position: absolute;
        margin-top: 10px;
        margin-left: -12px;
    }

    .tooltip:after {
        border-right: 6px solid transparent;
        border-bottom: 6px solid #5068f2;
        border-left: 6px solid transparent;
        content: '';
        height: 0;
        top: 20px;
        left: 20px;
        width: 0;
    }

    .tooltip:before {
        background: #5068f2;
        border-radius: 5px 5px 5px 5px;
        color: #fff;
        content: attr(data-title);
        font-size: 12px;
        padding: 6px 10px;
        top: 26px;
        white-space: nowrap;
    }

.grade-infomation {
    background-color: #FFF;
    border-radius: 10px;
    color: black;
}

.header-info-arrow-down {
    cursor: pointer;
}

.header-info-arrow-down-icon {
    height: 10px;
    width: 10px;
    content: "";
    position: absolute;
    right: 15px;
    top: 24px;
    transition: .5s all;
    transform: rotate(45deg);
    border-right: 2px solid white;
    border-bottom: 2px solid white;
}

.header__name {
    margin-right: 12px;
}

.header-action {
    position: absolute;
    top: 48px;
    right: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.login-header {
    height: 40px;
    background-color: black;
    width: 100px;
    display: flex;
    align-items: center;
    padding-left: 12px;
    border-bottom: 1px solid white;
    color: #fff;
}

    .login-header:hover a,
    .login-header:hover {
        background-color: #fff;
        color: #121212;
        box-shadow: 0px 3px 10px 3px #D4D4D4;
    }

a.login-header {
    color: white;
    display: flex;
    align-items: center;
}

.login-header:first-child {
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

.login-header:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.header-action {
    display: none;
}

    .header-action.active {
        display: block;
    }

@media (max-width: 1024px) {
    .header__name {
        margin-right: 20px;
    }
}

.icon-user {
    color: black;
    margin-right: 6px;
}

.link-custom {
    width: 100%;
    height: 100%;
}

.collapse:not(.show) {
    display: unset;
}

.a-black {
    color: #000000;
}

li.box:hover a.box1.a-black {
    color: white !important;
}

a {
    text-decoration: none !important;
}

.submenu > li > .box:hover .textIcon {
    color: white !important;
}

.submenu > li > .box1:hover .textIcon {
    color: white !important;
}

.sidebar.black13.collapse:not(.show) {
    display: unset !important;
}



.table {
    margin-bottom: 0;
    max-width: none;
}

.min-w-850 {
    min-width: 900px !important;
}

i.fas.fa-times.close-popup,
i.fas.fa-times.close-popup-overall {
    font-size: 1.7rem;
}
.container-class-list, .fix-width {
    overflow-x: auto !important;
}
@media (min-width:1360px) {
    table {
        width: 100%;
        table-layout: fixed;
    }
    .fix-width, .dataTables_scrollBody {
        overflow-x: hidden !important;
    }
    
    
}
.dataTables_scrollBody{
    overflow-x:scroll;
}

@media (min-width:1500px){
    .dropdown {
        width: calc(100% - 560px) !important;
        margin: 2rem auto !important;
        padding-top: 20px !important;
    }
}

.dropdown {
    width: 80%;
    margin: 2rem auto ;
    padding-top: 20px ;
    
}