﻿/*IELTS tab*/
/*#section-navbar {
    overflow: scroll;
}*/

/*#section-navbar > ul.nav {
        overflow-x: scroll;
        width: 100%;
        height: auto;
    }*/

#section-navbar::-webkit-scrollbar,
#section-navbar > ul.nav::-webkit-scrollbar {
    display: none;
    width: 0px;
}

#section-navbar > ul.nav li.nav-item {
    width: calc(100% / 4);
}

    #section-navbar > ul.nav li.nav-item > a {
        height: 100%;
        width: 100%;
        padding: 0 5px 0 0;
    }

.IELTS-grpExe-nav {
    background: #fff;
    width: 100%;
    height: 100%;
    display: flex;
    transition: all 0.2s ease-in-out;
    border-radius: 4px;
}

.tab-content > .tab-practice {
    display: none;
}

.tab-practice.active {
    display: block;
}
/*theme-greentree*/
.tab-content.subtab_content > .tab-practice:first-child #section-navbar .nav-item:hover .IELTS-grpExe-nav,
.tab-content.subtab_content > .tab-practice:first-child #section-navbar .nav-item.active .IELTS-grpExe-nav {
    background: #28a745;
}

.tab-content.subtab_content > .tab-practice:first-child .tab-content > .tab-pane .free-exercise-item-icon {
    background: #28a745;
}

.tab-content.subtab_content > .tab-practice:first-child #section-navbar .nav-item .IELTS-grpExe-nav .IELTS-grpExe-nav-icon svg {
    opacity: 1;
    fill: #28a745;
}
/*theme-cyan*/
.tab-content.subtab_content > .tab-practice:nth-child(2) #section-navbar .nav-item:hover .IELTS-grpExe-nav,
.tab-content.subtab_content > .tab-practice:nth-child(2) #section-navbar .nav-item.active .IELTS-grpExe-nav {
    background: #17a2b8;
}

.tab-content.subtab_content > .tab-practice:nth-child(2) .tab-content > .tab-pane .free-exercise-item-icon {
    background: #17a2b8;
}

.tab-content.subtab_content > .tab-practice:nth-child(2) #section-navbar .nav-item .IELTS-grpExe-nav .IELTS-grpExe-nav-icon svg {
    opacity: 1;
    fill: #17a2b8;
}

/* theme-green */
.tab-content.subtab_content > [id*="menu9"].tab-pane #section-navbar .nav-item:hover .IELTS-grpExe-nav,
.tab-content.subtab_content > [id*="menu9"].tab-pane #section-navbar .nav-item.active .IELTS-grpExe-nav {
    background: #064C5B;
}

.tab-content.subtab_content > [id*="menu9"].tab-pane .tab-content > .tab-pane .free-exercise-item-icon {
    background: #064C5B;
}

.tab-content.subtab_content > [id*="menu9"].tab-pane #section-navbar .nav-item .IELTS-grpExe-nav .IELTS-grpExe-nav-icon svg {
    opacity: 1;
    fill: #064C5B;
}
/* theme-red */
.tab-content.subtab_content > [id*="menu9"].tab-pane #section-navbar .nav-item.red:hover .IELTS-grpExe-nav,
.tab-content.subtab_content > [id*="menu9"].tab-pane #section-navbar .nav-item.red.active .IELTS-grpExe-nav {
    background: #be1c2f;
}

.tab-content.subtab_content > [id*="menu9"].tab-pane .tab-content > .tab-pane.red .free-exercise-item-icon {
    background: #be1c2f;
}

.tab-content.subtab_content > [id*="menu9"].tab-pane #section-navbar .nav-item.red .IELTS-grpExe-nav .IELTS-grpExe-nav-icon svg {
    opacity: 1;
    fill: #be1c2f;
}
/* theme-purple */
.tab-content.subtab_content > #menu10.tab-pane #section-navbar .nav-item:hover .IELTS-grpExe-nav,
.tab-content.subtab_content > #menu10.tab-pane #section-navbar .nav-item.active .IELTS-grpExe-nav {
    background: #7C83C3;
}

