@charset "UTF-8";

.brand-color,
.premium-color {
    color: #f39800;
}

.flex {
    display: flex;
}

.flex-icon-right {
    display: flex;
}

.flex-icon-right > :last-child {
    margin-left: auto;
}

.no-margin {
    margin: 0;
}

.pos-fixed {
    position: fixed;
}

.user-icon-m {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.card-background {
    background: #f0f0f0;
    padding: 16px;
    box-shadow: inset 0 0px 6px rgba(0, 0, 0, 0.12);
}

.card-component {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.16);
}

.circle-border {
    border-radius: 50%;
}

.no-border {
    border: none !important;
}

a.link-no-deco {
    text-decoration: none;
}

#footer.no-margin-footer {
    margin: 0;
}

.tab {
    display: inline-block;
    width: 2em;
    height: 1em;
}

.color-tab .tab {
    background: #fee;
}

/* btn color */

.di-btn-blue {
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #0095e0;
    background-image: -moz-linear-gradient(top, #009eed, #0088cc);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#009eed), to(#0088cc));
    background-image: -webkit-linear-gradient(top, #009eed, #0088cc);
    background-image: -o-linear-gradient(top, #009eed, #0088cc);
    background-image: linear-gradient(to bottom, #009eed, #0088cc);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff009eed', endColorstr='#ff0088cc', GradientType=0);
    border-color: #0088cc #0088cc #005884;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    *background-color: #0088cc;
    /* Darken IE7 buttons by default so they stand out more given they won't have borders */

    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.di-btn-blue:hover,
.di-btn-blue:focus,
.di-btn-blue:active,
.di-btn-blue.active,
.di-btn-blue.disabled,
.di-btn-blue[disabled] {
    color: #ffffff;
    background-color: #0088cc;
    *background-color: #006ea5;
}
.di-btn-blue:active,
.di-btn-blue.active {
    background-color: #006496 \9;
}

/* for Edge */
@supports (-ms-ime-align:auto) {
    .di-btn-blue {
        font-weight: bold;
    }
}

/* for IE11 */
@media all and (-ms-high-contrast:none){
    *::-ms-backdrop, .di-btn-blue {
        font-weight: bold;
    }
}

/* //btn color */

.required-mark {
    font-size: 16px;
    color: #c33;
}

.question-mark {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: #66bbee;
    color: #fff;
    border-radius: 50%;
    text-align: center;
}

.unread-green,
.check-green,
.online-green {
    color: #6cc644;
}

.markdown-label {
    background-color: #6aa;
    color: white;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 4px;
}

.premium-label {
    box-sizing: border-box;
    display: inline-block;
    line-height: 16px;
    height: 16px;
    width: 64px;
    padding: 0 4px;
    border-radius: 2px;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    background: #f99f06;
}

img.premium-tag {
    width: 43px;
    height: 11px;
}

.file-upload.over {
    background: #eaf2fd;
}

input + .help-block.compact {
    margin-top: 4px;
    font-size: 12px;
}

#signup_top_bar {
    background:#f39800;
    padding: 5px 14px 8px;
    color:#fff;
    line-height:24px;
}

#signup_top_bar .close {
    margin-top:4px
}

#signup_top_bar a {
    color:#fff;
}

.navbar-fixed-top {
    height: 53px;
}

.theater-mode .navbar-fixed-top {
    position: static;
}

.navbar-fixed-top .navbar-inner {
    height: 52px;
}

.navbar-fixed-top.no-top-border {
    border-top: none;
}

.navbar-fixed-top.no-top-border #signup_top_bar {
    padding-top: 8px;
}

.container.wide.fit-to-left {
    width: auto;
    margin-left: 32px;
    margin-right: 32px;
    padding: 0;
}

.sbox-list {
    margin: 0 0 0 24px;
}

.sbox-list li {
    margin-top: 4px;
}

.sbox-list > li:first-child {
    margin-top: 0;
}

.sbox-toggle {
    float: right;
    padding: 8px;
}

i.loading-spinner {
    color: #666;
}

#index_top_right_box {
    position: absolute;
    width: 215px;
    top: 23px;
    right: 0;
}

dl#question_user_info {
    margin: 0;
}

dl#question_user_info dd {
    margin: 0 0 12px 0;
    padding: 4px 8px;
    font-size: 12px;
}

dl#question_user_info dd:last-child {
    margin-bottom: 0;
}

.q-side-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.q-side-list > li {
    margin: 4px 0 4px 0;
    padding: 0 0 4px 0;
    border-bottom: 1px solid #eee;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.q-side-list > li:last-child {
    border-bottom: none;
}

.q-side-list img.userIcon {
    margin-left: 6px;
}

.q-side-list .status {
    display: inline-block;
    font-size: 11px;
    color: #999;
}

#q_side_search > input {
    margin-right: 4px;
    flex: 1;
}

pre.gray {
    background: #fafafa;
}

.show-narrowed {
    display: none;
}

.breadcrumb > .active {
    color: #666;
}

.wide-breadcrumb {
    background: #fafafa;
    border-bottom: 1px solid #ddd;
}

.wide-breadcrumb > ul {
    width: 1068px;
    margin: 0 auto;
    padding: 12px 16px;
    border: none;
    background: none;
}

.wide-breadcrumb > ul > li {
    display: inline;
}

#breadcrumb_wrapper {
    box-sizing: border-box;
    height: 42px;
    overflow: hidden;
}

.theater-mode #theater_wrapper #breadcrumb_wrapper {
    position: absolute;
    width: calc(100% - 32px);
    top: 16px;
    left: 16px;
    opacity: .5;
}

.single-col-layout.theater-mode #theater_wrapper #breadcrumb_wrapper {
    opacity: 0;
    transition-property: opacity;
    transition-duration: .2s;
}

.theater-mode #theater_wrapper:hover #breadcrumb_wrapper {
    opacity: 1;
}

ul.lesson-breadcrumb {
    display: flex;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 0;
}

ul.lesson-breadcrumb > li {
    display: inline-block;
    height: 100%;
    box-sizing: border-box;
    padding-right: 5px;
    font-size: 12px;
    color: #333;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 22px;
}

.theater-mode #theater_wrapper ul.lesson-breadcrumb > li {
    color: #fff;
}

ul.lesson-breadcrumb > li:not(:first-child) {
    padding-top: 4px;
}

.theater-mode #theater_wrapper ul.lesson-breadcrumb > li:not(:first-child) {
    display: none;
}

ul.lesson-breadcrumb > li:last-child {
    padding-right: 0;
}

ul.lesson-breadcrumb > li:last-child:after {
    content: "";
}

ul.lesson-breadcrumb.light-gray > li {
    color: #aaa;
}

ul.lesson-breadcrumb > li > a {
    color: #333;
}

ul.lesson-breadcrumb.light-gray > li > a {
    color: #aaa;
}

ul.lesson-breadcrumb > li i.fa-home {
    font-size: 14px;
}

.breadcrumb-open-sidebar {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    margin-right: 3px;
    border: 1px solid #333;
    border-radius: 50%;
    cursor: pointer;
}

.breadcrumb-open-sidebar:hover {
    background: #eee;
}

.theater-mode .breadcrumb-open-sidebar:hover {
    background: #333;
}

.theater-mode #theater_wrapper .breadcrumb-open-sidebar {
    border-color: #fff;
}

.breadcrumb-open-sidebar i.fa-bars {
    position: absolute;
    font-size: 12px;
    top: 7px;
    left: 8px;
}

#page_id_lesson_diff ul.lesson-breadcrumb {
    margin: 16px 24px;
}

.theater-mode #lesson_tabs {
    display: flex;
}

/* top */
#for_beginners_lessons {
    margin-bottom: 24px;
}

/* lessons */
#pack_area {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
}

#pack_area .pack {
    box-sizing: border-box;
    width: calc((100% - 24px) / 2);
    border: 4px solid #f2f2f3;
    border-radius: 8px;
    overflow: hidden;
}

#pack_area .pack.recommend {
    border-color: #d5e9fc;
}

#pack_area .pack.pack-placeholder {
    border: none;
}

#pack_area .lesson-pack-hero {
    margin: 0;
    padding: 16px;
    background-color: #f2f2f3;
}

#pack_area .pack.recommend .lesson-pack-hero {
    box-sizing: border-box;
    height: 164px;
    padding: 24px;
    background-size: cover;
    background-position: right;
    background-color: #e5f6ff;
    position: relative;
}

#pack_area .lesson-pack-hero.lesson-pack-hero-website {
    background-image: url(/img/pack-hero-website.png);
}

#pack_area .lesson-pack-hero.lesson-pack-hero-web-service-php {
    background-image: url(/img/pack-hero-web-service-php.png);
}

#pack_area .lesson-pack-hero h2 {
    margin: 0;
    font-size: 13px;
    font-weight: bold;
}

#pack_area .pack.recommend .lesson-pack-hero h2 {
    font-size: 24px;
    line-height: 1.3;
}

#pack_area .lesson-pack-hero .lesson-pack-hero-tags {
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    list-style: none;
}

#pack_area .lesson-pack-hero .lesson-pack-hero-tags li {
    height: 24px;
}

#pack_area .lesson-pack-hero .lesson-pack-hero-tags li + li {
    margin-left: 8px;
}

#pack_area .lesson-pack-hero .lesson-pack-hero-tags li img {
    height: 100%;
}

#pack_area .lesson-pack-hero .lesson-pack-hero-animation {
    position: absolute;
    top: 16px;
    right: 32px;
    width: 164px;
}

#pack_area .pack-description {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    height: 36px;
}

#pack_area .pack-lessons-wrapper {
    padding: 8px 16px;
}

#pack_area .sbox.no-border .pack-lessons-wrapper {
    padding: 0;
}

#pack_area .pack-list {
}

#pack_area .pack-section-header {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 13px;
    line-height: 48px;
}

#pack_area .pack-section-num {
    display: inline-block;
    background: #cbcace;
    border-radius: 50%;
    color: #fff;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    margin-right: 6px;
}

#pack_area .pack-section-title {
    margin-top: 2px;
}

#pack_area .pack-section-num .fa-star {
    font-size: 12px;
}

.pack-lessons {
    width: 100%;
}

.pack-lessons .pack-lessons-row {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #f2f2f3;
    height: 48px;
    line-height: 48px;
}

.pack-lessons .pack-lessons-row.link-256times{
    height: auto;
    line-height: normal;
    padding-top: .9615em;
    padding-bottom: .9615em;
}

.pack-lessons .pack-lessons-row:last-child {
    border-bottom: none;
}

.pack-lessons .pack-lessons-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 13px;
    line-height: 1.6;
}

.pack-lessons .pack-lessons-title .premium-tag,
.pack-lessons .pack-lessons-title .tag-256times {
    margin-left: 8px;
}

.pack-lessons .pack-lessons-stats {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin-left: 8px;
}

.pack-lessons .pack-256times-data {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin-left: 8px;
    margin-right: 64px;
}

.pack-lessons .pack-lessons-row .link-256times-description {
    margin-top: 8px;
    margin-bottom: 0;
    color: #646369;
}

#pack_area .pack-type-section .pack-lessons {
    margin-bottom: 10px;
}

#pack_area .sbox.no-border .pack-lessons td {
    padding-left: 0;
    padding-right: 0;
}

#pack_area .pack-section:last-child .pack-lessons {
    margin-bottom: inherit;
}

#pack_area .pack-section:last-child .pack-lessons tr:last-child td {
    padding-bottom: 0;
}

.pack-lessons .pack-lessons-row .num-of-videos,
.pack-lessons .pack-lessons-row .days-of-256times {
    margin-right: 8px;
    font-size: 11px;
    color: #646369;
}

.pack-lessons .pack-lessons-row .pack-progress {
    background: #f9f9f9;
    padding: 10px;
}

.how-about-search {
    box-sizing: border-box;
    max-width: 512px;
    margin: 64px auto;
    padding: 32px;
    background: #f2f2f3;
    border-radius: 8px;
    text-align: center;
}

.no-update-plans {
    margin: 0 0 64px;
}

.no-update-plans h2 {
    margin: 0 0 32px;
    font-size: 19px;
    font-weight: bold;
}

.no-update-plans .pack-lessons {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.no-update-plans .pack-lessons .pack-lessons-row {
    width: calc(50% - 32px);
}


.lessons-others-header {
    font-size: 18px;
    margin: 0 0 16px;
}

.lessons-others-header p {
    margin-bottom: 16px;
}

.lessons-others ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    padding: 0;
}
.lessons-others ul li {
    display: flex;
    width: 460px;
    border-bottom: 1px dashed #eee;
    margin: 0;
    padding: 8px 0;
}
.lessons-others ul li .lessons-others-title {
    width: 85%;
}
.lessons-others ul li .lessons-others-progress {
    width: 15%;
}
.lessons-others ul li:last-child {
    border-bottom:none;
}

/* package */
#package_main {
    width: 756px;
    margin-bottom: 48px;
}

.prerequisite {
    margin: 0 0 32px;
    border: 4px solid #f2f2f3;
    border-radius: 8px;
    color: #323135;
}

.prerequisite > header {
    display: flex;
    align-items: center;
    padding: 16px 24px 16px 20px;
    background: #f2f2f3;
    cursor: pointer;
}

.prerequisite > header > .prerequisite-check {
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 50%;
    background: #fff;
}

.prerequisite.all-done > header > .prerequisite-check {
    background: #29a329;
}

.prerequisite > header > .prerequisite-check > i {
    opacity: .1;
}

.prerequisite.all-done > header > .prerequisite-check > i {
    opacity: 1;
    color: #fff;
}

.prerequisite > header::after,
.prerequisite.all-done.open > header::after {
    font-family: "Font Awesome 5 Free", FontAwesome;
    font-weight: 900;
    content: "\f078";
    display: block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    opacity: .5;
}

.prerequisite.all-done > header::after,
.prerequisite.closed > header::after {
    content: "\f077";
}

.prerequisite > header > h2 {
    flex: 1;
    margin: 0 16px;
    font-size: 13px;
    font-weight: bold;
}

.prerequisite > .prerequisite-body,
.prerequisite.all-done.open > .prerequisite-body {
    display: block;
    padding: 16px 20px 20px;
}

.prerequisite.all-done > .prerequisite-body,
.prerequisite.closed > .prerequisite-body {
    display: none;
}

.prerequisite > .prerequisite-body > p {
    margin: 0 0 16px;
}

.package-simple-info-box {
    display: flex;
    align-items: center;
    padding: 16px;
}

.package-simple-info-box .package-icon {
    flex: 0 0 64px;
    height: 64px;
    margin-right: 16px;
    text-align: center;
    position: relative;
}

.package-simple-info-box.all-done .package-icon::after {
    font-family: "Font Awesome 5 Free", FontAwesome;
    font-weight: 900;
    content: "\f00c";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 64px;
    height: 64px;
    line-height: 64px;
    text-align: center;
    border-radius: 50%;
    opacity: .9;
    background: #29a329;
    color: #fff;
    font-size: 24px;
}

.package-simple-info-box .package-detail-title {
    flex: 1;
    margin: 0 8px 0 0;
    font-size: 14px;
    font-weight: bold;
}

.package-simple-info-box .last-components {
    flex: 0 0 64px;
    margin-left: auto;
}

.package-simple-info-box .last-components .premium-label {
    display: none;
}

.prerequisite-boxes > .package-simple-info-box,
.next-recommend-boxes > .package-simple-info-box {
    box-sizing: border-box;
}

.package-simple-info-box + .package-simple-info-box {
    border-top: 1px solid #f2f2f3;
}

.next-recommend {
    margin: 12px 0 0;
    color: #323135;
}

.next-recommend > header {
    padding: 12px 0;
    border-bottom: 1px solid #cbcace;
}

.next-recommend-body {
    padding: 16px 0;
}

.next-recommend > header > h2 {
    margin: 0;
    font-size: 14px;
    font-weight: bold;
}

.package-faq-lesson-title {
}

/* lesson */

label.autoplay {
    margin: 0;
    font-size: 11px;
}

input#autoplay {
    margin-top: -2px;
}

.wide-notice-layout {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 150; /* less than main_overlay z-index */
    width: 75%;
    max-width: 1024px;
    margin-top: 16px;
    margin-left: auto;
    margin-right: auto;
    pointer-events: none;
}

.wide-notice-layout > .noticeBox {
    margin: 0 0 16px;
    padding: 16px;
    border-radius: 2px;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.1);
    border: none;
}

.wide-notice-layout > .noticeBox:last-child {
    margin-bottom: 0;
}

.wide-notice .noticeBox {
    margin-top: 0;
}

#toggle_text {
    font-size: 10px;
    width: 121px;
    padding: 4px 8px;
}

.side-package-name a {
    color: #333;
}

dl.about-video {
    margin: 0;
}

dl.about-video > dt {
    margin-bottom: 4px;
    color: #999;
    font-weight: normal;
}

dl.about-video > dd {
    margin: 0 0 16px 0;
}

#video_section {
    margin-bottom: 16px;
}

#theater_wrapper {
    position: relative;
}

.theater-mode #player_contents {
    background: #000;
}

.theater-mode #video_section {
    margin-bottom: 0;
}

.theater-mode .lesson-components {
    background: #fff;
}

.theater-mode .lesson-components > * {
    margin-left: auto;
    margin-right: auto;
}

.theater-mode .container.immersive #sidebar {
    top: inherit !important;
    min-width: 380px;
}

.theater-mode #videojs_player {
    margin-left: auto !important;
    margin-right: auto !important;
}

.theater-mode .video-commands-container {
    margin: 0 auto;
}

.theater-mode .caption-container {
    margin: 0 auto;
}

.container.wide {
    width: 1068px;
    padding-left: 16px;
    padding-right: 16px;
}

#index_index_page .container.wide {
}

.container.wide .span13 {
    width: 768px;
}

#q_in_topbar {
    width: 100px;
}

.container.wide #q_in_topbar {
    width: 200px;
}

.navbar .nav > li.topbar-notification > a {
    padding: 18px 10px 11px;
    color: #323135;
    font-size: 0;
}

.topbar-notification > a > i {
    font-size: 16px;
    color: #cbcace;
    position: relative;
}

.topbar-notification.has-unread > a > i {
    color: #98969c;
}

.topbar-notification.has-unread > a > i::after {
    position: absolute;
    top: -4px;
    right: -5px;
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border: 1px solid #fff;
    border-radius: 50%;
    background: #e83040;
}

#news_notification .news-publish-date {
    color: #323135;
    opacity: .5;
    font-size: 11px;
}

#news_notification ul li p {
    margin: 4px 0 0;
}

.question-notification-list-date {
    margin-right: 8px;
    color: #323135;
    opacity: .5;
    font-size: 11px;
}

.question-notification-list-title {
    margin-top: 4px;
    font-weight: bold;
    font-size: 13px;
}

.question-notification-list-new {
    padding: 0 4px;
    border-radius: 2px;
    background: #e83040;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
}

.dropdown-menu > .active > a {
    color: inherit;
    background-color: #fff;
    background-image: none;
}

.container.wide .dropdown.appended-to-btn {
    float: right;
    margin: 10px 0 0 0;
    border: 1px solid #ccc;
    border-left: 0;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-radius: 0 4px 4px 0;
    background-color: #f5f5f5;
    background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
}

.container.wide .dropdown.appended-to-btn .caret {
    top: 5px;
    right: 8px;
}

.container.wide .dropdown.appended-to-btn .dropdown-toggle {
    width: 24px;
    height: 28px;
    padding: 0 !important;
}

.container.wide .dropdown.appended-to-btn .dropdown-menu {
     top: 40px;
}

.container.wide .btn.prepended-to-dropdown {
    border-radius: 4px 0 0 4px;
}

.container.no-breadcrumb {
    margin-top: 32px;
}