.tab-content.subtab_content > #menu10.tab-pane .tab-content > .tab-pane .free-exercise-item-icon {
    background: #7C83C3;
}

.tab-content.subtab_content > #menu10.tab-pane #section-navbar .nav-item .IELTS-grpExe-nav .IELTS-grpExe-nav-icon svg {
    opacity: 1;
    fill: #7C83C3;
}
/* theme-blue */
.tab-content.subtab_content > #menu11.tab-pane #section-navbar .nav-item:hover .IELTS-grpExe-nav,
.tab-content.subtab_content > #menu11.tab-pane #section-navbar .nav-item.active .IELTS-grpExe-nav {
    background: #2178D8;
}

.tab-content.subtab_content > #menu11.tab-pane .tab-content > .tab-pane .free-exercise-item-icon {
    background: #2178D8;
}

.tab-content.subtab_content > #menu11.tab-pane #section-navbar .nav-item .IELTS-grpExe-nav .IELTS-grpExe-nav-icon svg {
    opacity: 1;
    fill: #2178D8;
}

#section-navbar:hover .nav-item:not(:hover) .IELTS-grpExe-nav {
    opacity: 0.8
}

#section-navbar .IELTS-grpExe-nav .IELTS-grpExe-nav-text svg text {
    transition: all 0.2s ease-in-out;
}

#section-navbar .nav-item:hover .IELTS-grpExe-nav .IELTS-grpExe-nav-text svg text,
#section-navbar .nav-item.active .IELTS-grpExe-nav .IELTS-grpExe-nav-text svg text {
    fill: #fff;
}

.IELTS-grpExe-nav-icon {
    padding: calc(calc(100vw / 1366) * 10) calc(calc(100vw / 1366) * 15) calc(calc(100vw / 1366) * 15) calc(calc(100vw / 1366) * 15);
    width: 40%;
    background: #F8F8F8;
    margin: calc(calc(100vw / 1366) * 8);
    border-radius: 4px;
    position: relative;
}

    .IELTS-grpExe-nav-icon svg text {
        font-family: "Font Awesome 5 Pro";
    }

    .IELTS-grpExe-nav-icon svg {
        opacity: 0.7
    }

.IELTS-grpExe-nav-text {
    width: 40%;
    padding: 6% calc(calc(100vw / 1366) * 10) calc(calc(100vw / 1366) * 20) calc(calc(100vw / 1366) * 0);
    position: relative;
}

    .IELTS-grpExe-nav-text span.IELTS-grpExe-title,
    .IELTS-grpExe-nav-text span.exe-count,
    .IELTS-grpExe-nav-text span.taker-count {
        position: absolute;
        padding: 0 5px 0 0;
    }

    .IELTS-grpExe-nav-text span.IELTS-grpExe-title {
        width: 130%;
    }

    .IELTS-grpExe-nav-text span.exe-count {
        width: 120%;
        top: calc(10% + calc(calc(100vw / 1920) * 18));
    }

    .IELTS-grpExe-nav-text span.taker-count {
        width: 120%;
        top: calc(10% + calc(calc(100vw / 1920) * 35));
    }

.IELTS-grpExe-nav .progress {
    position: absolute;
    width: 80%;
    height: 8px;
    left: 10%;
    bottom: 10%;
    border-radius: 2px;
    border: none;
    background: #657582;
}

.ielts-excercises-section .table_choose .subtab_subtab_content {
    padding: 30px 0;
}

.ielts-excercises-section .nav-tabs > .nav-item > .nav-link {
    font-size: 25px;
    font-size: 20px;
    font-weight: bold;
    border: none;
    padding: 0 30px 0 0;
    background: none;
    border-bottom: 0;
    font-family: inherit;
    transition: all 0.2s ease-in-out;
}