.container.immersive {
    width: auto;
}

.container.immersive #sidebar {
    position: absolute;
    width: 400px;
    min-width: 400px;
    opacity: 0;
}

.editor-available .container.immersive #sidebar {
    position: fixed;
    overflow: hidden;
}

.editor-available.theater-mode .container.immersive #sidebar {
    position: absolute;
}

.container.immersive #sidebar.ready {
    opacity: 1;
}

#page_id_exercise_show #sidebar {
    border-left: 1px solid #ddd;
}

.relax-sidebar {
    margin-left: 32px;
}

.relax-sidebar .sbox {
    margin-bottom: 32px;
}

.immersive-topbar {
    border-bottom: 1px solid #ccc;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    border-top: 3px solid #f39800;
    min-height: 56px;
}

.immersive-topbar #signup_top_bar {
    padding-top: 4px;
}

.immersive-topbar.not-login #topbar_login_button > a.btn {
    margin: 12px 16px 0;
}

.immersive-topbar .back-to-package {
    float: left;
    overflow: hidden;
}

.immersive-topbar .back-to-package > a {
    float: left;
    display: inline-block;
    width: 42px;
    height: 100%;
    color: #333;
    text-decoration: none;
}

.immersive-topbar .back-to-package i {
    float: left;
    padding: 0 16px;
    line-height: 56px;
    color: #aaa;
}

.immersive-topbar .lesson-titles {
    float: left;
    display: none;
}

.immersive-topbar .lesson-titles h1 {
    font-size: 18px;
    margin: 2px 0 0 0;
}

.immersive-topbar .lesson-titles .package {
    color: #aaa;
    line-height: 1;
    padding: 10px 0 2px;
}

.immersive-topbar .lesson-titles .package a {
    color: #aaa;
    font-size: 11px;
}

.immersive-topbar .lesson-titles .package img {
    margin-top: -1px;
}

.immersive-topbar .lesson-titles .lesson {
    line-height: 1;
    padding: 0;
    max-width: 560px;
    color: #333;
    font-size: 18px;
    font-weight: bold;
}

.immersive-topbar .lesson-titles .lesson h1 {
    line-height: 1.2;
}

.immersive-topbar .lesson-titles .lesson a {
    color: #333;
}

.immersive-topbar .nav {
    margin-bottom: 0;
}

.immersive-topbar .topbar-right-nav {
}

.immersive-topbar .topbar-right-nav > .dropdown .caret {
    top: 17px;
    right: 14px;
}

.immersive-topbar .topbar-right-nav > .dropdown {
}

.immersive-topbar .topbar-right-nav > .dropdown > .dropdown-toggle {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    padding-left: 14px !important;
    color: #333;
}

.immersive-topbar .topbar-right-nav > .dropdown .dropdown-menu {
    left: inherit;
    right: 0;
}

.immersive-topbar .topbar-right-nav > .dropdown > .dropdown-toggle .user-name {
    padding-right: 6px;
}

.immersive-topbar #q_in_topbar {
    width: 200px;
}

.immersive-topbar .notify-bell {
    float: right;
    position: relative;
    width: 60px;
    height: 56px;
    text-align: center;
    cursor: pointer;
    line-height: 56px;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

.immersive-topbar .notify-bell .fa-bell {
    color: #ccc;
    font-size: 22px;
    line-height: 56px;
}

.immersive-topbar .notify-bell .notify-count {
    position: absolute;
    top: 14px;
    right: 15px;
    background: rgb(231, 29, 46);
    border-radius: 3px;
    font-size: 10px;
    padding: 0px 3px;
    line-height: 14px;
    color: #fff;
    font-weight: bold;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.immersive-topbar .search-bar {
    float: right;
    height: 56px;
    padding-right: 22px;
    border-right: 1px solid #ddd;
}

/* .immersive sidebar */

.container.immersive #main {
    padding-top: 16px;
    padding-left: 16px;
    padding-right: 16px;
}

.editor-available .container.immersive {
    margin-top: 53px;
}

.theater-mode.editor-available .container.immersive {
    margin-top: 0;
}

.theater-mode .container.immersive #main {
    top: inherit !important;
    min-width: 240px;
}

html:not(.editor-available).theater-mode .container.immersive #contents_root_row {
    margin: 0;
    opacity: 0;
}

html:not(.editor-available).theater-mode .container.immersive #contents_root_row.fade-in {
    opacity: 1;
    transition: opacity .3s .5s ease-in;
}

html:not(.editor-available).theater-mode .container.immersive #main {
    float: none;
    margin-left: auto;
    margin-right: auto;
    padding-left: 6px;
    padding-right: 6px;
}

html:not(.editor-available).theater-mode .container.immersive #sidebar {
    width: 0;
    display: none;
}

html:not(.editor-available).theater-mode #resize_handle {
    display: none;
}

.container.immersive #main #main_contents {
    margin: 0 auto;
}

.container.immersive #sidebar #lesson_stat_summary {
    float: left;
    margin-top: 8px;
    margin-right: 64px;
}

.container.immersive #sidebar label.autoplay {
    display: inline-block;
    margin-top: 4px;
    margin-right: 6px;
}

.container.immersive #sidebar .sbox-toggle i {
    margin-top: 6px;
    margin-right: 6px;
    font-size: 14px;
    color: #999;
    cursor: pointer;
    display: none;
}

.container.immersive #sidebar .sbox-toggle.sbox-close i.fa-chevron-up {
    display: inline-block;
}

.container.immersive #sidebar .sbox-toggle.sbox-open i.fa-chevron-down {
    display: inline-block;
}

.container.immersive #sidebar .sbox {
    border: 0;
    margin: 0;
}

.container.immersive #sidebar .sbox h2 {
    padding: 6px 14px;
    border-top: 1px solid #ddd;
    border-bottom: 0;
    font-size: 13px;
    text-shadow: none;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    background: #fff;
}

.container.immersive #sidebar .sbox:first-child h2 {
    border-top: 0;
}

.container.immersive #sidebar .sboxInner {
    border-top: 0;
}

.resize-handle {
    position: absolute;
    background: #fff;
    transition: background .4s;
}

.resize-handle:hover,
.resize-handle.on {
    background: #f0f0f0;
    transition: background .5s;
}

.resize-handle.disabled {
    cursor: auto;
}

.resize-handle.disabled:hover,
.resize-handle.on.disabled:hover {
    background: #fff;
    transition: none;
}

#resize_handle {
    width: 5px;
    border-top: 1px solid #eee;
    border-right: 1px solid #ddd;
    cursor: col-resize;
    z-index: 50; /* resize_mask z-index + 1 */
}

#resize_handle.resize-handle-bold {
    width: 9px;
    background: transparent;
    border-right: none;
    border-left: 1px solid #ddd;
}

.resize-handle-bold:before {
    content:  '';
    display: block;
    position: absolute;
    left: -2px;
    top: 0;
    bottom: 0;
    width: 4px;
    transition: background-color 0.2s linear;
}
.resize-handle-bold:hover:before {
    background-color: rgba(0, 0, 0, 0.08);
}

#resize_handle_v {
    height: 10px;
    background: #f2f2f3;
    cursor: row-resize;
    z-index: 49;
}

.resize-mask {
    display: none;
    opacity: 1;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#resize_mask {
    z-index: 49; /* resize_handle z-index - 1 */
}

#resize_mask_v {
    z-index: 51;
}

#side_editor_resize_handle {
    position: absolute;
    height: 5px;
    background: #f3f3f3;
    cursor: row-resize;
    z-index: 50; /* resize_mask z-index + 1 */
}

#ui_guide {
    display: none;
}

#ui_guide_pointer {
    position: absolute;
    top: 160px;
    right: 331px;
    z-index: 151;
    background: #2070fa;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 0 rgba(32, 112, 250, 0.25);
    animation: pulse 1.8s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(32, 112, 250, 0.25);
  }
  100% {
    box-shadow: 0 0 0 12px rgba(32, 112, 250, 0.02), 0 0 0 32px rgba(32, 112, 250, 0);
  }
}

#overlay_sidebar {
    position: absolute;
    left: 0;
    background: #fff;
    width: 280px;
    height: 100%;
    border-right: 1px solid #ddd;
    z-index: 201; /* main_overlay z-index + 1 */
    transition: width 0.2s ease 0.1s;
}

#overlay_sidebar h2 {
    margin: 0;
    padding: 14px 24px 14px 14px;
    border-bottom: 1px solid #ddd;
    font-size: 13px;
    transition: opacity .9s;
}

#overlay_sidebar.fold h2 {
    opacity: 0;
}

#overlay_sidebar h2#exer_list_header {
    border-top: 1px solid #ddd;
}

#overlay_sidebar.fold h2#exer_list_header {
    border-top: none;
}

#page_id_exercise_show h2#exer_list_header {
    border-top: none;
}

#overlay_sidebar #fold_sidebar_box {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
}

#overlay_sidebar #fold_sidebar {
    display: none;
    padding: 17px 14px 0 8px;
}

#overlay_sidebar #unfold_sidebar {
    display: none;
    cursor: pointer;
}

#overlay_sidebar.fold {
    opacity: 0;
    width: 0;
    transition: 0.2s ease 0.1s;
    cursor: pointer;
}

#overlay_sidebar.fold:hover {
    box-shadow: 4px 0 7px -2px rgba(50, 50, 50, 0.06);
}

#overlay_sidebar #side_package_name_header {
    text-overflow: ellipsis;
}

#overlay_sidebar.fold #side_package_name_header {
    position: relative;
    padding: 0;
    height: 46px;
    line-height: 48px;
    cursor: pointer;
    text-overflow: clip;
}

#overlay_sidebar.fold #fold_sidebar {
    display: none;
}

#overlay_sidebar.fold #unfold_sidebar {
    position: absolute;
    display: inline;
    top: 18px;
    left: 20px;
}

#overlay_sidebar #side_package_name {
}

#overlay_sidebar.fold #side_package_name {
    display: none;
}

#overlay_sidebar .autoplay {
    display: none;
    margin: 14px 14px 0 0;
    opacity: 1;
    transition: opacity 0.1s 0.2s;
}

#overlay_sidebar.fold .autoplay {
    display: none;
}

#page_id_exercise_show .autoplay {
    display: none;
}

#overlay_sidebar .ovs-list-header {
    position: relative;
    padding: 0 0 0 36px;
    height: 48px;
    line-height: 48px;
    overflow: hidden;
    cursor: pointer;
}

#overlay_sidebar .ovs-stats-layout {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 115px;
    padding: 12px;
    border-bottom: 1px solid #ddd;
}

#overlay_sidebar #lesson_stat_graph,
#overlay_sidebar #lesson_stat_summary {
    display: none;
}

.ovs-list-header {
    position: relative;
}

#overlay_sidebar .ovs-list-header-icon {
    position: absolute;
    top: 17px;
    left: 15px;
}

#overlay_sidebar.fold .ovs-list-header-icon {
    left: 18px;
}

#overlay_sidebar .ovs-list-header-str {
    opacity: 1;
    transition: opacity 0.2s 0.25s;
}

#overlay_sidebar.fold .ovs-list-header-str {
    opacity: 0;
    transition: opacity 0.1s;
}

#overlay_sidebar #side_lessons {
    opacity: 1;
    transition: opacity 0.1s;
}

#overlay_sidebar #side_lessons li {
    margin-bottom: 7px;
}

#overlay_sidebar.fold #side_lessons {
    display: none;
}

#page_id_lesson_show #overlay_sidebar .exer-list {
    display: none;
}

#page_id_exercise_show #overlay_sidebar #side_lessons {
    display: none;
}

#overlay_sidebar.fold .exer-list {
    display: none;
}

#side_package_name_header a {
    color: #333;
}

#main_overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200; /* overlay_sidebar z-index - 1 */
    background: rgba(0, 0, 0, 0.3);
}

.disable-select {
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.placeholder {
    padding: 32px;
    background: #f2f2f3;
    color: #323135;
    opacity: .5;
    text-align: center;
}

#lesson-complete-button {
    font-size: 13px;
    font-weight: bold;
    width: 176px;
    min-width: 150px;
    line-height: 24px;
}

.video-commands-container {
    position: relative;
}

/* Complete button */

.doneButtonMessage {
    position: absolute;
    padding: 20px;
    width: 272px;
    border-radius: 8px;
    font-weight: bold;
    color: #29a329;
    top: -92px;
    left: 0;
    opacity: 0;
    z-index: 1;
    transition: all 300ms 0s ease-out;
    transform: translateY(0) scale(.9);
    pointer-events: none;
}

.doneButtonMessage.active {
    background: #fff;
    transform: translateY(-16px) scale(1);
    filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.1));
    opacity: 1;
    pointer-events: auto;
}

.doneButtonMessage__text {
    margin: 0 0 16px 0;
    font-size: 16px;
    text-align: center;
}

#lesson_complete_message_complete_lesson_count {
    margin-right: 5px;
    vertical-align: -1.5px;
    font-size: 24px;
}

#lesson_complete_message_total_lesson_count {
    display: inline;
    margin-left: 4px;
    font-weight: normal;
}

.doneButtonMessage__progressBar {
    position: relative;
}

.doneButtonMessage__progressBar-gray {
    width: 100%;
    height: 10px;
    background: #f2f2f3;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
}

.doneButtonMessage__progressBar-green {
    width: 0;
    height: 10px;
    background: #29a329;
    border-radius: 20px;
}

.doneButtonMessage__progressBar-green.animation {
    transition-duration: 1s;
    transition-delay: .6s;
}

.doneButtonMessage__particle {
    position: absolute;
    top: -45px;
    left: 220px;
    width: 100px;
    height: 100px;
    background: url(/img/lesson-complete-particle.png);
    background-position: 0 0;
    background-position: -2800px 0;
    transition: background 1s steps(28);
    transition-delay: 1.3s;
    z-index: 1;
}

/* Complete button popup */

/* 応援メッセージ（10%） */
.doneButtonItem-cheer {
  position: absolute;
  width: 312px;
  height: 102px;
  border-radius: 8px;
  top: -92px;
  left: 0px;
  transition: all 300ms 0s ease-out;
  transform: translateY(0) scale(.9);
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}

.doneButtonItem-cheer-active {
  background-color: #b0e0f8;
  transform: translateY(-16px) scale(1);
  filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.1));
  opacity: 1;
  visibility: visible;
  overflow: hidden;
}