.ielts-excercises-section .nav-tabs > .nav-item:not(.active) > .nav-link {
    color: #778A96;
}

    .ielts-excercises-section .nav-tabs > .nav-item:not(.active) > .nav-link:hover,
    .ielts-excercises-section .nav-tabs > .nav-item:not(.active) > .nav-link:focus {
        color: #000;
        border: none;
        border-bottom: 0;
    }

.ielts-excercises-section .nav-tabs > .nav-item.active > .nav-link,
.ielts-excercises-section .nav-tabs > .nav-item.active > .nav-link:hover,
.ielts-excercises-section .nav-tabs > .nav-item.active > .nav-link:focus {
    color: #000;
    cursor: default;
    background-color: transparent;
    border: none;
    border-bottom: 0;
}

.ielts-excercises-content-box {
    padding: 0 4%;
}

/*TOEIC tab*/
/*.TOEIC-section-navbar {
    overflow: scroll;
}*/

.TOEIC-section-navbar {
    /*overflow-x: scroll;*/
    width: 100%;
    height: auto;
    display: flex;
}

    .TOEIC-section-navbar::-webkit-scrollbar {
        display: none;
        width: 0px;
    }

    .TOEIC-section-navbar > li.nav-item {
        width: calc(100% / 4);
        padding: 0 5px 0 0;
    }

        .TOEIC-section-navbar > li.nav-item > a {
            height: 100%;
            width: 100%;
        }

.TOEIC-grpExe-nav {
    background: #f8f8f8;
    width: 100%;
    height: 100%;
    display: flex;
    transition: all 0.2s ease-in-out;
    border-radius: 4px;
    flex-direction: column;
}

.TOEIC-section-navbar .nav-item:hover .TOEIC-grpExe-nav,
.TOEIC-section-navbar .nav-item.active .TOEIC-grpExe-nav {
    background: #064C5B;
}

.TOEIC-section-navbar > li.nav-item:not(.active) {
    opacity: 0.9;
}

    .TOEIC-section-navbar > li.nav-item:not(.active):hover {
        opacity: 1;
    }

.TOEIC-section-navbar:hover .nav-item:not(:hover) .TOEIC-grpExe-nav {
    opacity: 0.6;
}

.TOEIC-excercises-section #navbar:hover .nav-section:not(:hover) {
    opacity: 0.6;
}

.TOEIC-section-navbar .nav-item:hover .TOEIC-grpExe-nav .TOEIC-grpExe-nav-text svg text,
.TOEIC-section-navbar .nav-item.active .TOEIC-grpExe-nav .TOEIC-grpExe-nav-text svg text {
    fill: #fff;
}

.TOEIC-grpExe-nav-icon {
    padding: calc(calc(100vw / 1440) * 5) calc(calc(100vw / 1440) * 15) calc(calc(100vw / 1440) * 15) calc(calc(100vw / 1440) * 15);
    width: 80%;
    background: #fff;
    margin: 10% 10% 0;
    border-radius: 4px;
    position: relative;
}

    .TOEIC-grpExe-nav-icon svg text {
        font-family: "Font Awesome 5 Pro";
        font-weight: 900;
    }

    .TOEIC-grpExe-nav-icon svg {
        opacity: 0.8
    }

.TOEIC-grpExe-nav-text {
    width: 100%;
    padding: 5% 10% 5% 10%;
    position: relative;
}


    .TOEIC-grpExe-nav-text span.exe-count {
        top: calc(10% + calc(calc(100vw / 1920) * 40));
    }

    .TOEIC-grpExe-nav-text span.taker-count {
        top: calc(10% + calc(calc(100vw / 1920) * 60));
    }

.TOEIC-grpExe-nav .progress {
    position: absolute;
    width: 80%;
    height: 4px;
    left: 10%;
    bottom: 15%;
    border-radius: 2px;
    border: none;
    background: #657582;
}

.TOEIC-excercises-section .table_choose .subtab_subtab_content {
    padding: 30px 0;
}

.TOEIC-excercises-section .nav-tabs > .nav-item > .nav-link {
    font-size: 25px;
    font-size: 20px;
    font-weight: bold;
    border: none;
    padding: 0 30px 0 0;
    background: none;
    border-bottom: 0;
    font-family: inherit;
    transition: all 0.2s ease-in-out;
}

.TOEIC-excercises-section .nav-tabs > .nav-item:not(.active) > .nav-link {
    color: #778A96;
}

    .TOEIC-excercises-section .nav-tabs > .nav-item:not(.active) > .nav-link:hover,
    .TOEIC-excercises-section .nav-tabs > .nav-item:not(.active) > .nav-link:focus {
        color: #000;
        border: none;
        border-bottom: 0;
    }

.TOEIC-excercises-section .nav-tabs > .nav-item.active > .nav-link,
.TOEIC-excercises-section .nav-tabs > .nav-item.active > .nav-link:hover,
.TOEIC-excercises-section .nav-tabs > .nav-item.active > .nav-link:focus {
    color: #000;
    cursor: default;
    background-color: transparent;
    border: none;
    border-bottom: 0;
}

.TOEIC-excercises-content-box {
    padding: 0 4%;
}

.TOEIC-excercises-section .nav-tabs .nav-section {
    width: calc(calc(100% / 2) - 10px);
    padding: calc(calc(100vw / 1920) * 10) calc(calc(100vw / 1920) * 20) calc(calc(100vw / 1920) * 20) calc(calc(100vw / 1920) * 20);
    background: #fff;
    margin: 0 10px 0 0;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
}

.TOEIC-excercises-section .taker-count {
    margin-top: -5px;
}

.TOEIC-excercises-section p.title_group {
    font-size: 14px;
    font-weight: bold;
    margin: 0 0 10px 0;
}

/*#region General English*/
#tabExercises .IELTS-tab-pane {
    display: flex;
    flex-wrap: wrap;
}

#tabExercises .IELTS-grpExe-nav {
    padding: 15px;
    height: auto;
    width: 45%;
    margin: 10px 10px 20px 20px;
    -webkit-box-shadow: -1px 2px 9px 3px rgba(0, 0, 0, 0.04);
    box-shadow: -1px 2px 9px 3px rgba(0, 0, 0, 0.04);
    cursor: pointer;
}

    #tabExercises .IELTS-grpExe-nav:active, #tabExercises .IELTS-grpExe-nav:hover, #tabExercises .IELTS-grpExe-nav[aria-expanded="true"] {
        background: #064C5B;
        color: #fff;
    }

.GE-grpExe-nav-text {
    padding-left: 0px;
}

.GE-grpExe-nav-icon {
    background: white;
    border-radius: 5px;
    padding: 30px 28px 40px 28px;
    display: flex;
    justify-content: center;
    background: #f8f8f8;
}

    .GE-grpExe-nav-icon i {
        font-size: 3.5vw;
        color: #657582;
    }

#tabExercises .ielts-excercises-content-box {
    padding: 0 0;
}

.GE-grpExe-item {
    margin-left: 10px;
}

/*theme greentree*/
.ielts-excercises-section .nav-tabs > .nav-item.theme-indigo.active > .nav-link,
.ielts-excercises-section .nav-tabs > .nav-item.theme-indigo:hover > .nav-link,
.ielts-excercises-section .nav-tabs > .nav-item.theme-indigo:focus > .nav-link,
#tabExercises .ielts-excercises-content-box .tab-content.subtab_content > .tab-practice:first-child .IELTS-grpExe-nav .GE-grpExe-nav-icon i {
    color: #28a745;
}