/* 雲 */
.doneButtonItem-cheer__cloud-01 {
  background-image: url(/img/done_visuals/doneButtonItem-cheer__cloud-01.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: -8px;
  left: 140px;
  width: 256px;
  height: 102px;
}

.doneButtonItem-cheer__cloud-01-active {
  animation: cloud-01 5s linear forwards;
}

@keyframes cloud-01 {
  0% {
    transform: none;
  }

  100% {
    transform: translate(-128px, 32px);
  }
}

.doneButtonItem-cheer__cloud-02 {
  background-image: url(/img/done_visuals/doneButtonItem-cheer__cloud-02.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 28px;
  left: 16px;
  width: 328px;
  height: 102px;
}

.doneButtonItem-cheer__cloud-02-active {
  animation: cloud-02 12s linear forwards;
}

@keyframes cloud-02 {
  0% {
    transform: none;
  }

  100% {
    transform: translate(-120px, 32px);
  }
}

/* 気球 */
.doneButtonItem-cheer__balloon {
  background-image: url(/img/done_visuals/doneButtonItem-cheer__balloon.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 40px;
  left: 218px;
  width: 64px;
  height: 102px;
}

.doneButtonItem-cheer__balloon-active {
  animation: balloon 7s linear forwards;
}

@keyframes balloon {
  0% {
    transform: none;
  }

  100% {
    transform: translate(0, -112px);
  }
}

/* メッセージテキスト */
.doneButtonItem-cheer__msg {
  position: absolute;
  width: 312px;
  height: 102px;
}

.doneButtonItem-cheer__msg-01-active {
  background-image: url(/img/done_visuals/doneButtonItem-cheer__msg-01.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.doneButtonItem-cheer__msg-02-active {
  background-image: url(/img/done_visuals/doneButtonItem-cheer__msg-02.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.doneButtonItem-cheer__msg-03-active {
  background-image: url(/img/done_visuals/doneButtonItem-cheer__msg-03.png);
  background-repeat: no-repeat;
  background-size: contain;
}

/* メッセージ：go(ロケットと星) */
/* 10%のときに出す */

.doneButtonItem-go {
  position: absolute;
  width: 312px;
  height: 102px;
  border-radius: 8px;
  top: -92px;
  left: 0px;
  transition: all 300ms 0s ease-out;
  transform: translateY(0) scale(.9);
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}

.doneButtonItem-go-active {
  background-color: #C1C1F6;
  transform: translateY(-16px) scale(1);
  filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.1));
  opacity: 1;
  visibility: visible;
  overflow: hidden;
}

/* go__star01 */
.doneButtonItem-go__star-01 {
  background-image: url(../img/done_visuals/doneButtonItem-go__star-01.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: -64px;
  left: 78px;
  width: 340px;
  height: 144px;
}

.doneButtonItem-go__star-01-active {
  animation: star-01 2.2s cubic-bezier(0.64, 0.13, 0.28, 0.81) forwards;
}

@keyframes star-01 {
  0% {
    transform: none;
  }
  100% {
    transform: translate(0, 72px);
  }
}

/* go__star02 */
.doneButtonItem-go__star-02 {
  background-image: url(../img/done_visuals/doneButtonItem-go__star-02.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: -10px;
  left: 196px;
  width: 106px;
  height: 112px;
}

.doneButtonItem-go__star-02-active {
  animation: star-02 1.8s cubic-bezier(0.64, 0.13, 0.28, 0.81) forwards;
}

@keyframes star-02 {
  0% {
    transform: none;
  }
  100% {
    transform: translate(0, 180px);
  }
}

/* go__smoke */
.doneButtonItem-go__smoke {
  background-image: url(../img/done_visuals/doneButtonItem-go__smoke.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 112px;
  left: 223px;
  width: 64px;
  height: 102px;
}

.doneButtonItem-go__smoke-active {
  animation: smoke 1.4s cubic-bezier(0.64, 0.13, 0.28, 0.81) forwards;
}

@keyframes smoke {
  0% {
    transform: none;
  }
  100% {
    transform: translate(0, -22px);
  }
}

/* go__rocket */
.doneButtonItem-go__rocket {
  background-image: url(../img/done_visuals/doneButtonItem-go__rocket.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 56px;
  left: 218px;
  width: 90px;
  height: 102px;
}

.doneButtonItem-go__rocket-active {
  animation: rocket 1.8s cubic-bezier(0.64, 0.13, 0.28, 0.81) forwards;
}

@keyframes rocket {
  0% {
    transform: none;
  }
  100% {
    transform: translate(0, -53px);
  }
}

/* go__メッセージテキスト */
.doneButtonItem-go__msg {
  position: absolute;
  width: 312px;
  height: 102px;
}

.doneButtonItem-go__msg-01-active {
  background-image: url(../img/done_visuals/doneButtonItem-go__msg-01.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.doneButtonItem-go__msg-02-active {
  background-image: url(../img/done_visuals/doneButtonItem-go__msg-02.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.doneButtonItem-go__msg-03-active {
  background-image: url(../img/done_visuals/doneButtonItem-go__msg-03.png);
  background-repeat: no-repeat;
  background-size: contain;
}

/* 休憩メッセージ（60%） */

.doneButtonItem-break {
  position: absolute;
  width: 312px;
  height: 102px;
  border-radius: 8px;
  top: -92px;
  left: 0px;
  transition: all 300ms 0s ease-out;
  transform: translateY(0) scale(.9);
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}

.doneButtonItem-break-active {
  background-color: #ffdea3;
  transform: translateY(-16px) scale(1);
  filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.1));
  opacity: 1;
  visibility: visible;
  overflow: hidden;
}

/* コーヒー */
.doneButtonItem-break__coffee {
  background-image: url(/img/done_visuals/doneButtonItem-break__coffee.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 4px;
  left: -16px;
  width: 62px;
  height: 102px;
}

.doneButtonItem-break__coffee-active {
  animation: coffee 1s ease-out forwards;
}

@keyframes coffee {
  0% {
    transform: none;
  }

  100% {
    transform: translate(24px, 0);
  }
}

/* ドーナツ */
.doneButtonItem-break__donuts {
  background-image: url(/img/done_visuals/doneButtonItem-break__donuts.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 56px;
  left: -16px;
  width: 72px;
  height: 102px;
}

.doneButtonItem-break__donuts-active {
  animation: donuts 1s ease-out forwards;
}

@keyframes donuts {
  0% {
    transform: none;
  }

  100% {
    transform: translate(58px, 0);
  }
}

/* 豆 */
.doneButtonItem-break__beans {
  background-image: url(/img/done_visuals/doneButtonItem-break__beans.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 96px;
  left: 304px;
  width: 32px;
  height: 102px;
}

.doneButtonItem-break__beans-active {
  animation: beans 1s ease-out forwards;
}

@keyframes beans {
  0% {
    transform: scale(.6) rotate(30deg);
  }

  100% {
    transform: translate(-32px, -32px) scale(1);
  }
}

/* メッセージテキスト */
.doneButtonItem-break__msg {
  position: absolute;
  width: 312px;
  height: 102px;
}

.doneButtonItem-break__msg-01-active {
  background-image: url(/img/done_visuals/doneButtonItem-break__msg-01.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.doneButtonItem-break__msg-02-active {
  background-image: url(/img/done_visuals/doneButtonItem-break__msg-02.png);
  background-repeat: no-repeat;
  background-size: contain;
}

/* メッセージ：climb(山と雲) */
/* 80%のときに出す */

.doneButtonItem-climb {
  position: absolute;
  width: 312px;
  height: 102px;
  border-radius: 8px;
  top: -92px;
  left: 0px;
  transition: all 300ms 0s ease-out;
  transform: translateY(0) scale(.9);
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}

.doneButtonItem-climb-active {
  background-color: #B2F0DC;
  transform: translateY(-16px) scale(1);
  filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.1));
  opacity: 1;
  visibility: visible;
  overflow: hidden;
}

/* climb__cloud */
.doneButtonItem-climb__cloud {
  background-image: url(../img/done_visuals/doneButtonItem-climb__cloud.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 17px;
  left: 147px;
  width: 120px;
  height: 102px;
}

.doneButtonItem-climb__cloud-active {
  animation: climb__cloud 1.9s ease-out forwards;
}

@keyframes climb__cloud {
  0% {
    transform: none;
  }
  100% {
    transform: translate(40px, 0);
  }
}

/* climb__mountain */
.doneButtonItem-climb__mountain {
  background-image: url(../img/done_visuals/doneButtonItem-climb__mountain.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 80px;
  left: 184px;
  width: 112px;
  height: 124px;
}

.doneButtonItem-climb__mountain-active {
  animation: mountain 1.9s ease-out forwards;
}

@keyframes mountain {
  0% {
    transform: none;
  }
  100% {
    transform: translate(0, -56px);
  }
}

/* climb__メッセージテキスト */
.doneButtonItem-climb__msg {
  position: absolute;
  width: 312px;
  height: 102px;
}

.doneButtonItem-climb__msg-01-active {
  background-image: url(../img/done_visuals/doneButtonItem-climb__msg-01.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.doneButtonItem-climb__msg-02-active {
  background-image: url(../img/done_visuals/doneButtonItem-climb__msg-02.png);
  background-repeat: no-repeat;
  background-size: contain;
}

/* 褒めメッセージ（100%） */

.doneButtonItem-praise {
  position: absolute;
  width: 312px;
  height: 102px;
  border-radius: 8px;
  top: -92px;
  left: 0px;
  transition: all 300ms 0s ease-out;
  transform: translateY(0) scale(.9);
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}

.doneButtonItem-praise-active {
  background-color: #fec8c8;
  transform: translateY(-16px) scale(1);
  filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.1));
  opacity: 1;
  visibility: visible;
  overflow: hidden;
}

/* トロフィー */
.doneButtonItem-praise__trophy {
  background-image: url(/img/done_visuals/doneButtonItem-praise__trophy.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 90px;
  left: 224px;
  width: 72px;
  height: 102px;
}

.doneButtonItem-praise__trophy-active {
  animation: trophy .8s cubic-bezier(.67, .03, .3, 1.08) forwards;
}

@keyframes trophy {
  0% {
    transform: none;
  }

  100% {
    transform: translate(0, -80px);
  }
}

/* キラキラ */
.doneButtonItem-praise__star-01 {
  background-image: url(/img/done_visuals/doneButtonItem-praise__star-01.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 24px;
  left: 264px;
  width: 30px;
  height: 30px;
}

.doneButtonItem-praise__star-01-active {
  opacity: 0;
  animation: star .6s ease-out 1.1s forwards;
}

.doneButtonItem-praise__star-02 {
  background-image: url(/img/done_visuals/doneButtonItem-praise__star-02.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 16px;
  left: 256px;
  width: 30px;
  height: 30px;
}

.doneButtonItem-praise__star-02-active {
  opacity: 0;
  animation: star .6s ease-out 1.3s forwards;
}

.doneButtonItem-praise__star-03 {
  background-image: url(/img/done_visuals/doneButtonItem-praise__star-03.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 44px;
  left: 220px;
  width: 30px;
  height: 30px;
}

.doneButtonItem-praise__star-03-active {
  opacity: 0;
  animation: star .6s ease-out 1.5s forwards;
}

.doneButtonItem-praise__star-04 {
  background-image: url(/img/done_visuals/doneButtonItem-praise__star-04.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 10px;
  left: 216px;
  width: 38px;
  height: 30px;
}

.doneButtonItem-praise__star-04-active {
  opacity: 0;
  animation: star .6s ease-out 1.7s forwards;
}

@keyframes star {
  0% {
    opacity: 1;
    transform: none;
  }

  100% {
    opacity: 0;
    transform: scale(2);
  }
}

/* メッセージテキスト */
.doneButtonItem-praise__msg {
  position: absolute;
  width: 312px;
  height: 102px;
}

.doneButtonItem-praise__msg-01-active {
  background-image: url(/img/done_visuals/doneButtonItem-praise__msg-01.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.doneButtonItem-praise__msg-02-active {
  background-image: url(/img/done_visuals/doneButtonItem-praise__msg-02.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.doneButtonItem-praise__msg-03-active {
  background-image: url(../img/done_visuals/doneButtonItem-praise__msg-03.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.doneButtonItem-praise__msg-04-active {
  background-image: url(../img/done_visuals/doneButtonItem-praise__msg-04.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.doneButtonItem-praise__msg-05-active {
  background-image: url(../img/done_visuals/doneButtonItem-praise__msg-05.png);
  background-repeat: no-repeat;
  background-size: contain;
}


/* メッセージ：award (メダルとキラキラ) */
/* 100%のときに出す */

.doneButtonItem-award {
  position: absolute;
  width: 312px;
  height: 102px;
  border-radius: 8px;
  top: -92px;
  left: 0px;
  transition: all 300ms 0s ease-out;
  transform: translateY(0) scale(.9);
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}

.doneButtonItem-award-active {
  background-color: #F5BCE2;
  transform: translateY(-16px) scale(1);
  filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.1));
  opacity: 1;
  visibility: visible;
  overflow: hidden;
}

/* award__medal */
.doneButtonItem-award__medal {
  background-image: url(../img/done_visuals/doneButtonItem-award__medal.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: -80px;
  left: 216px;
  width: 96px;
  height: 102px;
}

.doneButtonItem-award__medal-active {
  animation: medal .8s cubic-bezier(.67, .03, .3, 1.08) forwards;
}

@keyframes medal {
  0% {
    transform: none;
  }
  100% {
    transform: translate(0, 64px);
  }
}

/* award__star-01 */
.doneButtonItem-award__star-01 {
  background-image: url(../img/done_visuals/doneButtonItem-award__star-01.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 28px;
  left: 208px;
  width: 96px;
  height: 102px;
}

.doneButtonItem-award__star-01-active {
  opacity: 0;
  animation: awardStar-01 1.6s linear 1.1s;
}

@keyframes awardStar-01 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* award__star-02 */
.doneButtonItem-award__star-02 {
  background-image: url(../img/done_visuals/doneButtonItem-award__star-02.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 28px;
  left: 212px;
  width: 96px;
  height: 102px;
}

.doneButtonItem-award__star-02-active {
  opacity: 0;
  animation: awardStar-02 1.6s linear 1.5s forwards;
}

@keyframes awardStar-02 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

/* award__メッセージテキスト */
.doneButtonItem-award__msg {
  position: absolute;
  width: 312px;
  height: 102px;
}

.doneButtonItem-award__msg-01-active {
  background-image: url(../img/done_visuals/doneButtonItem-award__msg-01.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.doneButtonItem-award__msg-02-active {
  background-image: url(../img/done_visuals/doneButtonItem-award__msg-02.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.doneButtonItem-award__msg-03-active {
  background-image: url(../img/done_visuals/doneButtonItem-award__msg-03.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.doneButtonItem-award__msg-04-active {
  background-image: url(../img/done_visuals/doneButtonItem-award__msg-04.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.doneButtonItem-award__msg-05-active {
  background-image: url(../img/done_visuals/doneButtonItem-award__msg-05.png);
  background-repeat: no-repeat;
  background-size: contain;
}

/* メッセージ：great (デコレーションとキラキラ) */
/* 100%のときに出す */

.doneButtonItem-great {
  position: absolute;
  width: 312px;
  height: 102px;
  border-radius: 8px;
  top: -92px;
  left: 0px;
  transition: all 300ms 0s ease-out;
  transform: translateY(0) scale(.9);
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}

.doneButtonItem-great-active {
  background-color: #E2BCF5;
  transform: translateY(-16px) scale(1);
  filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.1));
  opacity: 1;
  visibility: visible;
  overflow: hidden;
}

/* great__decoration */
.doneButtonItem-great__decoration {
  background-image: url(../img/done_visuals/doneButtonItem-great__decoration.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 8px;
  left: 224px;
  width: 68px;
  height: 102px;
  transform: scale(.95);
}

.doneButtonItem-great__decoration-active {
  animation: decoration .6s ease-out .7s forwards;
}

@keyframes decoration {
  0% {
    transform: scale(.95);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}


/* great__star-01 */
.doneButtonItem-great__star-01 {
  background-image: url(../img/done_visuals/doneButtonItem-great__star-01.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 28px;
  left: 208px;
  width: 96px;
  height: 102px;
}

.doneButtonItem-great__star-01-active {
  opacity: 0;
  animation: greatStar-01 1.6s linear 1.5s;
}

@keyframes greatStar-01 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* great__star-02 */
.doneButtonItem-great__star-02 {
  background-image: url(../img/done_visuals/doneButtonItem-great__star-02.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 20px;
  left: 208px;
  width: 96px;
  height: 102px;
}

.doneButtonItem-great__star-02-active {
  opacity: 0;
  animation: greatStar-02 1.6s linear 1.9s forwards;
}

@keyframes greatStar-02 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

/* great__メッセージテキスト */
.doneButtonItem-great__msg {
  position: absolute;
  width: 312px;
  height: 102px;
}

.doneButtonItem-great__msg-01-active {
  background-image: url(../img/done_visuals/doneButtonItem-great__msg-01.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.doneButtonItem-great__msg-02-active {
  background-image: url(../img/done_visuals/doneButtonItem-great__msg-02.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.doneButtonItem-great__msg-03-active {
  background-image: url(../img/done_visuals/doneButtonItem-great__msg-03.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.doneButtonItem-great__msg-04-active {
  background-image: url(../img/done_visuals/doneButtonItem-great__msg-04.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.doneButtonItem-great__msg-05-active {
  background-image: url(../img/done_visuals/doneButtonItem-great__msg-05.png);
  background-repeat: no-repeat;
  background-size: contain;
}

/* pub-qa */

.pub-qa-list-placeholder-layout {
    margin: 0 0 32px;
}

.lets-qa {
    display: flex;
    margin: 32px 0;
    background: #f2f2f3;
    color: #323135;
    text-align: center;
}

.lets-qa-main {
    flex: 4 1 auto;
    padding: 32px 8px;
}

.lets-qa-img {
    flex: 5 2 auto;
    min-width: 108px;
    text-align: center;
    align-self: flex-end;
}

.lets-qa-img img {
    width: 108px;
    height: 92px;
}

.lets-qa-right {
}

.lets-qa-lead {
    margin: 0 0 16px;
}

.lets-qa-lead-sub {
    display: block;
}

.lets-qa-about-q {
    margin: 16px 0 0;
}

.lets-qa-about-q a {
    color: #323135;
    text-decoration: underline;
}

.lets-qa-search {
    margin: 32px 0 20px;
    padding: 32px;
    background: #f2f2f3;
    color: #323135;
    text-align: center;
}

.lets-qa-search p {
    margin-bottom: 16px;
}

.lets-qa-search input {
    box-sizing: border-box;
    height: 32px;
}

/**/

#global_menu {
    position: relative;
    font-size: 12px;
}

#dropdown_of_login_btn {
    display: none;
}

#global_dropdown_menu li.responsive {
    display: none;
}

#lesson_title {
    margin: 0;
    padding: 0 0 16px 2px;
    font-size: 18px;
}

#lesson_description {
    margin: 0;
    padding: 0 0 8px 0;
    color: #666;
}

#video_summary {
    padding: 0 0 0 4px;
}

#lesson_stat_graph {
    float: left;
    width: 78px;
}

#lesson_stat_summary {
    float: left;
    margin-left: 12px;
    width: 160px;
}

/* source */

select.source-select {
    min-width: 60%;
}

.source-editor,
.source-editor-diff {
    margin-bottom: 8px;
    border: 1px solid #eee;
}

#shareButtons.inline-share-buttons {
    margin: 0;
    padding: 8px 0 24px 0;
    height: 24px;
}

#shareButtons.inline-share-buttons li {
    float: left;
    display: inline-block;
    margin: 0 16px 0 0;
    padding: 0;
    height: 24px;
}

#memo_form {
    padding: 12px;
}

#memo_save_button {
    line-height: 12px;
}

#memo_sysmessage {
    display: none;
    font-size: 10px;
}

.recent-history-img {
    float: right;
    margin-right: 4px;
    width: 30px;
}

.recent-history-img > img {
    width: 30px;
    height: 30px;
}

.recent-history-title {
    display: inline-block;
    max-width: 212px;
}

/* Comment post */

#comment_post_form_wrapper {
    border-radius: 4px 0 0 0;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-width: 1px 0 0 1px;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 100;
}

#comment_post_form {
    display: none;
    padding: 12px 8px 8px 12px;
    border-radius: 6px 0 0 0;
    min-height: 480px;
}

#comment_post_form .commentInfo {
    width: 580px;
}

#comment_post_form #comment_title {
    width: 560px;
    margin-bottom: 12px;
}

#comment_post_form #comment_body {
    width: 560px;
    height: 240px;
    margin-bottom: 12px;
}

#comment_post_form #comment_markdown {
    margin-top: 2px;
}

#comment_post_form #preview_body {
    min-height: 160px;
    max-height: 400px;
    overflow-y: scroll;
}

.commentBox h3.comment-header {
    border-bottom: 1px solid #ddd;
}

/* Question */

#question_suspended_message {
    padding: 16px 16px 7px;
}

.q-wrapper {
    display: flex;
    margin-bottom: 12px;
}

.q-wrapper .q-icon {
}

.q-wrapper .q-form {
    flex: 1;
}

.question-remaining-alert {
    border: 1px solid #999;
    background: #eee;
    margin-bottom: 16px;
    padding: 8px 16px;
    border-radius: 4px;
}

.q-list-icon {
    text-align: center;
    margin-left: -2px;
}

.q-circle-bg {
    color: #e5f6ff;
}

.q-circle-bg.not-premium {
    color: #f2f2f3;
}

.q-lock-icon {
    color: #646369;
}

.q-comments-icon {
    color: #08c;
    opacity: .5;
}

.pub-qa-list-lesson-section {
    margin: 0 0 32px;
}

.pub-qa-list-lesson-header {
    margin-bottom: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid #cbcace;
}

.pub-qa-list-lesson-header a {
    font-size: 13px;
    font-weight: bold;
    color: #323135;
}

.pub-qa-list-row {
    display: flex;
    padding: 0 16px 16px;
    border-bottom: 1px solid #f2f2f3;
    align-items: center;
}

.pub-qa-list-row + .pub-qa-list-row {
    padding-top: 16px;
}

.pub-qa-list-row .q-list-icon {
    margin-right: 16px;
}

.pub-qa-list-row .q-list-summary {
    flex: 1 0 auto;
    width: 0;
    margin-right: 16px;
}

.pub-qa-list-row .q-list-suffix {
    align-self: flex-end;
}

.q-list-title {
    color: #323135;
}

.q-list-description {
    margin-top: 4px;
    font-size: 11px;
    color: #646369;
}

.q-list-date {
    font-size: 12px;
    float: right;
    opacity: .5;
}

.q-list-desc {
    font-size: 12px;
    color: #646369;
}

.to-package-pub-qa-list {
    margin: 16px 0 32px;
    text-align: center;
    color: #98969c;
}

.to-package-pub-qa-list i {
    margin-right: 2px;
}

.to-package-pub-qa-list a {
    color: #08c;
}

.q-form-content h1 {
  font-size: 18px;
  margin: 0 0 20px 0;
  padding: 12px 0 12px 50px;
  border-bottom: 1px solid #ccc;
  line-height: 1.5;
  position: relative;
}
.q-form-content h1 span {
  position: absolute;
  top: 16px;
  left: 0;
}

.q-form-content-files {
  margin-bottom: 12px;
}
.q-form-content-files li {
  margin-bottom: 4px;
}

.q-list li {
  margin-bottom: 6px;
}

.q-list li:last-child {
    margin-bottom: 0;
}

.q-list {
  margin-left: 18px;
}

.q-bot {
    margin: 0 0 0 56px;
    padding: 12px 0;
}

.q-bot .q-bot-icon {
    float: left;
    width: 48px;
    vertical-align: middle;
}

.q-bot span.fa-stack {
    margin-right: 4px;
}

.q-bot .coffee .fa-circle {
    color: #2c8d8b;
}

.q-icon-red .fa-circle {
    color: #ff6464;
}

.q-icon-orange .fa-circle {
    color: #fdbb00;
}

.q-icon-blue .fa-circle {
    color: #2c8dcb;
}

.q-icon-green .fa-circle {
    color: #2c8d8b;
}

.q-bot .q-bot-body {
    display: table-cell;
    vertical-align: middle;
    height: 38px;
}

.q-bot-alert {
    display: flex;
}

.q-bot-alert .q-bot-icon {
    flex: 0;
    margin: 2px 0 0 18px;
}

.q-bot-alert .noticeBox {
    flex: 1;
    margin: 0 0 16px 18px;
}

.q-admin-toggle-markdown {
    margin-left: 8px;
}

.q-toggle-markdown-copy {
    text-align: right;
}

.q-wrapper .q-toggle-markdown-copy {
    margin: 12px 16px;
}

.q-admin-markdown-text {
    display: none;
    box-sizing: border-box;
    width: 100%;
}

.q-icon {
  box-sizing: border-box;
  width: 70px;
  float: left;
}

#question_new_main .q-icon {
    float: none;
    flex: 0 0 70px;
}

.q-icon img {
  width:48px;
  height:48px;
  border-radius:50%;
}
.q-form {
    float: left;
    box-sizing: border-box;
    border-radius: 4px;
    position: relative;
    width: 696px;
    border: 1px solid #ccc;
}

#question_new_main .q-form {
    float: none;
    width: auto;
    flex: 1 0 calc(100% - 70px);
}

.q-form:before {
    content: "";
    position: absolute;
    top: 14px;
    left: -9px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 8px 8px 8px 0;
    border-color: transparent #ccc transparent transparent;
    z-index: 1;
}
.q-form:after {
    content: "";
    position: absolute;
    top: 14px;
    left: -7px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 8px 8px 8px 0;
    border-color: transparent #f8f8f8 transparent transparent;
    z-index: 2;
}
.q-form.white-triangle:after {
    border-color: transparent #fff transparent transparent;
}

.q-date {
    margin-top: 3px;
    color: #aaa;
    font-size: 12px;
    font-weight: normal;
}

.q-date a {
    color: #aaa;
    text-decoration: none;
}

.container.wide.pub-qa-main-container .span13 {
    width: 684px;
}

.pub-qa-main-container #sidebar.question-sidebar {
    width: 320px;
    margin-top: 44px;
    margin-bottom: 64px;
    margin-left: 64px;
    color: #323135;
}

.pub-qa {
    margin: 44px 0 64px;
    color: #323135;
}

.pub-qa .pub-qa-header {
    margin-bottom: 32px;
}

.pub-qa .pub-qa-section {
    display: flex;
    padding: 32px 16px;
    margin: 0;
    border-top: 1px solid #f2f2f3;
}

.pub-qa-user {
    flex: 0 0 48px;
    margin-right: 16px;
    text-align: center;
}

.pub-qa-user > span {
    display: inline-block;
    margin-top: 4px;
    font-size: 11px;
    opacity: .5;
}

.pub-qa-user > span.pub-qa-teacher-label {
    display: inline-block;
    padding: 0 4px;
    border-radius: 2px;
    background: #646369;
    color: #fff;
    opacity: 1;
}

.pub-qa-q,
.pub-qa-a {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.pub-qa-q ul,
.pub-qa-a ul,
.pub-qa-q ol,
.pub-qa-a ol {
    margin-bottom: 16px;
    font-size: 14px;
}

.pub-qa-a > footer {
    margin-top: 16px;
}

.pub-qa .q-form-files {
    background: none;
    border: none;
    margin: 16px 0 0 0;
    padding: 0;
}

.pub-qa .q-form-files > .question-attach-files > li {
    border: 1px solid #08c;
    background: none;
    border-radius: 2px;
    color: #08c;
}

.pub-qa .q-form-files > .question-attach-files > li:hover {
    background: rgba(0, 136, 204, .1);
}

.pub-qa .q-form-files > .question-attach-files > li:hover > a {
    text-decoration: none;
    color: #08c;
}

.pub-qa-title {
    margin: 0;
    font-size: 16px;
    font-weight: normal;
    line-height: 1.5;
    display: flex;
}

.pub-qa-title::before {
    content: '質問';
    display: block;
    box-sizing: border-box;
    width: 37px;
    height: 23px;
    padding: 2px 6px;
    margin-left: 8px;
    margin-right: 16px;
    background: #e5f6ff;
    border-radius: 4px;
    color: #08415e;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.6;
    text-align: center;
    flex: 0 0 37px;
}

.pub-qa-description {
    background: #e5f6ff;
    border-radius: 4px;
    margin-top: 16px;
    padding: 8px 8px 8px 0;
    display: flex;
    font-weight: bold;
    color: #08415e;
    font-size: 14px;
    line-height: 1.6;
}

.pub-qa-description::before {
    content: '回答';
    display: block;
    box-sizing: border-box;
    width: 37px;
    height: 23px;
    padding: 2px 6px;
    margin-left: 8px;
    margin-right: 16px;
    background: #fff;
    border-radius: 4px;
    color: #08415e;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.6;
    text-align: center;
    flex: 0 0 37px;
}

.pub-qa-header-info {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.pub-qa-header-info .pub-qa-share-buttons {
    margin-left: 16px;
}

.pub-qa-date {
    font-size: 11px;
    color: #323135;
    opacity: .5;
}

.pub-qa footer {
    text-align: right;
}

.pub-qa-answers {
    margin: 0;
}

.pub-qa-resolved-section-layout {
    padding-top: 32px;
    border-top: 1px solid #f2f2f3;
}

.pub-qa-resolved-section {
    box-sizing: border-box;
    background: #e9fbe9;
    border-radius: 2px;
    padding: 32px;
    text-align: center;
    color: #194d19;
    font-size: 14px;
}

.pub-qa-resolved-section i {
    color: #29a329;
}

.pub-qa-about-lesson {
    margin-bottom: 32px;
}

.pub-qa-about-lesson h3 {
    padding-bottom: 8px;
    border-bottom: 1px solid #cbcace;
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.6;
}

.pub-qa-about-lesson-covor-layout {
    margin-bottom: 16px;
}

.pub-qa-about-lesson-link-layout {
    display: flex;
    align-items: center;
}

.pub-qa-about-lesson-link-layout > i {
    margin-right: 8px;
    color: #98969c;
}

.premium-mask {
    background: #ffeccc;
    padding: 32px;
    text-align: center;
}

.premium-mask p {
    margin-bottom: 32px;
}


.faq-main {
    min-height: 480px;
}

.faq-side-new-btn {
    margin-bottom: 15px;
    text-align: center;
}

.faq-title-icon {
    float: left;
    margin-left: 12px;
}

.q-icon .faq-icon {
    display: block;
    margin-left: 14px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff;
    font-size: 21px;
    line-height: 30px;
    text-align: center;
    opacity: 0.9;
}

.q-icon .faq-icon.faq-q {
    margin-top: 8px;
    background: #cbcace;
}

.q-icon .faq-icon.faq-a {
    margin-top: 8px;
    background: #cbcace;
}

.q-title {
    font-size: 18px;
    margin: 0 0 10px 0;
    padding: 0 0 12px 70px;
    border-bottom: 1px solid #ccc;
    line-height: 1.5;
    position: relative;
}

.q-title .label {
    position: absolute;
    top: 4px;
    left: 14px;
}

.q-title-breadcrumb {
  margin: 0 0 20px 0;
  color: #aaa;
  font-size: 12px;
  text-align: right;
}

#question_preview .q-title {
    padding-left: 4px;
    font-weight: bold;
    margin-bottom: 16px;
}

.q-form-header {
    margin: 0;
    background: #f8f8f8;
    padding: 10px 16px;
    border-radius: 4px 4px 0 0;
    border-bottom: 1px solid #ccc;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.6;
    color: #767676;
}

.q-form-content {
  padding: 14px 14px;
  line-height: 1.8;
}
.q-form-content-body {
  box-sizing: border-box;
  width: 670px;
  height: 200px;
  margin-bottom:12px;
  padding: 10px;
}
.q-form-content-footer i {
  font-size: 14px;
}
.q-form-content-footer div {
  padding-top: 6px;
}
.q-form-content-footer button {
  padding: 6px 20px;
}

.read-before-q {
    margin: 0;
    padding: 32px 16px 16px;
}

.read-before-q + .read-before-q {
    padding-top: 16px;
}

.read-before-q header h3 {
    margin-bottom: 16px;
}

.q-info-list li {
    margin-bottom: 16px;
}

.q-info-list li:last-child {
    margin-bottom: 0;
}

.q-info-list li i {
    color: #08c;
}

.q-video {
    padding: 16px 16px 0;
}

.q-home-checks {
    float: right;
}

.q-home-checks label:last-child {
    margin-left: 8px;
}

.q-home-notice {
    margin: 0;
    padding: 16px 0 32px;
    color: #323135;
}

#q_home_table {
    width: 100%;
}

#q_home_table .q-home-table-row {
    display: flex;
    justify-content: space-between;
    height: 44px;
    overflow: hidden;
    padding-bottom: 16px;
}

#q_home_table .q-home-table-row + .q-home-table-row {
    border-top: 1px solid #f2f2f3;
    padding-top: 16px;
}

#q_home_table .status {
    flex: 0 0 45px;
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#q_home_table .status .label {
    box-sizing: border-box;
    width: 34px;
    height: 21px;
    border-radius: 4px;
    line-height: 21px;
    text-align: center;
    padding: 0;
    background: #98969c;
}

#q_home_table .status .label.label-info {
    width: 45px;
    background: #08c;
}

#q_home_table .contents {
    flex: 1 1 auto;
    line-height: 19px;
    margin-left: 32px;
}

#q_home_table .teacher {
    flex: 0 0 88px;
    width: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#q_home_table .teacher .userIcon {
    margin: 0;
}

#q_home_table .created {
    flex: 0 0 92px;
    width: 92px;
    color: #98969c;
    text-align: right;
    display: flex;
    flex-direction: column;
}

.q-home-body {
    margin-top: 4px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    color: #646369;
}

.q-attached-images a {
    margin: 0 8px 8px 0;
    display: inline-block;
    border: 1px solid #e5e5e5;
}

.q-attached-images a:nth-child(even) {
    margin-right: 0;
}

.q-attached-images img {
    width: 119px;
}

.q-attached-images a:hover {
    box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.1);
}

.q-float-btn {
    z-index: 99;
    position: fixed;
    bottom: 16px;
    right: 16px;
    width: 60px;
    height: 60px;
    background: #08c;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .4);
    cursor: pointer;
}

.q-float-btn:active {
    bottom: 14px;
    box-shadow: 0 0 4px rgba(0, 0, 0, .8);
}

.q-float-btn .fa-comments {
    font-size: 26px;
    margin-top: 20px;
}

@keyframes rotateOpen {
    0% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(180deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

@keyframes rotateClose {
    0% {
        transform: rotateY(360deg);
    }
    50% {
        transform: rotateY(180deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}

.q-float-btn.open-float .fa-comments {
    font-size: 32px;
    animation: rotateOpen .4s linear 0s;
    transition: font-size .2s ease-out;
}

.q-float-btn.close-float .fa-comments {
    font-size: 26px;
    animation: rotateClose .4s linear 0s;
    transition: font-size .2s ease-out;
}

.q-float-btn.init.open-float .fa-comments {
    animation: none;
    transition: none;
}
.q-float-btn.init.close-float .fa-comments {
    animation: none;
    transition: none;
}


.q-float-notify-count {
    display: none;
    position: absolute;
    top: -5px;
    right: -5px;
    width: 22px;
    height: 22px;
    background: #fc576b;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    line-height: 22px;
}

.q-float-board {
    display: none;
    z-index: 99;
    box-sizing: border-box;
    position: fixed;
    bottom: 90px;
    right: 10px;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, .4);
    width: 320px;
}

.q-float-board-header {
    background: #08c;
    padding: 8px 16px;
    height: 30px;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    line-height: 30px;
    color: #fff;
    font-weight: bold;
    font-size: 13px;
}

.q-float-close {
    margin: 5px 0 0 0;
    font-size: 18px;
    cursor: pointer;
}

.q-float-board-body {
    padding: 16px;
    position: relative;
}

ul.q-float-menu {
    list-style: none;
    margin: 0;
}

ul.q-float-menu > li {
    margin: 0 0 16px 0;
    padding: 0;
    line-height: 36px;
}

.q-float-menu-item.with-notice {
    line-height: 18px;
}

.do-question .q-float-menu-item {
    line-height: 18px;
}

.do-question .remaining-times {
    position: absolute;
}

.remaining-times {
    color: #646369;
    font-size: 11px;
}

.lets-qa .remaining-times {
    margin-top: 4px;
}

.faq-side-new-btn .remaining-times {
    display: inline-block;
    margin-top: 4px;
}

ul.q-float-menu > li.line2 {
    line-height: 18px;
}

ul.q-float-menu > li:last-child {
    margin-bottom: 0;
}

ul.q-float-menu > li > a,
ul.q-float-menu > li > .wrapper {
    display: flex;
    align-items: flex-start;
}

ul.q-float-menu .q-float-notice {
    margin-top: 16px;
    font-size: 12px;
    color: #666;
}

ul.q-float-menu .q-float-notice i {
    color: #0088cc;
}

ul.q-float-menu .q-float-notice ul {
    margin: 0 0 0 24px;
    list-style-type: disc;
}
ul.q-float-menu .q-float-notice ul li {
    margin-top: 4px;
}

.q-float-menu-icon {
    margin-right: 16px;
}

.q-float-menu-icon .q-float-notify-count {
    right: -3px;
    width: 17px;
    height: 17px;
    line-height: 17px;
    font-size: 10px;
}

.q-float-menu-icon i.fa-circle {
    color: #08c;
}

.q-github-icon i.fa-github {
    color: #000;
}

#question_create_btn {
}

.teachers-list {
    list-style: none;
    margin: 0;
}
.teachers-list > li {
    display: inline;
}
.teachers-list > li img {
    border-radius: 50%;
    width: 32px;
    height: 32px;
}

#teachers {
    min-height: 480px;
}

#teachers .teacher {
    box-sizing: border-box;
    padding: 16px;
    margin-bottom: 16px;
    border:1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 1px 2px 0 #eee;
}

.teacher-icon,
.question-lesson-icon {
    float: left;
    text-align: center;
}

.teacher-icon img,
.question-lesson-icon img {
    width: 64px;
    height: 64px;
}

.teacher-prof,
.question-lesson-detail {
    float: left;
    width: 540px;
    margin-left: 16px;
}

.question-lesson-detail {
    width: 400px;
}

.teacher-name,
.question-lesson-name {
    font-size: 16px;
}

.teacher-intro,
.question-lesson-description {
    margin-top: 16px;
    font-size: 14px;
    color: #666;
}

.question-lesson-teachers {
    margin-top: 8px;
    text-align: right;
}

.teacher-notice {
    box-sizing: border-box;
    float: left;
    width: 394px;
    margin: 0 0 16px 16px;
    padding: 16px;
    background: #fafafa;
    font-size: 12px;
}

#sidebar.question-sidebar {
    min-height: 360px;
}

#authorize_teacher_warning form {
    display: inline-block;
    margin: 0 8px;
}

.dotinstall-embed {
    margin: 16px 0;
    padding: 8px;
    width: 360px;
    overflow: hidden;
    border: 1px solid #eee;
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
}

.dotinstall-embed .dotinstall-embed-left-img {
    float: left;
    margin-right: 16px;
    width: 64px;
}

.dotinstall-embed .dotinstall-embed-right-detail {
    float: left;
    width: 280px;
    line-height: 1.4
}

.question-notice {
    margin:16px 0;
}

#question_post_form_header {
    font-size: 16px;
    margin: 0;
    padding: 0 0 8px 0;
}

#question_form {
    padding: 16px;
    margin: 0;
}

input#question_title {
    box-sizing: border-box;
    font-size: 14px;
    width: 662px;
    height: 34px;
    padding: 8px;
    margin-bottom: 16px;
}

textarea#question_body {
    box-sizing: border-box;
    height: 256px;
    width: 662px;
    padding: 8px;
    font-size: 14px;
    line-height: 1.5;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom: none;
    margin-bottom: 0;
}

.file-attach-area {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-top: 1px dashed #ccc;
    margin-bottom: 15px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 4px;
    padding: 8px 10px;
    background: #fafafa;
}

#use_markdown {
    margin-top: 3px;
    margin-left: -16px;
}

#question_preview {
    margin-bottom: 16px;
    min-height: 258px;
}

#question_preview_body .question-body {
    padding-left: 4px;
}

#question_preview_error,
#question_comment_preview_error {
    display: none;
}

.question-target-lesson {
}

.question-target-img {
    float: left;
    width: 48px;
}

.question-target-detail {
    float: left;
    margin-left: 12px;
    width: 188px;
    line-height: 24px;
}

.question-notes {
    margin-bottom: 16px;
    padding: 32px;
    background: #f2f2f3;
    color: #323135;
}

.question-notes .flex {
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(203, 202, 206, .5);
}

.question-notes h4 {
    margin: 0 0 16px;
    font-size: 13px;
    text-align: center;
}

.question-notes-notice {
    margin: 0 0 32px;
    text-align: center;
    font-size: 11px;
    color: #646369;
}

.question-notes ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.question-notes ul li + li {
    margin-top: 16px;
}

.question-notes label {
    margin-bottom: 0;
    font-weight: bold;
}

.question-notes .checkbox-text {
    line-height: 20px;
    margin-top: 4px;
}

.question-notes label.di-checkbox > input:checked + .checkbox-text::before {
    top: 3px;
}

.question-notes-list p {
    margin-left: 32px;
    color: #646369;
}

#file_upload_wrapper {
    display: block;
    margin: 16px 0;
}

.question-new-file-upload > #file_upload_wrapper {
    display: block;
}

#question_file_upload_area {
    box-sizing: border-box;
    padding: 16px;
    height: 104px;
    line-height: 32px;
    background: #f2f2f3;
    border: 1px dashed #ddd;
}

#question_file_upload_area.over {
    padding-top: 13px;
    padding-bottom: 13px;
    border: 4px dotted #ddd;
    background: #f8f8f8;
}

#select_upload_file_wrapper,
.select-upload-file-wrapper {
    position: relative;
    width: 328px;
    height: 18px;
    overflow: hidden;
    margin: 0 auto;
    padding-top: 8px;
    text-align: right;
    cursor: pointer;
}

#select_upload_file,
.select-upload-file {
    position: absolute;
    top: 6px;
    left: -60px;
    display: inline-block;
    width: 436px;
    height: 18px;
    opacity: 0;
    cursor: pointer;
}

.q-form-files {
    background: #f8f8f8;
    padding: 12px 16px 4px;
    border-top: 1px solid #ccc;
}

.question-attach-files {
    list-style: none;
    margin: 0;
    font-size: 0;
}

.question-attach-files > li {
    display: inline-block;
    margin: 0 8px 8px 0;
    padding: 4px 8px;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    font-size: 13px;
}

#question_form > .question-attach-files > li {
  margin: 0 8px 14px 0;
}

#question_comment_area .question-attach-files > li {
    margin-bottom: 16px;
}

.question-body .question-attach-files > li,
.question-comment-body .question-attach-files > li {
    margin: 8px 8px 0 0;
    cursor: pointer;
}

.question-attach-files > li.uploading {
    opacity: 0.5;
}

.question-attach-files > li.success {
    color: #3a87ad;
    background: #eef;
    border: 1px solid #ccf;
}

.question-attach-files > li.error {
    color: #b94a48;
    background: #f2dede;
    border: 1px solid #eed3d7;
}

.question-attach-files > li > i {
    margin-right: 4px;
    color: #666;
}

.question-attach-files > li.error > i {
    color: #f00;
}

.question-attach-files > li.success > i {
    color: #3a87ad;
}

.question-attach-files > li > i.fa-times {
    margin-left: 8px;
    cursor: pointer;
    visibility: hidden;
}

.question-attach-files > li.over > i.fa-times {
    visibility: visible;
}

/* 必ず .over より下に書く */
.question-attach-files > li.error > i.fa-times {
    visibility: hidden;
}

#upload_errors {
    display: none;
    margin: 0 0 16px 0;
    list-style: none;
}

#upload_errors > li {
    margin-bottom: 8px;
    padding: 4px;
    color: #f00;
    background: #fee;
    border: 1px solid #fcc;
}

/* question/show */

.question-breadcrumb {
    list-style: none;
    margin: -8px 0 0 0;
    font-size: 12px;
}

.question-breadcrumb li {
    display: inline;
}

.question-breadcrumb li:not(:last-child):after {
    content: '/';
    margin: 4px;
    color: #caaaaa;
}

.question-row {
    /*margin: 16px 0 24px;*/
}