#tabExercises .ielts-excercises-content-box .tab-content.subtab_content > .tab-practice:first-child .IELTS-grpExe-nav[aria-expanded="true"],
#tabExercises .ielts-excercises-content-box .tab-content.subtab_content > .tab-practice:first-child .IELTS-grpExe-nav:hover {
    background: #28a745;
}

#tabExercises .ielts-excercises-content-box .tab-content.subtab_content > .tab-practice:first-child .free-exercise-item-icon {
    background: #28a745;
}

/* theme cyan*/
.ielts-excercises-section .nav-tabs > .nav-item.theme-cyan.active > .nav-link,
.ielts-excercises-section .nav-tabs > .nav-item.theme-cyan:hover > .nav-link,
.ielts-excercises-section .nav-tabs > .nav-item.theme-cyan:focus > .nav-link,
#tabExercises .ielts-excercises-content-box .tab-content.subtab_content > .tab-practice:nth-child(2) .IELTS-grpExe-nav .GE-grpExe-nav-icon i {
    color: #17a2b8;
}

#tabExercises .ielts-excercises-content-box .tab-content.subtab_content > .tab-practice:nth-child(2) .IELTS-grpExe-nav[aria-expanded="true"],
#tabExercises .ielts-excercises-content-box .tab-content.subtab_content > .tab-practice:nth-child(2) .IELTS-grpExe-nav:hover {
    background: #17a2b8;
}

#tabExercises .ielts-excercises-content-box .tab-content.subtab_content > .tab-practice:nth-child(2) .free-exercise-item-icon {
    background: #17a2b8;
}

/* theme green */
.ielts-excercises-section .nav-tabs > .nav-item.theme-green.active > .nav-link,
.ielts-excercises-section .nav-tabs > .nav-item.theme-green:hover > .nav-link,
.ielts-excercises-section .nav-tabs > .nav-item.theme-green:focus > .nav-link,
#tabExercises .ielts-excercises-content-box .tab-content.subtab_content > .tab-pane:nth-child(1) .IELTS-grpExe-nav .GE-grpExe-nav-icon i {
    color: #0A4D5C;
}

#tabExercises .ielts-excercises-content-box .tab-content.subtab_content > .tab-pane:nth-child(1) .IELTS-grpExe-nav[aria-expanded="true"],
#tabExercises .ielts-excercises-content-box .tab-content.subtab_content > .tab-pane:nth-child(1) .IELTS-grpExe-nav:hover {
    background: #0A4D5C;
}

#tabExercises .ielts-excercises-content-box .tab-content.subtab_content > .tab-pane:nth-child(1) .free-exercise-item-icon {
    background: #0A4D5C;
}

/* theme purple */
.ielts-excercises-section .nav-tabs > .nav-item.theme-purple.active > .nav-link,
.ielts-excercises-section .nav-tabs > .nav-item.theme-purple:hover > .nav-link,
.ielts-excercises-section .nav-tabs > .nav-item.theme-purple:focus > .nav-link,
#tabExercises .ielts-excercises-content-box .tab-content.subtab_content > .tab-pane:nth-child(2) .IELTS-grpExe-nav .GE-grpExe-nav-icon i {
    color: #7C83C3;
}

#tabExercises .ielts-excercises-content-box .tab-content.subtab_content > .tab-pane:nth-child(2) .IELTS-grpExe-nav[aria-expanded="true"],
#tabExercises .ielts-excercises-content-box .tab-content.subtab_content > .tab-pane:nth-child(2) .IELTS-grpExe-nav:hover {
    background: #7C83C3;
}

#tabExercises .ielts-excercises-content-box .tab-content.subtab_content > .tab-pane:nth-child(2) .free-exercise-item-icon {
    background: #7C83C3;
}
/* theme blue */
.ielts-excercises-section .nav-tabs > .nav-item.theme-blue.active > .nav-link,
.ielts-excercises-section .nav-tabs > .nav-item.theme-blue:hover > .nav-link,
.ielts-excercises-section .nav-tabs > .nav-item.theme-blue:focus > .nav-link,
#tabExercises .ielts-excercises-content-box .tab-content.subtab_content > .tab-pane:nth-child(3) .IELTS-grpExe-nav .GE-grpExe-nav-icon i {
    color: #2178D8;
}