#new_question_title {
    display: none;
    margin: 0;
    padding: 2px 8px;
    width: 496px;
    height: 28px;
    font-size: 16px;
}

#cancel_edit_question_title {
    font-size: 13px;
    font-weight: normal;
}

#q_edit_wrapper {
    display: none;
}

#new_question_body {
    box-sizing: border-box;
    margin: 0;
    width: 664px;
    height: 256px;
    font-size: 14px;
}

.question-user {
    float: left;
    width: 64px;
    height: 80px;
    margin-right: 16px;
}

.question-user img.userIcon {
    box-sizing: border-box;
    width: 64px;
    height: 64px;
    margin: 0;
}

.question-body {
    width: 630px;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    line-height: 21px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

#question_controls {
    float: right;
    margin: 12px 8px 0 8px;
}

#question_title_controls {
    float: right;
    margin: 2px 8px 0 0;
}

#question_controls a,
#question_title_controls a {
    color: #aaa;
    font-size: 16px;
}

#question_title_edit_controls {
    display: none;
}

.edit-question-comment {
    margin: 0 0 0 8px;
    color: #aaa;
    font-size: 16px;
}

#question_area .question-body {
    border: none;
    width: 664px;
}

#question_preview .question-body {
    border: none;
    width: 664px;
    padding: 0;
}

.question-body p {
    font-size: 14px;
}

.question-footer {
    clear: both;
    font-size: 12px;
    color: #999;
    text-align: right;
}

.question-footer span {
    margin-left: 8px;
}

.question-footer a {
    color: #999;
    text-decoration: underline;
}

.question-edit-controls {
    margin-top: 12px;
}

.question-edit-controls input.btn {
    margin-right: 8px;
}

.update-question-error {
    display: none;
    text-align: left;
}

#update_question_title_error {
    font-size: 13px;
    margin: 8px 0;
}

.use-markdown-label {
    font-size: 12px;
    margin-top: 8px;
    margin-left: 4px; /* checkbox が focus された時にはみ出さないように */
}

.use-markdown-label .use-markdown-text-sp {
    display: none;
}

.toggle-attach-files {
    float: right;
}

#question_comment_row {
    display: flex;
    margin: 12px 0 24px;
}

#question_comment_row .q-icon {
}

#question_comment_row .q-form {
    flex: 1;
}

#input_comment_as_admin_row,
#button_when_owner_not_premium_row {
    margin: 24px 0;
}

#question_comment_area {
    clear: both;
    padding: 16px;
}

#question_comment_body {
    box-sizing: border-box;
    margin: 0;
    width: 100%;
    height: 128px;
    padding: 8px;
    font-size: 14px;
    line-height: 1.5;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom: none;
    margin-bottom: 0;
}

#question_comment_preview {
    min-height: 120px;
}

#question_comment_bot label {
    display: inline-block;
}

#question_comment_bot ul {
    list-style: none;
    margin: 0 0 0 12px;
}

#question_comment_bot ul > li {
    margin-bottom: 8px;
}

#question_comment_bot input[type="radio"] {
    margin-top: 1px;
}

#question_comment_submit_btn {
    margin-right: 8px;
    padding: 6px 18px;
}

#question_status_toggle_btn {
    padding: 6px 18px;
}

#question_comment_form {
    display: none;
}

#question_comment_form input[type="checkbox"] {
    margin-top: 3px;
}

#question_comment_bot_submit {
    margin: 16px 0;
}

#question_comment_error {
    clear: both;
    display: none;
    margin: 16px 0 0 0;
}

a.question-comment-anchor {
    display: block;
    margin-top: -24px;
    margin-bottom: 24px;
}

.question-comment {
    display: flex;
    margin: 12px 0;
}

.question-comment .q-form {
    flex: 1;
}

#question_comment_preview .question-comment,
.qc-edit-preview .question-comment {
    margin: 0;
}

.question-comment-user {
    float: left;
    width: 64px;
    margin-right: 16px;
    height: 34px;
    text-align: right;
}

.question-comment-user img {
    border-radius: 50%;
    width: 34px;
    height: 34px;
}

.question-comment-body {
    width: 664px;
    padding: 16px;
    border-radius: 4px;
    font-size: 14px;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.qc-edit-preview .question-comment-body {
    width: 632px;
    padding: 0;
}

.question-comment-body.bot {
    width: auto;
    margin-left: 16px;
    padding: 0;
}

#question_comment_preview_body {
    margin-bottom: 24px;
}

#question_comment_preview_body .question-comment-body {
    padding: 0;
}

/* For markdown */
.markdown-body p,
.question-comment-body p {
    font-size: 14px;
    margin-bottom: 16px;
}

.comment-body.markdown-body p {
    font-size: 13px;
}

.question-body p:last-child,
.question-comment-body p:last-child,
.markdown-body p:last-child {
    margin-bottom: 0;
}

.markdown-body h1,
.question-comment-body h1 {
    font-size: 24px;
    line-height: 36px;
    margin-top: 32px;
    margin-bottom: 16px;
}
.markdown-body h1:first-child,
.question-comment-body h1:first-child {
    margin-top: 0;
}
.markdown-body h2,
.question-comment-body h2 {
    font-size: 22px;
    line-height: 32px;
    margin-top: 32px;
    margin-bottom: 16px;
}
.markdown-body h2:first-child,
.question-comment-body h2:first-child {
    margin-top: 0;
}
.markdown-body h3,
.question-comment-body h3 {
    font-size: 20px;
    line-height: 24px;
    margin-top: 32px;
    margin-bottom: 16px;
}
.markdown-body h3:first-child,
.question-comment-body h3:first-child {
    margin-top: 0;
}
.markdown-body h4,
.question-comment-body h4 {
    font-size: 18px;
    line-height: 20px;
    margin-top: 32px;
    margin-bottom: 16px;
}
.markdown-body h4:first-child,
.question-comment-body h4:first-child {
    margin-top: 0;
}
.markdown-body h5,
.question-comment-body h5 {
    font-size: 16px;
    line-height: 18px;
    margin-top: 32px;
    margin-bottom: 16px;
}
.markdown-body h5:first-child,
.question-comment-body h5:first-child {
    margin-top: 0;
}
.markdown-body h6,
.question-comment-body h6 {
    font-size: 14px;
    line-height: 16px;
    margin-top: 32px;
    margin-bottom: 16px;
}
.markdown-body h6:first-child,
.question-comment-body h6:first-child {
    margin-top: 0;
}

.comment-body.markdown-body h1,
.comment-body.markdown-body h2,
.comment-body.markdown-body h3,
.comment-body.markdown-body h4,
.comment-body.markdown-body h5,
.comment-body.markdown-body h6 {
    padding-bottom: 6px;
    font-size: 14px;
    border-bottom: 1px dashed #ddd;
}

/* Do not remove div#current_question_body */
.markdown-body > div#current_question_body > ul,
.markdown-body > div#current_question_body > ol,
.comment-body.markdown-body ul,
.comment-body.markdown-body ol,
.question-comment-body > div.current-qc > ul,
.question-comment-body > div.current-qc > ol,
.forum-thread-body.markdown-body ul,
.forum-thread-body.markdown-body ol,
.forum-comment-body.markdown-body ul,
.forum-comment-body.markdown-body ol {
    margin-bottom: 16px;
}

/* Do not remove div#current_question_body */
.markdown-body > div#current_question_body ul li,
.markdown-body > div#current_question_body ol li,
.comment-body.markdown-body ul li,
.comment-body.markdown-body ol li,
.question-comment-body > div.current-qc ul li,
.question-comment-body > div.current-qc ol li,
.pub-qa .markdown-body ul li,
.pub-qa .markdown-body ol li,
.faq-answer-contents .question-comment-body ul li,
.faq-answer-contents .question-comment-body ol li,
.forum-thread-body.markdown-body ul li,
.forum-thread-body.markdown-body ol li,
.forum-comment-body.markdown-body ul li,
.forum-comment-body.markdown-body ol li {
    margin-top: 8px;
    margin-bottom: 8px;
    line-height: 1.6;
}
.markdown-body blockquote,
.question-comment-body blockquote {
    padding-left: 16px;
    color: #888;
}
.markdown-body blockquote p,
.question-comment-body blockquote p {
    line-height: 1.5;
}
.markdown-body pre,
.markdown-body code,
.question-comment-body pre,
.question-comment-body code {
    border: none;
    background-color: #f4f4f4;
    font-size: 12px;
    color: #333;
    margin-bottom: 16px !important; /* To disable .commentBox pre */
    white-space: pre;
    overflow: auto;
}

.markdown-body p > code,
.question-comment-body p > code {
    white-space: pre-wrap;
    line-height: 2;
}

.markdown-body pre,
.question-comment-body pre {
    padding: 16px !important;
}

.comment-body.markdown-body img {
    width: 100%;
    max-width: 640px;
}

.q-markdown-img {
    border: 1px solid rgba(0, 0, 0, .05);
}

.detected-text-area {
    position: relative;
    margin: 4px 0;
    text-align: center;
}

.detected-text-area pre {
    text-align: left;
}

.close-detected-text {
    position: absolute;
    top: 4px;
    right: 4px;
}

.qc-edit {
    display: none;
}

#q_edit > ul.nav-tabs,
.qc-edit > ul.nav-tabs {
    margin-bottom: 12px;
}


.new-question-comment {
    box-sizing: border-box;
    margin: 0;
    width: 100%;
    height: 192px;
    font-size: 14px;
}

.question-comment-footer {
    clear: both;
    padding-top: 4px;
    color: #999;
    text-align: right;
}

.question-comment-footer a {
    font-size: 11px;
    color: #999;
    text-decoration: underline;
}

.question-comment-footer span {
    margin-left: 8px;
}

.question-comment-footer span i {
    font-size: 14px;
}

.question-bot-comment {
    margin: 16px 0;
    overflow: hidden;
}
.question-bot-comment-img {
    float: left;
    width: 80px;
    height: 80px;
}
.question-bot-comment-img img {
}
.question-bot-comment-body {
    float: left;
    width: 638px;
    margin-left: 16px;
    padding: 16px;
    border: 1px solid #ffd788;
    border-radius: 8px;
    font-size: 18px;
    color: #dd9300;
    text-align: center;
}

.teacher-request li {
    margin-top: 6px;
}

.teacher-request > li:first-child {
    margin-top: 0;
}

.qd-search-form .checkbox input[type="checkbox"] {
    margin-top: 3px;
    margin-left: 16px;
}

.qd-question-detail a.qd-q-body {
    margin-left: 8px;
    font-size: 12px;
    font-weight: normal;
    color: #aaa;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.qd-question-detail a.qd-q-body:hover {
    color: #bbb;
}

.qd-qc-count {
    margin-left: 4px;
}

.qd-breadcrumb {
    margin-top: 6px;
    text-align: right;
    font-size: 11px;
}

.qd-breadcrumb > a {
    color: #4b9433;
}

.qd-breadcrumb > a + a::before {
    content: "/";
    margin: 4px;
    font-size: 10px;
}

.qd-status {
    margin-bottom: 6px;
}

.qd-comments-count {
    color: #888;
}

.qd-q-username,
.qd-assign-status {
    display: inline-block;
    width: 60px;
    margin-left: 2px;
    vertical-align: middle;
    text-align: left;
}

.question-unread-mark {
    display: inline-block;
    width: 16px;
    height: 16px;
}

#question_solved_form {
    margin: 0;
}

#question_solved_form input {
    width: 100%;
}

#question_close_form {
    margin: 12px 0;
}

#question_close_form:first-child {
    margin-top: 0;
}

#question_close_form input {
    width: 100%;
}

#question_histories {
    display: none;
}

.question-histories-list {
    list-style: none;
    margin: 0;
}

.question-histories-list li {
    margin-bottom: 4px;
}

.question-comment-histories {
    display: none;
}

#title_diff {
    line-height: 0.8;
}

#review_modal .modal-body {
    padding: 0;
}

#review_modal.modal.fade {
    top: -40%;
}

#review_modal.modal.fade.in {
    top: 10%;
}

#q_review_form_on_top {
    border: 1px solid #ddd;
    margin: 0 0 24px 0;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
}

#q_review_form_on_top #cancel_q_review_btn {
    display: none;
}

#q_review_form_on_top #send_q_review_btn {
    width: 176px;
}

.q-review-form-header {
    margin: 0;
    padding: 16px;
    border-bottom: 1px solid #ddd;
    font-size: 14px;
}

.q-review-icons {
    margin: 32px 0;
}

.q-review-icons .q-review-labels {
    margin: 8px 0;
    color: #888;
    font-size: 13px;
}

.q-review-icons .q-review-labels span {
    display: inline-block;
    width: 52px;
    margin: 0 8px;
    cursor: pointer;
}

.q-review-icon {
    display: inline-block;
    width: 52px;
    margin: 8px;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.4;
}

.q-review-icon:hover {
    opacity: 0.8;
}

.q-review-icon.selected {
    opacity: 1;
    color: #08c;
}

.q-review-icon i {
    font-size: 32px;
}

#q_review_form {
    margin-bottom: 32px;
}

#q_review_form .btn {
    width: 128px;
    height: 32px;
}

.q-review-result .di-iconfont-sad-o {
    color: #08c;
}
.q-review-result .di-iconfont-normal-o {
    color: #da0;
}
.q-review-result .di-iconfont-smile-o {
    color: #c00;
}

.q-review-result.no-color i {
    color: #aaa;
}

.q-review-result-label {
    font-size: 12px;
    color: #aaa;
}

#q_home_table .q-review-result i {
    font-size: 12px;
}

#q_home_table .q-review-result-label {
    margin-right: 8px;
}

#q_home_table .do-q-review {
    margin-right: 6px;
    font-size: 12px;
}

.q-title .q-review-result i {
    font-size: 13px;
}

.q-title .q-review-result-label {
    font-size: 12px;
}

/** // q-review **/

.bot-action-help {
    margin-top: 8px;
}

#suggested_keywords {
    margin: 0 0 4px 0;
}

.bot-action-help-block {
    font-size: 12px;
}

.teacher-image {
    float: left;
    width: 48px;
}

.teacher-detail {
    float: right;
    margin-left: -48px;
    width: 100%;
    line-height: 24px;
}

.teacher-detail-inner {
    margin-left: 68px;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

ul.side-questions-list {
    margin: 0;
    list-style: none;
}

ul.side-questions-list li {
    margin-bottom: 4px;
    font-size: 12px;
}
ul.side-questions-list li .side-question-list-title {
    float: left;
    width: 212px;
}
ul.side-questions-list li .side-question-list-info {
    float: right;
    width: 36px;
    text-align: right;
    color: #666;
}

.q-img-file-box {
    padding: 16px;
    text-align: center;
    border: 1px solid #f0f0f0;
    background: #fafafa;
}

.q-file-title {
    line-height: 1.6;
}

.q-file-compare {
    margin: -8px 0 9px;
}

.q-file-navi {
    margin: 24px auto;
    width: 200px;
    color: #aaa;
}

/* Question Dashboard */

#unread_open, #unread_closed {
    display: none;
}

textarea#teacher_notice {
    height: 120px;
}

#pack_area.teacher-support {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
}

#pack_area.teacher-support > .sbox {
    box-sizing: border-box;
    width: calc(50% - 8px);
    border-top: 1px solid #ddd;
    margin-bottom: 16px;
}

.teacher-pack-header {
    margin: 0;
    padding: 8px;
    font-size: 14px;
    font-weight: normal;
    background-color: #f2f2f3;
}
.teacher-pack-header label {
    margin: 0;
}
.teacher-pack-header input[type="checkbox"] {
    margin: -2px 2px 0 0;
}

.not-in-packs-packages {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    padding: 0 8px;
}
.not-in-packs-packages > li {
    box-sizing: border-box;
    width: calc(50% - 16px);
    margin: 0;
    padding: 8px;
    border-bottom: 1px solid #eee;
}
.not-in-packs-packages > li:nth-child(odd) {
}
.not-in-packs-packages > li:hover {
    background: #f8f8f8;
}

.teacher-support-package {
    display: flex;
}

.pack-lessons td.teacher-support-package {
    padding: 8px;
}

.teacher-support-package > label {
    flex: 1 0 auto;
    margin: 0;
    line-height: 24px;
}

.teacher-support-package > label > input[type=checkbox] {
    margin-top: 5px;
}

.teacher-support-package > .support-teachers-list {
    width: 180px;
    position: relative;
    margin-right: 8px;
}

.teacher-support-package > .to-package-link {
    flex: 0 1 auto;
    line-height: 24px;
}

.support-teachers-list .userIcon {
    position: absolute;
}
.support-teachers-list .userIcon:not(:first-child) {
    box-shadow: 1px 0 2px rgba(0, 0, 0, 0.1);
}

.current-holiday {
    margin: 32px 0;
}

.current-holiday-period {
    font-size: 16px;
}

.teacher-holiday-form {
    margin: 32px 0;
}

.all-teachers-holidays li {
    margin-bottom: 8px;
}

/* Contact */

.contact-faq hr {
    margin: 12px 0;
}

.suggestion {
    display: none;
    margin-top: 16px;
    font-size: 12px;
    line-height: 12px;
}

.suggestion .suggestion-header {
    font-size: 12px;
    margin-bottom: 8px;
}

/** /premium **/

.premium-hero {
    padding: 32px 0;
    background: #ffda99;
}

.premium-hero-container {
    box-sizing: border-box;
    width: 940px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.premium-hero-main {
    width: 400px;
    text-align: center;
}

.premium-hero-main > img {
    margin-bottom: 16px;
}

#premium_first_view_register {
    margin-bottom: 8px;
    text-align: center;
}

.premium-button {
    width: 240px;
    font-size: 14px;
    font-weight: bold;
    line-height: 32px;
}

.premium-hero .premium-button {
    border: 4px solid #fff;
}

.premium-hero-image {
    width: 500px;
    height: 294px;
    background-image: url(/img/premium-top-image.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.premium-section-header {
    margin: 0;
    padding: 48px 0;
    font-size: 20px;
    text-align: center;
}

.premium-features-container {
    width: 940px;
    margin: 28px auto 40px;
}

.premium-features-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.premium-features-row:first-child {
    margin-bottom: 86px;
}

.premium-feature {
    width: 256px;
}

.premium-feature h3 {
    margin: 24px 0 16px;
}

.premium-feature .premium-feature-desc {
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.6;
}

.premium-bottom-buttons {
    box-sizing: border-box;
    padding: 16px 0;
    text-align: center;
}

.premium-bottom-buttons > a:first-child {
    margin-right: 16px;
}

.premium-features-table {
    margin-bottom: 10px;
    font-size: 14px;
}

.premium-features-table th {
    box-sizing: border-box;
    text-align: center;
    width: 195px;
}

.premium-features-table td {
    box-sizing: border-box;
    height: 36px;
    text-align: center;
}

.premium-features-table th.feature-col {
    width: 310px;
}

.premium-features-table td.feature-col {
    text-align: left;
}

td.all-user {
}

td.premium-only {
    border-left: 4px solid #f39800;
}

.premium-bottom-notices {
    margin-top: 32px;
    text-align: center;
    font-size: 14px;
    color: #323135;
}

#go_to_login_or_signup_before_premium {
    padding: 32px;
    border: 1px solid #ddd;
    margin: 24px 0;
    background: #f7f7f7;
}

#go_to_login_or_signup_before_premium h3 {
    margin: 0 0 16px;
}

#go_to_login_or_signup_before_premium a.btn {
    width: 150px;
    line-height: 24px;
}

#go_to_login_or_signup_before_premium a.btn:first-child {
    margin-right: 16px;
}

.premium-card-brands {
    margin-bottom: 32px;
    font-size: 11px;
    color: #aaa;
    text-align: center;
}