#tabExercises .ielts-excercises-content-box .tab-content.subtab_content > .tab-pane:nth-child(3) .IELTS-grpExe-nav[aria-expanded="true"],
#tabExercises .ielts-excercises-content-box .tab-content.subtab_content > .tab-pane:nth-child(3) .IELTS-grpExe-nav:hover {
    background: #2178D8;
}

#tabExercises .ielts-excercises-content-box .tab-content.subtab_content > .tab-pane:nth-child(3) .free-exercise-item-icon {
    background: #2178D8;
}

#tabExercises text#grp_name {
    font-weight: 500;
}

/*#endregion*/
/*#region IELTS Prep*/
@media screen and (max-width: 552px) {
    #root-il-prep-exercises .nav-tabs .nav-item .nav-link .main-heading {
        background: #efefef;
        padding: 6px;
    }

    #root-il-prep-exercises .row_bg_white_mobile #navbar {
        width: auto !important;
        overflow-x: scroll;
        scroll-behavior: smooth;
        margin: 10px 10px 0 10px;
        padding-left: 0;
        transition: all 0.2s;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s;
    }

        #root-il-prep-exercises .row_bg_white_mobile #navbar::-webkit-scrollbar {
            display: none;
        }

    #root-il-prep-exercises.ielts-excercises-section #navbar .nav-tabs {
        justify-content: flex-start;
        -webkit-justify-content: flex-start;
    }

    #root-il-prep-exercises .row_bg_white_mobile {
        justify-content: flex-start;
        -webkit-justify-content: flex-start;
    }
}
/*#endregion*/
/*#region responsive*/
/* ----------- iPad Pro - Portrait ----------- */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    .GE-grpExe-nav-icon i {
        font-size: 4vw !important;
    }
}

/* ----------- 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) {
    .GE-grpExe-nav-icon i {
        font-size: 6vw;
    }
}


/* ----------- iPad 1, 2, Mini and Air - Landscape  ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
    .GE-grpExe-nav-icon i {
        font-size: 4vw;
    }
}

@media screen and (max-width:1366px) {
    #tabExercises .IELTS-grpExe-nav {
        margin: 10px 0px 20px 20px;
    }
}

@media screen and (max-width:640px) {
    #tabExercises .IELTS-grpExe-nav {
        flex-direction: unset;
        align-items: unset;
    }

    #tabExercises .ielts-excercises-content-box {
        padding: 0 4%;
    }

    #tabExercises .IELTS-grpExe-nav {
        width: auto;
        margin: 10px auto;
    }

    #tabExercises .ielts-excercises-section .nav-tabs > .nav-item > .nav-link {
        padding: 0 3px;
        font-size: 16px;
    }

    .GE-grpExe-nav-icon {
        padding: 15px 28px 25px 28px;
    }

        .GE-grpExe-nav-icon i {
            font-size: 10vw;
        }

    #tabExercises .IELTS-grpExe-nav .progress {
        width: 70%;
        height: 6px;
        left: 15%;
        bottom: 10%;
    }

    #tabExercises .free-exercise-item {
        width: 83vw;
        left: 0vw;
    }

    #tabExercises .free-exercise-item-practice {
        margin-right: 4vw;
    }

    .free-exercise-item {
        display: flex;
        flex-direction: row;
        width: auto;
        left: 0;
        background: #fff;
        box-shadow: 2px 4px 5px 0 #ddd;
    }

    #tabExercises .ge-excercises-list {
        padding-left: 15px !important;
    }

    .mobile-pdd {
        padding-right: 0px !important;
    }
}
/*#endregion*/