.premium-card-brands > ul {
    margin: 8px 0 0 0;
    padding: 0;
    list-style: none;
}

.premium-card-brands > ul > li {
    display: inline;
    margin-right: 8px;
}
.premium-card-brands > ul > li:last-child {
    margin-right: 0;
}

.no-credit-card {
    box-sizing: border-box;
    padding: 16px;
    border: 4px solid #eee;
    width: 635px;
    margin: 0 auto 16px;
    text-align:left;
}

.no-credit-card p:last-child {
    margin-bottom: 0;
}

.premium-already-registered-bottom {
    margin: 32px 0 16px;
    text-align: center;
}

.premium-for-business-user {
    margin: 32px 0 48px;
    text-align: center;
}

/** premium/upgrade **/

.premium-upgrade-message-area {
    margin: 0 auto 64px;
}

.premium-upgrade-message-area > .thanks-message {
    margin: 0 auto;
    max-width: 450px;
    padding: 40px 24px 0;
}

.premium-upgrade-message-area h2.thanks-message-header {
    margin: 0 0 16px;
    font-size: 32px;
    text-align: center;
    line-height: 1.5;
}

.premium-upgrade-message-area.bordered > .thanks-message p {
    font-size: 16px;
    line-height: 1.8;
}

.premium-upgrade-message-area.bordered > .thanks-message > .thanks-message-mail-part {
    margin: 24px 0;
    padding: 12px 16px 16px;
    border-radius: 8px;
    border: 2px solid rgba(127, 127, 127, 0.3);
}

.premium-upgrade-message-area.bordered > .thanks-message > .thanks-message-mail-part > p {
    margin: 0 0 12px;
    font-size: 13px;
}

.premium-upgrade-message-area.bordered > .thanks-message > .thanks-message-mail-part > .thanks-message-mail-register {
    margin: 0;
    text-align: center;
}

.premium-upgrade-message-area.bordered > .thanks-message > .thanks-message-mail-part label {
    margin: 0;
}

.premium-upgrade-message-area > .thanks-message > .go-to-lesson {
    margin-top: 25px;
    text-align: center;
}

.premium-upgrade-message-area.bordered > .thanks-message > .go-to-lesson {
    margin-top: 24px;
}

.premium-upgrade-message-area > .thanks-message #go_back_to_after_upgrade {
    width: 165px;
}

.premium-upgrade-message-area.bordered > .thanks-message #go_back_to_after_upgrade {
    width: 196px;
}

.premium-upgrade-message-area #receive_mail_magazine_ajax_loader {
    display: none;
    width: 12px;
    height: 12px;
    vertical-align: text-top;
}

.premium-upgrade-message-area #receive_mail_magazine {
    margin-top: -3px;
}

.premium-upgrade-message-area #receive_mail_magazine_done {
    visibility: hidden;
}

.premium-upgrade-message-area #receive_mail_magazine_done.visible {
    visibility: visible;
}

.premium-upgrade-message-area .symbolContainer {
    display: none;
}

/* medium screen */
@media (min-width: 696px) {
    .premium-upgrade-message-area {
        margin: 36px auto 72px;
    }

    .premium-upgrade-message-area .symbolContainer-SP {
        display: none;
    }

    .premium-upgrade-message-area .symbolContainer {
        display: block;
        position: relative;
        margin: 40px auto 0;
        background: #fff2db;
        height: 496px;
        overflow: hidden;
        width: 656px;
        border-radius: 16px;
        animation: premium-upgrade-background 1s 2.6s;
    }

    .premium-upgrade-message-area .symbol {
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        height: 56px;
        width: 56px;
    }

    .premium-upgrade-message-area .lock {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-20px, -20px);
        width: 40px;
        animation: premium-upgrade-fade .3s forwards 2.6s;
    }

    .premium-upgrade-message-area .key {
        position: absolute;
        left: 50%;
        transform: translate(-23px, 16px);
        width: 40px;
        animation: premium-upgrade-display 1s forwards,
            premium-upgrade-translate 1s forwards 1s,
            premium-upgrade-fade .3s forwards 2.6s;
    }

    .premium-upgrade-message-area .ripple {
        width: 120px;
        height: 120px;
        background: #ffffff;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-60px, -60px) scale(0);
        animation: premium-upgrade-ripple .8s 2.6s;
        opacity: 0;
    }
}


@keyframes premium-upgrade-background {
    0% {
        background: #fff2db;
    }

    50% {
        background: #fff7e7;
    }

    100% {
        background: #fff2db;
    }
}

@keyframes premium-upgrade-fade {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes premium-upgrade-display {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes premium-upgrade-translate {
    0% {
        top: 0;
        left: 50%;
        transform: translate(-23px, 16px);
    }

    100% {
        top: 50%;
        left: 50%;
        transform: translate(-23px, -8px);
    }
}

@keyframes premium-upgrade-ripple {
    0% {
        transform: translate(-60px, -60px) scale(0);
        opacity: .6;
    }

    50% {
        transform: translate(-60px, -60px) scale(1);
    }

    100% {
        transform: translate(-60px, -60px) scale(1);
        opacity: 0;
    }
}

/** // premium/upgrade **/

/* search */
.search-type-box {
    border-top: 1px solid #eee;
}

.search-type-box ul {
    margin: 0;
}

.search-type-box li {
    font-size: 14px;
    margin-top: 0;
    padding: 8px 4px;
    border-bottom: 1px solid #eee;
}

.search-type-box i {
    display: inline-block;
    margin-left: 4px;
    width: 20px;
    font-size: 13px;
}

.search-type-list {
    list-style: none;
    margin: 0 0 0 4px;
}

.search-type-list a {
    display: block;
    width: 100%;
    height: 100%;
    color: #0088cc;
}

.search-type-list a i {
    color: #4799c1;
}

.search-type-list a.on {
    color: #666;
    font-weight: bold;
}

.search-type-list a.on i {
    color: #666;
    font-weight: normal;
}

.search-type-list .hit-count {
    display: inline-block;
    padding: 0 6px;
    background: #f3f3f3;
    font-weight: bold;
    color: #999;
    border-radius: 4px;
    font-size: 12px;
}

.search-type-list a.on .hit-count {
    color: #fff;
    background: #4799c1;
}

/* lesson search */
.lesson-search-result-intro {
    font-size: 13px;
    font-weight: normal;
    margin: 12px 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}

.lesson-search-result {
    overflow: hidden;
    padding-bottom: 26px;
}

.lesson-search-result .left-thumbnail {
    float: left;
    position: relative;
    text-align: center;
}

.lesson-search-result .left-thumbnail.search-result-package {
    width: 64px;
    margin-left: 24px;
    margin-right: 24px;
}

.lesson-search-result .left-thumbnail.search-result-movie {
    width: 96px;
    margin-right: 16px;
}

.lesson-search-result .right-detail {
    float: left;
    width: 512px;
    margin-right: 16px;
}

.lesson-search-result .right-detail h3 {
    margin: 0;
    font-size: 14px;
}

.lesson-search-result-description {
    font-size: 13px;
    margin-top: 6px;
}

.lesson-search-result-sub-header {
    padding: 12px 0px;
    font-size: 13px;
}

.lesson-search-result-play {
    position: absolute;
    top: 20px;
    left: 40px;
}

/* transcript search */

.transcript-search-result {
    margin:0 0 24px 0;
}

.transcript-search-result-header {
    margin-bottom:4px;
}

.transcript-search-result-title {
    font-size: 14px;
}

.transcript-search-result-package {
    font-size: 12px;
}

.transcript-snippet {
    padding: 4px 0;
}

.transcript-snippet:hover {
    background: #fafafa;
}

.transcript-snippet > a {
    display: flex;
    text-decoration: none;
}

.transcript-snippet > a > .snippet-time {
    flex: 1;
    color: #c0c0c0;
}

.transcript-snippet:hover .snippet-time {
    color: #666;
}

.transcript-snippet > a > .snippet-body {
    flex: 20;
    color: #888;
}

.snippet-body strong {
    color: #666;
}

/* faq search */

.faq-search-result {
    margin:0 0 24px 0;
}

.faq-search-result .q-list-icon {
    margin-right: 12px;
}

.faq-search-result .faq-title {
    font-size: 14px;
}

.faq-search-result .q-list-desc {
    margin-top: 4px;
}

section.help-section {
    padding-top: 24px;
}

.help-main .page-header {
    margin-top: 24px;
}

.help-main img.shadow {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.help-screenshot-section {
    margin-bottom: 32px;
}

.help-screenshot-section h3.page-header {
    margin-bottom: 12px;
}

.help-screenshot-section img {
    margin-bottom: 12px;
}

.help-screenshot-section h4 {
    margin: 0 0 8px;
    font-size: 13px;
}

.help-screenshot-section ul {
    margin-bottom: 12px;
}

.screenshot-howto {
    margin-bottom: 12px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    background: #f6f6f6;
    padding: 12px;
}

ul.user-remove-notices {
    color: red;
    font-weight: bold;
}

ul.user-remove-notices > li {
    margin-bottom: 8px;
}

#top_social_btns {
    overflow: hidden;
}

/* lesson/diff */

#compare_source_area {
    display: flex;
    margin: 0 24px 16px;
}

#compare_source_results {
    display: flex;
    margin: 32px 32px 16px;
}

.compare-source {
    flex: 1;
    margin-bottom: 16px;
    position: relative;
}

.compare-source .compare-source-label {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #08c;
    color: white;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 0 4px 0 0;
}

#compare_source_results .compare-source {
}

.compare-source:first-child {
    margin-right: 48px;
}

.compare-source .compare-source-header {
    height: 36px;
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: normal;
}

.compare-source .compare-source-header.text-only {
    margin-top: 6px;
    margin-bottom: 2px;
}

.compare-source-editor {
    box-sizing: border-box;
    width: 100%;
    height: 180px;
    overflow: auto;
    border: 1px solid #ccc;
    background: #fff;
    font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
}

.di-feature-diff .diff {
    /*display: inline-block;*/
    padding: 0;
    margin: 2px 0;
    font-weight: bold;
    border: 1px solid #d92635;
    background: #fbe9eb;
}

#diff_double_byte_white_space .diff {
    transform: scale(0.8);
}

.di-feature-diff .diff.ascii {
    opacity: 0.5;
}

.double-byte-white-space {
    display: inline-block;
    transform: scale(0.7);
    background: rgba(217, 38, 53, .4);
    border: 1px solid #d92635;
    line-height: 0.96;
}

#compare_source_results .compare-source-editor {
    height: auto;
}

.di-feature-diff .diff_added,
.di-feature-diff .diff_removed {
    display: inline;
    width: auto;
}

#compare_source_select {
    width: 100%;
}

#compare_btn_wrapper {
    margin: 16px 0;
}

#compare_source_btn {
    width: 220px;
}

.diff-result-message {
    display: none;
    margin-top: 32px;
    text-align: center;
    font-size: 16px;
}

#diff_count {
    font-weight: bold;
}

#footer {
    border-top: 1px solid #e0e0e0;
    background-color: #f2f2f3;
    margin-top: 20px;
    font-size: 13px;
    padding: 64px 0;
    color: #323135;
}

#footer a {
    color: #323135;
}

#footer p.copyright {
    font-size: 12px;
    color: #cbcace;
    text-align: center;
    margin: 32px 0 0;
}

.footer-inner-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.footer-links-contents {
    display: flex;
    flex: 1;
    justify-content: space-between;
}

.footer-contents {
    flex: 1;
}

.footer-contents + .footer-contents {
    margin-left: 32px;
}

.footer-logo-contents {
    width: 256px;
    margin: 0 64px 32px 0;
}

.footer-logo {
    text-align: center;
}

.footer-logo p {
    text-align: left;
}

.footer-logo img {
    margin-bottom: 32px;
}

.footer-contents h3 {
    padding: 12px;
    border-bottom: 1px solid #cbcace;
    margin: 0 0 16px;
    font-size: 13px;
}

.footer-contents ul {
    margin: 0 0 32px 32px;
    padding: 0;
}

.footer-contents ul li + li {
    margin-top: 4px;
}

.container.wide .footer-contents,
.container.immersive .footer-contents {
    max-width: 320px;
}

#material.tab-pane,
#demo.tab-pane {
    margin-bottom: 16px;
}

.material-download-btn-layout {
    padding: 16px;
    text-align: center;
    background: #f2f2f3;
    border: 1px solid #cbcace;
    border-bottom: none;
}

.material-download-help {
    margin-top: 16px;
}

.material-download-help a {
    color: #646369;
    text-decoration: underline;
}

.materials + .explain_premium {
    margin: 16px 0;
    border-top: 1px solid #ddd;
}

#material .explain_premium {
    border-top: 1px solid #ddd;
}

.materials-preview-layout {
    display: flex;
    flex-wrap: wrap;
    padding: 8px;
    border: 1px solid #cbcace;
}

.material-item-layout {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 8px;
    text-align: center;
}

.material-item {
}

.material {
    border: 1px solid #f2f2f3;
    display: flex;
    align-items: center;
    background-repeat: no-repeat;
    background-position: center;
    justify-content: center;
}
.material.large-image {
    background-size: contain;
}

.material > i {
    font-size: 48px;
    color: #f2f2f3;
}

.material-filename-layout {
    margin-top: 4px;
    text-align: center;
}

.material-filename {
    color: #98969c;
}

/* exercises */
#main_contents.exercise {
    box-sizing: border-box;
    padding: 0 8px;
}

.exer-explain-header {
    box-sizing: border-box;
    min-height: 280px;
    padding: 16px;
    margin-bottom: 24px;
    background-image: url(/img/ex_banner.png);
    background-position-x: 50%;
    background-position-y: 20%;
    background-color: #f2f2f3;
    position: relative;
    color: #fff;
}

.exer-explain-header a.close {
    opacity: 1;
    color: #fff;
}

.exer-explain-header-inner {
    padding: 44px 0;
    text-align: center;
}

.exer-explain-header-inner i {
    font-size: 48px;
    margin-bottom: 10px;
    color: #fff;
}

.exer-container {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #ddd;
}

.exer-icon {
    flex: 0 64px;
    margin: 0 12px 0 0;
    text-align: center;
}

.exer-avator-icon {
    display: block;
    width: 44px;
    height: 44px;
    margin: 0 auto 4px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-size: 44px 44px;
}

.exer-icon-easy .exer-avator-icon {
    background-image: url(/img/ex_easy.png);
}
.exer-icon-normal .exer-avator-icon {
    background-image: url(/img/ex_normal.png);
}
.exer-icon-hard .exer-avator-icon {
    background-image: url(/img/ex_hard.png);
}

.exer-difficulty {
    border-radius: 4px;
    color: #fff;
    font-size: 10px;
    margin: 0 auto;
    padding: 2px 5px;
}

.exer-icon-easy .exer-difficulty {
    background: #00ca4d;
}
.exer-icon-normal .exer-difficulty {
    background: #ffac00;
}
.exer-icon-hard .exer-difficulty {
    background: #dc4a05;
}

.exer-contents {
    flex: 1;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.exer-title {
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
    line-height: 1.6;
    font-size: 16px;
    font-weight: bold;
}

.exer-answer-container {
    margin-left: 76px;
    padding-bottom: 24px;
}

#exer_explanation .exer-answer-container {
    margin-right: 76px;
}

#exer_answer_form.exer-answer-container > .flex {
    flex-direction: row-reverse;
}

#exer_answer_form.exer-answer-container .exer-icon {
    margin: 0 0 0 12px;
}

#exer_try_histories > .exer-answer-container:nth-child(odd) {
    margin-left: 76px;
    margin-right: 0;
}

#exer_try_histories > .exer-answer-container:nth-child(even) {
    margin-left: 0;
    margin-right: 76px;
}

#exer_try_histories > .exer-answer-container:nth-child(odd) > .flex {
    flex-direction: row-reverse;
}

#exer_try_histories > .exer-answer-container:nth-child(odd) .exer-icon {
    margin: 0 0 0 12px;
}

#exer_try_histories > .exer-answer-container:nth-child(even) .exer-icon {
    margin: 0 12px 0 0;
}

.exer-form {
    float: left;
    box-sizing: border-box;
    border-radius: 4px;
    position: relative;
    width: 100%;
    border: 1px solid #ccc;
}

.exer-form::before {
    content: "";
    position: absolute;
    top: 14px;
    left: -9px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 8px 8px 8px 0;
    border-color: transparent #ccc transparent transparent;
    z-index: 1;
}

.exer-form::after {
    content: "";
    position: absolute;
    top: 14px;
    left: -7px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 8px 8px 8px 0;
    border-color: transparent #f8f8f8 transparent transparent;
    z-index: 2;
}

#exer_answer_form.exer-answer-container .exer-form::before,
#exer_try_histories > .exer-answer-container:nth-child(odd) .exer-form::before {
    left: auto;
    right: -9px;
    border-width: 8px 0 8px 8px;
    border-color: transparent transparent transparent #ccc;
}

#exer_answer_form.exer-answer-container .exer-form::after,
#exer_try_histories > .exer-answer-container:nth-child(odd) .exer-form::after {
    left: auto;
    right: -7px;
    border-width: 8px 0 8px 8px;
    border-color: transparent transparent transparent #fff;
}

#exer_answer_form.exer-answer-container .exer-form::after {
    border-color: transparent transparent transparent #f8f8f8;
}

#exer_try_histories > .exer-answer-container:nth-child(even) .exer-form::after {
    border-color: transparent #fff transparent transparent;
}

#exer_explanation .exer-form::before,
#exer_explanation .exer-form::after {
    border: none;
}

.exer-choice-created-at {
    clear: both;
    padding-top: 4px;
    color: #aaa;
    font-size: 12px;
    text-align: right;
}

#exer_try_histories > .exer-answer-container:nth-child(even) .exer-choice-created-at {
    text-align: left;
}

.exer-form-header {
    margin: 0;
    background: #f8f8f8;
    padding: 10px 16px;
    border-radius: 4px 4px 0 0;
    border-bottom: 1px solid #ccc;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.6;
    color: #767676;
}

.exer-form-body {
    padding: 16px;
}

.exer-form-body *:last-child {
    margin-bottom: 0;
}

.exer-submit .btn-success {
    padding: 6px 18px;
}

.exer-answer-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    font-size: 14px;
}

.exer-answer-list > li {
    margin-bottom: 12px;
}

.exer-answer-list > li > label {
    display: flex;
    line-height: 1.6;
}

.exer-answer-list > li > label > input[type="radio"],
.exer-answer-list > li > label > input[type="checkbox"] {
    flex: 0 32px;
}

.exer-answer-list > li > label > .exer-answer-list-choice {
    flex: 1;
}

textarea.exer-free-answer {
    box-sizing: border-box;
    margin: 0;
    width: 100%;
    height: 128px;
    padding: 8px;
    font-size: 14px;
    line-height: 1.5;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom: none;
    margin-bottom: 0;
}

.exer-file-drop-zone {
    text-align: center;
    border: 1px dashed #ccc;
    margin-bottom: 15px;
    background: #f8f8f8;
}

.exer-file-drop-zone a {
    display: block;
    padding: 80px 0;
}

ul.exer-list {
    margin: 0;
    padding: 15px;
    list-style: none;
    font-size: 12px;
}

ul.exer-list > li {
    padding: 4px 0;
    margin-bottom: 7px;
}

ul.exer-lessons-list {
    margin: 0;
    list-style: none;
}

ul.exer-lessons-list > li {
    padding: 12px 12px 0;
    line-height: 18px;
}

ul.exer-lessons-list > li:last-child {
    padding-bottom: 12px;
}

ul.exer-lessons-list > li > i.fa-play-circle {
    font-size: 16px;
    vertical-align: -2px;
    color: #aaa;
}

.typing-bubble {
    position: relative;
    width: 56px;
    height: 32px;
    line-height: 32px;
    border-radius: 16px;
    color: #fff;
    text-align: center;
    font-size: 10px;
    opacity: .5;
}

.exer-contents .typing-bubble {
    margin-top: -4px;
}

.typing-bubble .typing-bubble-tail {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: absolute;
    left: -2px;
    bottom: 1px;
}

.typing-bubble .typing-bubble-tail::after {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #efefef;
    position: absolute;
    left: -5px;
    bottom: -4px;
}

.exer-difficulty-easy .typing-bubble,
.exer-difficulty-easy .typing-bubble-tail,
.exer-difficulty-easy .typing-bubble-tail::after {
    background: #00ca4d;
}

.exer-difficulty-normal .typing-bubble,
.exer-difficulty-normal .typing-bubble-tail,
.exer-difficulty-normal .typing-bubble-tail::after {
    background: #ffac00;
}

.exer-difficulty-hard .typing-bubble,
.exer-difficulty-hard .typing-bubble-tail,
.exer-difficulty-hard .typing-bubble-tail::after {
    background: #dc4a05;
}

.typing-bubble .typing-dot-one {
    animation: typing-dot-one 1s ease-in-out infinite;
}

.typing-bubble .typing-dot-two {
    animation: typing-dot-two 1s ease-in-out infinite;
}

.typing-bubble .typing-dot-three {
    animation: typing-dot-three 1s ease-in-out infinite;
}

@keyframes typing-dot-one {
  0% {
    opacity: .8;
  }
  33.333% {
    opacity: 1;
  }
  66.6667% {
    opacity: .8;
  }
  100% {
    opacity: .8;
  }
}

@keyframes typing-dot-two {
  0% {
    opacity: .8;
  }
  33.333% {
    opacity: .8;
  }
  66.6667% {
    opacity: 1;
  }
  100% {
    opacity: .8;
  }
}

@keyframes typing-dot-three {
  0% {
    opacity: .8;
  }
  33.333% {
    opacity: .8;
  }
  66.6667% {
    opacity: .8;
  }
  100% {
    opacity: 1;
  }
}

.news-list-section {
    margin: 44px 0 64px;
}

.news-list-header-title {
    padding-bottom: 12px;
    border-bottom: 1px solid #cbcace;
    font-size: 13px;
    font-weight: bold;
}

.news-list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

.news-list > .news-list-item {
    display: flex;
    align-items: center;
    padding: 16px 0;
}

.news-list > .news-list-item + .news-list-item {
    border-top: 1px solid #f2f2f3;
}

.news-list > .news-list-item::before {
    display: block;
    content: '';
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
    background-size: cover;
}

.news-list > .news-list-item.news-category-others::before {
    background-image: url(/img/news/dotinstall.png);
}

.news-list > .news-list-item.news-category-lessons::before {
    background-image: url(/img/news/video.png);
}

.news-list > .news-list-item.news-category-event::before {
    background-image: url(/img/news/smile.png);
}

.news-list > .news-list-item.news-category-features::before {
    background-image: url(/img/news/twinkle.png);
}

.news-list > .news-list-item.news-category-others::before {
    background-image: url(/img/news/dotinstall.png);
}

.news-list > .news-list-item.news-category-256times::before {
    background-image: url(/img/news/256times.png);
}

.news-list > .news-list-item.news-category-weekly::before {
    background-image: url(/img/news/note.png);
}

.news-list > .news-list-item > .news-date {
    flex: 0 0 76px;
    color: #98969c;
    margin-left: 16px;
}

.news-list > .news-list-item > .news-title {
    flex: 1;
    margin-left: 16px;
}

.news-list > .news-list-item > .news-title > img.news-new {
    margin-left: 16px;
}

.news-list img {
    vertical-align: bottom;
}

span.news-new {
    padding: 0 4px;
    border-radius: 2px;
    background: #e83040;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
}

#news-body {
    margin-top: 24px;
    min-height: 320px;
    font-size:  14px;
}

#news-body ul {
    margin-top: 32px;
    margin-bottom: 32px;
}

/* Side Editor */

.ace_editor {
    font-family: Menlo, Monaco, "Ubuntu Mono", Consolas, source-code-pro, "Hiragino Sans", Meiryo, "Courier New", Arial, "Helvetica Neue", Helvetica monospace;
}

.ace-chrome .ace_invisible {
    color: #ebebeb;
}

.ace_cjk.ace_invisible_space {
    background: #f7d4d7;
    color: #eaaeb3;
}

#side_editor_intro_mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(203, 202, 206, 0.698);
    z-index: 53;
}

#side_editor_intro_modal {
    position: absolute;
    top: 50%;
    left: 32px;
    right: 32px;
    transform: translateY(-50%);
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#side_editor_intro_modal h3 {
    margin: 0;
    padding: 20px 16px 0;
    font-weight: normal;
    font-size: 16px;
}

#side_editor_intro_modal_body {
    padding: 16px;
}

#side_editor_intro_modal_footer {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 5px;
}

#side_editor_intro_modal_footer button {
    width: 160px;
}

#side_editor_diff_modal_mask {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1031; /* Bootstrap .navbar-fixed-top z-index is 1030 */
    background:rgba(50, 49, 53, .5);
}

#side_editor_diff_modal {
    position: absolute;
    top: 50%;
    left: 32px;
    right: 32px;
    transform: translateY(-50%);
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#side_editor_diff_modal h3 {
    margin: 0;
    padding: 14px;
    font-size: 14px;
    background: #f2f2f3;
}

#side_editor_diff_modal_body {
    padding: 24px 32px;
}

#side_editor_diff_modal_desc {
    margin-bottom: 24px;
    font-size: 13px;
}

#side_editor_diff_modal_desc .red {
    color: red;
    font-weight: normal;
}

#side_editor_diff_modal_codes {
    display: flex;
    justify-content: space-between;
    margin-bottom: 32px;
}

#side_editor_diff_modal_codes .compare-code-wrapper {
    position: relative;
    width: calc((100% - 32px) / 2);
    min-height: 64px;
}

#side_editor_diff_modal_codes .compare-code {
    background: #f2f2f3;
    border: 1px solid #cbcace;
    overflow: scroll;
}

#side_editor_diff_modal_codes .compare-code pre {
    border: none;
}

#side_editor_diff_modal_codes .compare-source-label {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 12px;
    background: #98969c;
    color: #fff;
    padding:6px 8px;
}

#side_editor_diff_modal_footer {
    text-align: right;
}

#side_editor_diff_modal_footer button {
    width: 140px;
}

#side_tab_container {
    min-height: 160px;
}

#side_tab_container_inner {
    overflow: hidden;
    position: relative;
}

.side-editor-component {
    box-sizing: border-box;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    background: #f2f2f3;
}

.side-editor-component + .side-editor-component {
    padding-bottom: 10px;
}

#side_editor_footer {
    overflow: hidden;
    border-left: 1px solid #cbcace;
    border-right: 1px solid #cbcace;
    border-bottom: 1px solid #cbcace;
    background: #ebebeb;
    padding: 8px 12px;
}

#editor_run_btn {
    float: right;
    font-size: 12px;
}

#editor_run_btn .fa-play {
    font-size: 13px;
    margin-right: 3px;
}

#editor_reset_btn {
    font-size: 12px;
}

#editor_reset_btn .fa-undo {
    font-size: 13px;
    margin-right: 3px;
}

#editor_compare_btn {
    font-size: 12px;
}

#editor_compare_btn .fa-clone {
    font-size: 13px;
    margin-right: 3px;
}

#side_editor_tabs_scroll {
    position: relative;
    height: 39px;
    margin-left: 39px;
    overflow: hidden;
    z-index: 1;
}

.tab-scroll {
    display: none;
    position: absolute;
    top: 0;
    box-sizing: border-box;
    padding: 10px 6px 9px;
    background: #f2f2f3;
    border-top: 1px solid #cbcace;
    border-left: 1px solid #cbcace;
    border-right: 1px solid #cbcace;
    border-bottom: 1px solid #ddd;
    color: #555558;
    cursor: pointer;
}

.tabs-scroll.scrollable .tab-scroll-right {
    display: inline-block;
}

.tab-scroll-left {
    left: 0;
}

.tabs-scroll.scrollable.scroll-start .tab-scroll-left {
    display: inline-block;
}

.tab-scroll-right {
    right: 0;
}

.tabs-scroll.scrollable.scroll-end .tab-scroll-right {
    display: none;
}

#side_editor_tabs {
    margin-bottom: 0;
}

#side_editor_tabs > li {
    border: 1px solid #cbcace;
    border-bottom: none;
}

/*
#side_editor_tabs > li#toggle_wrapper {
    border-color: transparent;
    width: 38px;
    height: 39px;
}
*/

#side_editor_tabs > li:not(:last-child) {
    border-right: none;
}

#side_editor_tabs > li > a {
    margin: 0;
    border: none;
    border-radius: 0;
    color: #aaa;
}

/*
#side_editor_tabs > li#toggle_wrapper > a {
    margin: 6px 6px;
    padding: 4px 6px;
    color: #646369;
    opacity: 0;
}

#side_editor_tabs > li#toggle_wrapper > a:hover {
    border-radius: 50%;
    background: #cbcace;
    transition: background .2s ease-out;
}
*/

#side_editor_tabs > li.active > a {
    color: #333;
}

#side_editor_tabs a.tab-scroll {
    padding-left: 4px;
    padding-right: 4px;
}

#side_editor_tab_content {
    box-sizing: border-box;
    position: relative;
    border: 1px solid #cbcace;
    margin-top: -1px;
    background: #fff;
}

.side-editor {
    width: 100%;
}

#side_bottom_wrapper {
    min-height: 136px;
}

#side_preview_container,
#side_terminal_container {
    box-sizing: border-box;
    border: 1px solid #ccc;
    height: 100%;
}

#side_preview_header,
.side-terminal-header {
    position: relative;
    box-sizing: border-box;
    font-size: 13px;
    margin: 0;
    padding: 10px 12px 8px;
    border-bottom: 1px solid #ccc;
}

.side-terminal-header .di-icon.di-icon-abs-right {
    top: 3px;
    right: 3px;
}

.side-terminal-help-icon {
    margin-left: 4px;
    color: #323135;
    font-size: 14px;
}

.side-terminal-help-icon:focus,
.side-terminal-help-icon:hover {
    color: #323135;
    outline: none;
}

.side-preview-disabled #side_preview_header {
    color: #ccc;
}

#side_preview_header > #side_preview_link {
    float: right;
    color: inherit;
}

#side_preview {
    box-sizing: border-box;
    display: none;
    position: relative;
    width: 100%;
    background: #fff;
}

#side_preview.loading {
    opacity: 0.8;
}

.side-preview-disabled #side_preview {
    background: #f2f2f3;
}

#side_preview.active {
    display: block;
}

#side_preview.markdown-body {
    padding: 8px;
    overflow: scroll;
}

#side_preview iframe {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: none;
    background: #fff;
}

#side_preview_refresh {
    position: absolute;
    top: 18px;
    right: 24px;
    cursor: pointer;
}

#side_preview_refresh.disabled {
    color: #aaa;
    cursor: auto;
}

.side-preview-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #666;
    display: none;
}

.side-preview-loading.show {
    display: block;
}

#side_editor_memo {
    height: 100%;
}

@keyframes saving-show {
    0% {
        opacity: 0;
        transform: scale(0.8);
        visibility: visible;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        opacity: 1;
        transform: none;
        visibility: visible;
    }
}
@keyframes saving-hide {
    0% {
        opacity: 1;
        visibility: visible;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}
.side-editor-saving {
    animation-fill-mode: forwards;
    bottom: 16px;
    color: hsla(255, 3%, 40%, 0.5);
    font-size: 1rem;
    opacity: 0;
    position: absolute;
    right: 16px;
    transition: opacity 0.2s ease-out;
    visibility: hidden;
    z-index: 1;
}

.side-editor-saving.in-scrollable {
    right: 32px;
}

.side-editor-saving.saving-show {
    animation-duration: 0.3s;
    animation-name: saving-show;
}
.side-editor-saving.saving-hide {
    animation-duration: 0.3s;
    animation-name: saving-hide;
}

@keyframes saved-show {
    0% {
        opacity: 0;
        transform: translateY(8px);
        visibility: visible;
    }
    75% {
        transform: translateY(-2px);
    }
    100% {
        opacity: 0.95;
        transform: none;
        visibility: visible;
    }
}
@keyframes saved-hide {
    0% {
        opacity: 1;
        visibility: visible;
    }
    100% {
        opacity: 0;
        transform: translateY(8px);
        visibility: hidden;
    }
}
.side-editor-saved {
    animation-fill-mode: forwards;
    background-color: hsl(200, 100%, 95%);
    border: hsl(200, 100%, 90%) solid 1px;
    bottom: 16px;
    color: hsl(200, 85%, 20%);
    font-size: 13px;
    padding: 4px 8px;
    position: absolute;
    right: 16px;
    visibility: hidden;
    z-index: 1;
}

.side-editor-saved.in-scrollable {
    right: 32px;
}

.side-editor-saved.saved-show {
    animation-duration: 0.3s;
    animation-name: saved-show;
    animation-timing-function: ease-out;
}
.side-editor-saved.saved-hide {
    animation-duration: 0.3s;
    animation-name: saved-hide;
    animation-timing-function: ease-out;
}

.side-editor-ws-closed {
    position: absolute;
    bottom: 16px;
    right: 16px;
    font-size: 11px;
    padding: 4px 8px;
    background-color: hsl(10, 100%, 95%);
    border: hsl(10, 100%, 90%) solid 1px;
    visibility: hidden;
}

.side-editor-ws-closed.show {
    visibility: visible;
}

.news-in-editor-view {
    padding: 10px 10px 0;
    background: #f2f2f3;
}

.news-in-editor-view .sbox {
    background: #fff;
}

.news-in-editor-view #side_news_header,
.news-in-editor-view #toggle_side_news_body,
.news-in-editor-view #side_news_more {
    display: none;
}

.news-in-editor-view #side_news_close {
    display: block;
    float: right;
    font-size: 16px;
    color: #aaa;
    padding: 10px 12px 0 0;
    cursor: pointer;
}

.news-in-editor-view .sboxInner {
    display: flex;
    justify-content: space-between;
}

.side-news-label {
    display: none;
}

.news-in-editor-view .side-news-label {
    display: table-cell;
}

.side-news-date-right {
    display: none;
}

.news-in-editor-view .side-news-date-left {
    display: none;
}

.news-in-editor-view .side-news-date-right {
    display: inline;
    font-size: 12px;
    color: #aaa;
}

#side_editor_explorer_mask {
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5; /* .ace_gutter z-index + 1 */
    background: #f2f2f3;
    opacity: 0.7;
    display: none;
}

.explorer-open #side_editor_explorer_mask {
    display: block;
}

#side_editor_explorer_menu_when_closed {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 7; /* #side_editor_explorer z-index + 1 */
    box-sizing: border-box;
    width: 31px;
    height: 31px;
    margin: 4px;
    line-height: 31px;
    color: #646369;
    text-align: center;
}

.explorer-open #side_editor_explorer_menu_when_closed {
    display: none;
}

#side_editor_explorer_menu_when_closed:hover {
    border-radius: 50%;
    background: #cbcace;
    transition: background .2s ease-out;
}

#toggle_side_editor_explorer {
    display: inline-block;
    width: 100%;
    height: 100%;
    color: #646369;
}

#side_editor_explorer {
    position: absolute;
    top: 0;
    left: -30px;
    background: #fff;
    min-width: 200px;
    border: 1px solid #cbcace;
    z-index: 6; /* #side_editor_explorer_mask z-index + 1 */
    opacity: 0;
    transition: .2s;
    pointer-events: none;
}

#side_editor_explorer.open {
    left: 0;
    opacity: 1;
    display: block;
    transition: left .4s, opacity .4s;
    pointer-events: auto;
}

#side_editor_explorer_header {
    box-sizing: border-box;
    background: #cbcace;
    color: #323135;
    font-weight: bold;
    height: 38px;
    display: flex;
}

#side_editor_explorer_header > :first-child {
    padding: 0 16px;
}

#side_editor_explorer_header > span {
    flex: 1;
}

#side_editor_explorer_header > :last-child {
    padding: 0 16px;
}

#side_editor_explorer_header > * {
    display: inline-block;
    height: 100%;
    line-height: 38px;
}

#side_editor_explorer_menu,
#side_editor_explorer_close {
    cursor: pointer;
}

#side_editor_explorer_body {
    height: calc(100% - 38px);
    overflow-y: scroll;
    margin-left: 0;
    opacity: 1;
}

#side_editor_explorer_body ul {
    list-style: none;
    margin: 0;
}

#side_editor_explorer_body > ul {
    margin: 16px 16px 12px;
}

#side_editor_explorer_body ul > li {
    margin: 0 0 4px;
    color: #646369;
    font-size: 0;
}

#side_editor_explorer_body ul > li[data-children="1"] {
    margin-left: 20px;
}

#side_editor_explorer_body > ul > li[data-children="1"] {
    margin-left: 0;
}

#side_editor_explorer_body ul > li > .se-file-icon {
    display: inline-block;
    width: 20px;
    font-size: 13px;
}

#side_editor_explorer_body ul > li > .se-filename {
    display: inline-block;
    font-size: 13px;
}

/* Forum */

input#thread_title {
    box-sizing: border-box;
    width: 100%;
    height: 32px;
}

textarea#thread_body {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 180px;
}

input#thread_slug {
    margin-right: 2px;
}

.forum-title {
    margin: 0 0 16px;
    font-size: 22px;
    line-height: 1.6;
}

.forum-explain {
    margin: 48px 0;
}

.forum-body {
    max-width: 696px;
    border: 1px solid #eee;
    padding: 12px;
    border-radius: 4px;
}

textarea#forum_comment_body {
    box-sizing: border-box;
    width: 100%;
    height: 128px;
    margin-bottom: 0;
    padding: 8px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom: none;
    font-size: 14px;
}

.forum-teachers-list {
    list-style: none;
    margin: 0;
}

.forum-teachers-list > li {
    margin-bottom: 8px;
}

.forum-teachers-list > li:last-child {
    margin: 0;
}

.forum-thread,
.forum-comment {
    margin: 0 0 16px;
    padding: 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.forum-thread-header,
.forum-comment-header {
    font-size: 14px;
    margin: 0 0 16px;
    padding-bottom: 4px;
    border-bottom: 1px solid #eee;
}

.forum-thread-footer {
    text-align: right;
}

.forum-comment-footer {
    margin-top: 16px;
    /*padding-top: 8px;*/
    padding-top: 12px;
    border-top: 1px solid #eee;
    font-size: 12px;
    overflow: hidden;
}

.forum-comment-like {
    display: inline-block;
    margin-right: 8px;
    /*padding: 4px 8px;*/
    color: #666;
    font-weight: bold;
    cursor: pointer;
}

.forum-comment-like:hover {
    /*background: rgba(243, 152, 0, 0.06);*/
}

.forum-comment-by-markdown {
    float: right;
}

.forum-comment-by-markdown.on > .when-on {
    display: inline;
}

.forum-comment-by-markdown.on > .when-off {
    display: none;
}

.forum-comment-delete {
    float: right;
    margin-left: 16px;
}

textarea.markdown-text {
    display: none;
    box-sizing: border-box;
    width: 100%;
    height: 280px;
    font-size: 14px;
}

#forum_comment_error {
    margin-top: 8px;
}

.teachers-manual {
    max-width: 700px;
    padding: 16px;
    font-size: 14px;
}

.teachers-manual li {
    line-height: 1.8;
}

.liked {
    color: #f39800;
}

.likes-count {
    color: #f39800;
}

.click-to-mention {
    cursor: pointer;
}