@media screen and (max-width: 768px) {
    .IELTS-grpExe-nav-text span.taker-count {
        top: calc(35% + calc(calc(100vw / 1920) * 60));
    }

    .IELTS-grpExe-nav-text span.exe-count {
        top: calc(27.5% + calc(calc(100vw / 1920) * 40));
    }

    .IELTS-grpExe-nav-icon {
        padding: calc(calc(100vw / 1440) * 10) calc(calc(100vw / 1440) * 20) calc(calc(100vw / 1440) * 50) calc(calc(100vw / 1440) * 20);
        margin: calc(calc(100vw / 1440) * 10);
    }

    .IELTS-grpExe-nav-text {
        padding: 12.5% calc(calc(100vw / 1440) * 10) calc(calc(100vw / 1440) * 20) calc(calc(100vw / 1440) * 0);
    }

    #navbar {
        display: flex;
        justify-content: center;
    }

    #section-navbar > ul.nav li.nav-item > a {
        padding: 0 5px 0 0;
    }

    #section-navbar > ul.nav li {
        text-align: left;
    }


    .TOEIC-section-navbar > li.nav-item:not(.active) {
        opacity: 1;
    }

        .TOEIC-section-navbar > li.nav-item:not(.active):hover {
            opacity: 1;
        }

    .TOEIC-section-navbar:hover .nav-item:not(:hover) .TOEIC-grpExe-nav {
        opacity: 1;
    }

    .TOEIC-excercises-section #navbar:hover .nav-section:not(:hover) {
        opacity: 1;
    }
}