.suggester-container {
    position: absolute;
    top: 0;
    left: 0;
}

.suggester-container > .suggester-list {
    position: absolute;
    list-style: none;
    margin: 22px 0 0 2px;
    padding: 0;
    z-index: 1;
    box-shadow: 0 0 2px 2px rgba(127, 127, 127, 0.1);
}

.suggester-container > .suggester-list > li {
    padding: 4px 8px;
    background: #fff;
    font-weight: bold;
    font-size: 14px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}

.suggester-container > .suggester-list > li.selected {
    background: #08c;
    color: #fff;
}

.user-settings {
    min-height: 400px;
}

.user-settings .open-lesson-history input[type="radio"] {
    margin-top: 2px;
}

.user-settings p {
    margin-bottom: 16px;
}

#terminal_wrapper {
    box-sizing: border-box;
    width: 100%;
    height: 322px;
    background: #000;
    position: relative;
}

#terminal_now_connecting,
#terminal_connecting_error_no_cookie {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 96px;
    text-align: center;
    margin: auto;
    font-size: 64px;
    color: rgba(255, 255, 255, 0.8);
}
#terminal_now_connecting span {
    font-size: 24px;
}
#terminal_connecting_error_no_cookie {
    padding: 64px;
    font-size: 14px;
    text-align: left;
}

#terminal_config_layout {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: rgba(50, 49, 53, .9);
    opacity: 0;
    transition: opacity .4s;
}

#terminal_config_layout.show {
    display: block;
}

#terminal_config_layout.show.animate {
    opacity: 1;
}

#terminal_config {
    box-sizing: border-box;
    width: calc(100% - 64px);
    max-width: 320px;
    margin: 32px auto;
    background: #f2f2f3;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.1);
    color: #323135;
}

.terminal-config-header {
    position: relative;
    margin: 0;
    padding: 12px 16px;
    border-bottom: 1px solid #cbcace;
    line-height: 1.6;
    font-size: 13px;
}

.terminal-config-header .di-icon.di-icon-abs-right {
    top: 6px;
    right: 6px;
}

.terminal-config-body {
    padding: 16px;
}

.terminal-config-notice {
    margin: 8px 0 0;
    font-size: 11px;
}

#terminal_wrapper .terminal {
    box-sizing: border-box;
    width: 100%;
    border: 0;
}

#volume_alert_mask {
    position: absolute;
    width: 100%;
    padding-top: 56.25%;
    top: 0;
    z-index: 3;
    background-color: rgba(0, 0, 0, 0.8);
    cursor: pointer;
}

#volume_alert {
    box-sizing: border-box;
    width: 440px;
    height: 212px;
    padding: 12px 14px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 3;
    color: #004466;
    background: #e5f6ff;
    cursor: auto;
}

#volume_alert .close {
    color: #004466;
    opacity: 0.3;
    cursor: pointer;
}

#volume_alert .volume-alert-icon {
    margin: 32px 24px;
    font-size: 64px;
    color: #b4e5fd;
}

#volume_alert .volume-alert-body {
    box-sizing: border-box;
    width: 320px;
    height: 100%;
    padding-top: 32px;
    padding-right: 16px;
    box-sizing: border-box;
}

#volume_alert .volume-alert-header {
    font-size: 14px;
    margin: 0 0 8px;
}

#volume_alert .volume-alert-header .volume-alert-icon {
    display: none;
}

#volume_alert .volume-alert-close-btn {
    margin-top: 16px;
}

#volume_alert .volume-alert-close-btn .btn {
    width: 180px;
}

#volume_alert .volume-alert-hide-check {
    font-size: 12px;
}

#volume_alert .volume-alert-hide-check input[type="checkbox"] {
    vertical-align: 0;
    margin-right: 4px;
}

.explain-premium-flat-bg {
    padding: 20px;
    margin: 0;
    border-bottom: none;
    overflow: hidden;
    text-align: center;
    background: #f2f2f3;
}

.explain-premium-flat-card {
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    padding: 30px 20px 20px;
    border: 1px solid #cbcace;
    background: #fff;
}

.explain-premium-flat-btn-area {
    margin-bottom: 9px;
    margin-top: 25px;
}

.explain-premium-flat-btn {
    display: inline-block;
    width: 100px;
    margin: 0 auto;
    border: 1px solid #08c;
    text-align: center;
    padding: 6px;
    border-radius: 4px;
    text-decoration: none;
}

.explain-premium-flat-btn:hover {
    text-decoration: none;
    background: rgba(0, 136, 204, 0.9);
    color: #fff;
    transition: .2s;
}

.explain-premium-flat-btn:focus {
    text-decoration: none;
}

.page-needs-login {
    padding: 240px 0;
    font-size: 16px;
    text-align: center;
}

#page_id_page_show .markdown-body li {
    line-height: 2;
}

.g_id_signin {
    margin: 0 auto;
    width: 191px;
}

#email-unsubscribe-done {
    min-height: 320px;
}

#email-unsubscribe-done ul {
    margin-top: 24px;
    margin-bottom: 24px;
}

#guide_toc {
    border: 1px solid rgba(0, 0, 0, 0.13);
    margin-bottom: 16px;
    padding: 16px;
}

#guide_toc ol {
    margin-bottom: 0;
    color: #333;
}

#guide_toc ol li {
    line-height: 1.6;
    font-size: 14px;
}

.guide-section {
    padding-top: 16px;
}

.responsive-iframe-16-9 {
    padding-bottom: 56.25%;
    height: 0;
    position: relative;
}

.responsive-iframe-16-9 iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

html.style-version-3 .scroll-tabs-container {
}

html.style-version-3 .scroll-tabs-container > ul {
    display: flex;
    margin-bottom: 16px;
}

html.style-version-3 .scroll-tabs-container > ul > li {
}

html.style-version-3 .scroll-tabs-container.overflowed li > a {
}

.vsc-controller {
    display: none;
}

/*html.style-version-3 .scroll-tabs-container::-webkit-scrollbar {
    display: none;
}*/

.business-feature-body {
    float: left;
    width: 670px;
}

.business-feature-body .price-revision {
    margin-top: 0;
}

.holiday-alert-layout {
    margin-bottom: 18px;
}
.holiday-alert-layout.cf-section {
    margin-bottom: 25px;
}

.terms-diff-table th.item {
    width: 100px;
    text-align: center;
}

.goodby-memo-notice {
    margin-bottom: 12px;
    padding: 16px;
    border-radius: 2px;
    background: #ffebec;
    font-size: 13px;
    color: #4d191e;
}

.goodby-memo-notice h4 {
    margin: 0 0 8px;
    font-size: 13px;
}

.goodby-memo-notice p {
    margin: 0;
}

.goodby-memo-notice i {
    color: #e83040;
}

.memo-export-read-only-notice {
    color: #e83040;
}

.memo-export-area {
    margin-bottom: 32px;
    background: #f2f2f3;
    color: #323135;
}

.memo-export-header {
    margin: 0;
    padding: 12px 16px;
    border-bottom: 1px solid #cbcace;
    font-size: 13px;
    font-weight: bold;
}

.memo-export-body {
    padding: 16px;
}

.memo-export-area form {
    margin: 0;
}

.memo-export-area p {
    margin-bottom: 16px;
}

.memo-export-area p:last-child {
    margin-bottom: 0;
}

#premium .row {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f2f2f3;
}

#premium .row.settings-toggle-row {
    padding: 0;
}

#premium .row.settings-toggle-row + .row {
    margin-top: 0;
}

#premium .row.settings-toggle-row > .span3 {
    padding: 16px 0;
}

.payment-history-help a + a {
    margin-left: 16px;
}

.payment-history-table {
    width: 100%;
    table-layout: fixed;
    margin-bottom: 16px;
    font-size: 13px;
}

.payment-history-table tr th {
    padding: 8px 16px;
    background: #f2f2f3;
    text-align: left;
    color: #646369;
}

.payment-history-table tr th.ph-terms {
    width: 240px;
}

.payment-history-table tr th.ph-amount {
    width: 72px;
}

.payment-history-table tr td {
    padding: 8px 16px;
    background: #fafafa;
    text-align: left;
}

.settings-toggle-buttons {
    cursor: pointer;
    padding: 16px 0;
}

.settings-toggle-buttons .fa-chevron-up {
    display: none;
}

.settings-toggle-target {
    display: none;
}

.settings-toggle-wrapper.open .fa-chevron-down {
    display: none;
}

.settings-toggle-wrapper.open .fa-chevron-up {
    display: inline;
}

.settings-toggle-wrapper.open .settings-toggle-target {
    display: block;
}

#invalid_card_warning {
    margin: 16px 0;
}

.new-apple-notice-layout {
    margin-bottom: 32px;
}

.new-apple-notice {
    background: #fff2db;
    margin: 0;
}

.new-apple-notice h1 {
    margin: 0;
    padding: 8px 16px;
    font-size: 14px;
    background: #ffe6bd;
    color:#5e3f08;
}

.new-apple-notice-body {
    display: flex;
    padding: 32px;
    color: #5e3f08;
}

.new-apple-notice-body > .icon {
    width: 64px;
    height: 64px;
    margin-right: 32px;
    border-radius: 50%;
    background: #ffd180;
    text-align: center;
}

.new-apple-notice-body > .icon > i {
    color: #fff2db;
    font-size: 48px;
    line-height: 64px;
}

.new-apple-notice-body > .body {
    flex: 1;
}

.new-apple-notice-body > .body > p {
    margin: 0 0 16px 0;
    line-height: 1.6;
    font-size: 14px;
}

.new-apple-notice-body > .body > p:last-child {
    margin-bottom: 0;
}

.ama-header {
    background-color: #cef;
    overflow: hidden;
}

.ama-header .ama-hero-container {
    position: relative;
    width: 1440px;
    margin: 0 auto;
    height: 329px;
    background-image: url(/img/ama-hero.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.ama-header .ama-hero-texts {
    position: absolute;
    top: 70px;
    left: 224px;
    color: #fff;
}

.ama-header .ama-hero-label {
    display: inline-block;
    padding: 3px 8px 3px 21px;
    background-color: #27ae60;
    background-image: url(/img/ama-label-icon.png);
    background-repeat: no-repeat;
    background-size: 9px 12px;
    background-position: 7px 5px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
}

.ama-header .ama-hero-title {
    margin-top: 16px;
    font-size: 32px;
    line-height: 1.4;
}

.ama-header .ama-hero-text {
    margin-top: 16px;
}

.ama-category {
    margin: 64px 0;
}

.ama-category > .ama-container {
    width: 992px;
    margin: 0 auto;
    display: flex;
}

.ama-category > .ama-container > .ama-category-header {
    flex: 1;
    border-right: 2px solid #f2f2f3;
}

.ama-category > .ama-container > .ama-category-header > .ama-category-title {
    margin: 16px 64px 0 0;
    font-size: 18px;
    line-height: 1.6;
    font-weight: bold;
    text-align :right;
}

.ama-category > .ama-container > .ama-category-questions {
    flex: 1;
    list-style: none;
    margin: 0;
    padding-left: 64px;
    border-left: 2px solid #f2f2f3;
}

.ama-category > .ama-container > .ama-category-questions > li > .ama-question {
    display: flex;
    align-items: center;
    font-size: 13px;
}

.ama-category > .ama-container > .ama-category-questions > li + li {
    margin-top: 16px;
}

.ama-category > .ama-container > .ama-category-questions > li > .ama-question > .ama-question-detail-layout {
    flex: 1;
    margin-left: 16px;
    padding: 24px 32px;
    background: #e5f6ff;
    border-radius: 8px;
    position: relative;
    color: #323135;
}

.ama-category > .ama-container > .ama-category-questions > li > .ama-question > .ama-question-detail-layout:hover {
    background: #cef;
    text-decoration: none;
}

.ama-category > .ama-container > .ama-category-questions > li > .ama-question > .ama-question-detail-layout::before {
    content: '';
    border: 6px solid #e5f6ff;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    position: absolute;
    top: calc(50% - 4px);
    left: -12px;
}

.ama-category > .ama-container > .ama-category-questions > li > .ama-question > .ama-question-detail-layout::after {
    font-family: "Font Awesome 5 Free", FontAwesome;
    font-weight: 900;
    content: "\f054";
    display: block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    opacity: .3;
    position: absolute;
    top: calc(50% - 8px);
    right: 16px;
}

.ama-category > .ama-container > .ama-category-questions > li > .ama-question > .ama-question-detail-layout > .ama-question-detail {
    display: flex;
    margin: 0 16px 0 0;
}

.ama-category > .ama-container > .ama-category-questions > li > .ama-question > .ama-question-detail-layout > .ama-question-detail::before {
    content: 'Q.';
}

.ama-category > .ama-container > .ama-category-questions > li > .ama-question > .ama-question-detail-layout > .ama-question-detail > span {
    margin-left: 8px;
}

.ama-footer {
    margin-bottom: 64px;
}

.ama-footer > .ama-footer-container {
    width: 992px;
    margin: 0 auto;
    background-color: #f2f2f3;
    text-align: center;
    position: relative;
}

.ama-footer > .ama-footer-container > .ama-footer-img {
    position: absolute;
    bottom: 0;
    width: 108px;
    height: 92px;
}

.ama-footer > .ama-footer-container > .ama-footer-img:first-child {
    left: 60px;
}

.ama-footer > .ama-footer-container > .ama-footer-img:last-child {
    right: 60px;
}

.ama-footer > .ama-footer-container > .ama-footer-content {
    margin: 0px auto;
    padding: 60px 0;
}

.ama-footer > .ama-footer-container > .ama-footer-content > p {
    margin: 0 0 16px;
}

.license-key-separator::before {
    content: '-';
    font-size: 18px;
}

.section-header {
    margin: 16px 0;
}

.section-title {
    padding: 12px 0;
    border-bottom: 1px solid #cbcace;
    font-size: 13px;
    font-weight: bold;
}

.home-tab .unread-green {
    margin-right: 4px;
}

.home-lessons .section-title {
    margin: 0;
}

.thank-you-registration {
    padding: 48px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.thank-you-registration .thank-you-registration-wrapper {
    display: flex;
    align-items: center;
}

.thank-you-registration .thank-you-message {
    width: 256px;
    text-align: center;
}

.thank-you-registration .thank-you-message p {
    margin: 0 0 32px;
}

.thank-you-registration .thank-you-message .di-btn {
    width: 200px;
}

.home-ama-banner {
    margin: 64px 0;
    background-image: url(/img/home-ama-background.png);
    background-size: cover;
}

.home-ama-banner a {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 16px 0;
    text-decoration: none;
}

.home-ama-banner .home-ama-blackboard {
    margin: 0 auto;
    background: #598059;
    border: 4.5px solid #d1a454;
    box-sizing: border-box;
    border-radius: 4px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}


.home-ama-blackboard .home-ama-blackboard-eraser {
    display: block;
    position: absolute;
    right: 32px;
    bottom: 0;
    width: 40px;
    height: 16px;
    background: #ffa100;
    border-radius: 3px 3px 0 0;
}

.home-ama-blackboard .home-ama-blackboard-eraser .home-ama-blackboard-eraser-band {
    display: block;
    width: 7.5px;
    height: 100%;
    margin: 0 auto;
    background: #334033;
}

.home-ama-banner .home-ama-blackboard .home-ama-blackboard-texts {
    margin: 32px 32px 32px 64px;
    text-align: center;
}

.home-ama-banner .home-ama-blackboard .home-ama-blackboard-texts h2 {
    margin: 0;
    font-size: 19px;
}

.home-ama-banner .home-ama-blackboard .home-ama-blackboard-texts p {
    margin: 4px 0 0;
}

.home-ama-banner .home-ama-blackboard .home-ama-blackboard-button {
    margin: 32px 64px 32px 32px;
    text-align: center;
}

.home-ama-banner .home-ama-blackboard .home-ama-blackboard-button .di-btn {
    width: 205px;
    box-shadow: 0 0 0 3px #fff;
}

.home-ama-banner:hover .di-btn {
    background: #0099e6;
    border-color: #0099e6;
}

.home-package-box {
    box-sizing: border-box;
    border: 1px solid #cbcace;
    border-radius: 4px;
}

.in-progress-package-header {
    display: flex;
    align-items: center;
    margin-top: 16px;
    padding: 32px 16px;
    position: relative;
}

.in-progress-package-header.hidden {
    opacity: 0;
    transition: opacity .3s ease-out;
}

.in-progress-package-header .package-icon {
    flex: 0 0 48px;
    height: 48px;
    margin-right: 16px;
    text-align: center;
    position: relative;
}

.in-progress-package-header .package-detail-title {
    display: flex;
    margin-right: 8px;
    font-size: 13px;
    font-weight: normal;
}

.in-progress-package-header .package-detail-title .premium-label {
    margin-left: 4px;
}

.in-progress-package-header .responsive-wrapper {
    flex: 0 0 64px;
    margin-left: auto;
    margin-right: 16px;
}

.in-progress-package-header .responsive-wrapper .flat-progressBar {
}

.in-progress-package-header .responsive-wrapper .premium-label {
    display: none;
}

.in-progress-package-header .di-dropdown-toggle i {
    vertical-align: text-top;
}

.in-progress-placeholder-to-revert {
    margin-top: 16px;
}

#hidden_packages_stack {
    display: none;
}

.go-to-hidden-lessons {
    margin: 16px 0 0;
    text-align: right;
}

.go-to-hidden-lessons a::after {
    font-family: "Font Awesome 5 Free", FontAwesome;
    content: "\f054";
    margin-left: 4px;
}

.go-to-hidden-lessons.hidden {
    display: none;
}

.completed-packages-wrapper {
    display: flex;
    flex-wrap: wrap;
    margin-top: -16px;
    margin-left: -16px;
}

.completed-package {
    width: calc((100% - 48px) / 3);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 16px;
    margin-left: 16px;
    padding: 16px;
    text-align: center;
}

.completed-package .package-icon {
    flex: 0 0 48px;
    width: 48px;
    margin-bottom: 16px;
    text-align: center;
    position: relative;
}

.single-col-section {
    margin: 0 32px;
}

.give-min-body-height {
    min-height: 480px;
}

.home-memo-row {
    display: flex;
    padding: 16px 0;
}

.home-memo-row :last-child {
    min-width: 180px;
    margin-left: auto;
}

.home-memo-row + .home-memo-row {
    border-top: 1px solid #cbcace;
}

.pub-qa-footer {
    margin-top: 32px;
}

.pub-qa-share-buttons > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end;
}

.pub-qa-share-buttons > ul > li + li {
    margin-left: 16px;
}

.premium-faqs {
    margin: 84px 0;
}

.premium-faqs .premium-faq {
    background: #e5f6ff;
    border-radius: 8px;
    padding: 32px;
}

.premium-faqs .premium-faq + .premium-faq {
    margin-top: 32px;
}

.premium-faqs .premium-faq .premium-faq-q {
    display: flex;
    font-weight: bold;
    font-size: 16px;
    color: #08415e;
}

.premium-faqs .premium-faq .premium-faq-q::before {
    content: 'Q.';
    margin-right: 16px;
    font-size: 20px;
    font-weight: bold;
    color: #08c;
}

.premium-faqs .premium-faq .premium-faq-a {
    display: flex;
    margin-top: 16px;
    font-size: 14px;
    color: #323135;
}

.premium-faqs .premium-faq .premium-faq-a::before {
    content: 'A.';
    margin-right: 16px;
    font-size: 20px;
    font-weight: bold;
    color: #f99f06;
}

.home-side-256times p {
    margin: 16px 0;
}

.home-side-256times-wrapper {
    width: 254px;
}

.pp-co-list {
    margin: 8px 0 16px 16px;
}

.terms-menu {
    margin-bottom: 24px;
}