@media screen and (max-width: 414px) {
    .IELTS-grpExe-nav-text {
        padding: 0;
        width: 100%;
        margin-top: 0px;
    }

    .IELTS-grpExe-nav {
        flex-direction: column;
        align-items: center;
    }

    .IELTS-grpExe-nav-icon {
        width: 80%;
        height: 50%;
        margin: 6px;
        padding: 0 10px 10px;
    }

    .IELTS-grpExe-nav .progress {
        height: 5px;
    }

    .IELTS-grpExe-nav-text span.IELTS-grpExe-title {
        padding: 0 10px;
    }

    #section-navbar > ul.nav li.nav-item {
        min-height: 100px;
        height: 100px;
        transition: all 0.2s ease-in-out;
        overflow: hidden;
    }


    .IELTS-grpExe-nav-text span.exe-count,
    .IELTS-grpExe-nav-text span.taker-count {
        transform: translateX(-100px);
        transition: all 0.2s ease-in-out;
        padding: 10px 15px;
    }

    .IELTS-grpExe-nav-text span.taker-count {
        margin-top: 10px;
    }

        .IELTS-grpExe-nav-text span.exe-count.slide-in,
        .IELTS-grpExe-nav-text span.taker-count.slide-in {
            transform: translateX(0px);
        }

    #section-navbar {
        width: auto;
        margin-left: 0;
    }

    .ielts-excercises-section .nav-tabs > .nav-item > .nav-link {
        padding: 1px 8px;
    }

    .ielts-excercises-section #navbar .nav-tabs {
        display: flex;
        max-width: 100%;
    }

    .free-exercise-item:hover .free-exercise-item-name {
        display: block;
    }

    .free-exercise-item:hover .free-exercise-item-name-full {
        display: none;
    }

    .free-exercise-item .free-exercise-item-name {
        width: 100%;
        text-overflow: unset;
        white-space: pre-line;
    }

    .free-exercise-item {
        height: max-content;
        min-height: max-content;
    }

        .free-exercise-item .free-exercise-item-name {
            margin: 10px 0;
        }

    .free-exercise-item-practice .ttl-btn.js-btn-action-text {
        margin: 50% 0;
    }

    .free-exercise-item:nth-child(even) .free-exercise-item-desc {
        /*border-left: 4px solid #be1c2f9a;*/
    }

    .free-exercise-item-desc {
        float: none;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 70%;
        border-left: 4px solid #666;
        padding: 0 10px;
        margin: 0;
    }

    .tab-practice:first-child > .table_choose > .tab-content > .tab-pane > .flex-box .free-exercise-item-desc {
        border-left: 4px solid #28a745;
    }

    .tab-practice:nth-child(2) > .table_choose > .tab-content > .tab-pane > .flex-box .free-exercise-item-desc {
        border-left: 4px solid #17a2b8;
    }

    [id*="menu9"].tab-pane > .table_choose > .tab-content > .tab-pane > .flex-box .free-exercise-item-desc {
        border-left: 4px solid #064C5B;
    }

    [id*="menu9"].tab-pane > .table_choose > .tab-content > .tab-pane.red > .flex-box .free-exercise-item-desc {
        border-left: 4px solid #be1c2f;
    }

    #menu10.tab-pane > .table_choose > .tab-content > .tab-pane > .flex-box .free-exercise-item-desc {
        border-left: 4px solid #7C83C3;
    }

    #menu11.tab-pane > .table_choose > .tab-content > .tab-pane > .flex-box .free-exercise-item-desc {
        border-left: 4px solid #2178D8;
    }

    .free-exercise-item-practice .ttl-btn.js-btn-action-text {
        margin: 26% 0;
        box-shadow: 5px 3px 7px 0 #ddd;
    }

    .free-exercise-item-practice {
        float: none;
        width: 30%;
        height: max-content;
    }

    .ielts-excercises-section #navbar .nav-tabs li {
        width: 100%;
        text-align: center;
        white-space: nowrap;
    }

    .TOEIC-excercises-section .row_bg_white_mobile {
        width: 95vw;
        left: -5vw;
    }

    .TOEIC-excercises-section #navbar {
        width: 100% !important;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

        .TOEIC-excercises-section #navbar .nav.nav-tabs {
            width: 100%;
            overflow-x: scroll;
            overflow-y: hidden;
            white-space: nowrap;
            padding: 10px;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

            .TOEIC-excercises-section #navbar::-webkit-scrollbar,
            .TOEIC-excercises-section #navbar .nav.nav-tabs::-webkit-scrollbar {
                display: none;
            }

    .TOEIC-excercises-section .nav-tabs .nav-section {
        width: 90%;
        display: inline-block;
        float: none;
        padding: 10px;
        box-shadow: 0px 1px 4px 0 #aaa;
    }

    .TOEIC-grpExe-nav-text {
        padding: 5%;
    }

    .TOEIC-grpExe-nav-icon {
        padding: 0px 5px 15px;
    }

    .IELTS-grpExe-nav-text span.IELTS-grpExe-title {
        width: 100%;
    }

    .IELTS-grpExe-nav-text span.exe-count {
        width: 120%;
        top: calc(10% + calc(calc(100vw / 1920) * 18));
        left: -10%;
    }

    .IELTS-grpExe-nav-text span.taker-count {
        width: 120%;
        top: calc(10% + calc(calc(100vw / 1920) * 35));
        left: -10%;
    }
}

@media screen and (max-width: 375px) {
    .ielts-excercises-section .nav-tabs > .nav-item > .nav-link {
        font-size: 1.2rem;
    }

    .IELTS-grpExe-nav-text span.exe-count, .IELTS-grpExe-nav-text span.taker-count {
        padding: 10px 13px;
    }

    .TOEIC-excercises-section .nav-tabs .nav-section {
        width: 97%;
    }

    .free-exercise-item-desc {
        width: 65%;
    }
}

@media screen and (max-width: 320px) {
    .ielts-excercises-section .nav-tabs > .nav-item > .nav-link {
        font-size: 1rem;
    }

    .free-exercise-item {
        width: 95vw;
        left: -10vw;
    }

    #section-navbar {
        width: 95vw;
        margin-left: -10vw;
    }

    .free-exercise-item-practice .ttl-btn.js-btn-action-text {
        margin: 50% 0;
    }
}
