/* 共通 css */


html {
    width:100%;
    /*height:100%;
    min-height: 100%;*/
    margin:0;
    padding:0;
    /*overflow-y:scroll;*/
    
}

body {
    width:100%;
    /*
    height:100%;
    */
    min-height: 100vh;
    
    margin:0;
    padding:0;
    
    background-color:#FAFFFA;
    
    font-size:14px;
    font-family:Meiryo, helvetica, sans-serif;
}

body * {
    
    font-size:100%;
    font-family:inherit;
    box-sizing:border-box!important;
    -webkit-box-sizing:border-box!important;
    -moz-box-sizing:border-box!important;
    -o-box-sizing:border-box!important;
    
    margin:0;
    padding:0;
    
    position:relative;
    
    box-sizing:border-box;
}

body.admin {
    background-color:#fbf7fe;
}

body.test {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -ms-touch-callout: none;
    /*-ms-touch-action: none;*/
    -moz-user-select: none;
    
    touch-callout: none;
    user-select: none;
    /*touch-action: none;*/
}

body td, body th, body tr, body tbody, body thead
{
    position:static;
}

input, textarea, .allow_select
{
    user-select: auto;
    -webkit-user-select: auto;
    -ms-user-select: auto;
    -moz-user-select: auto;
}

textarea, option, button {
    outline: none!important;
}

.vm {
    vertical-align:middle!important;
}

.pc_hide
{
    display:none!important;
}

.form-control.white_disabled:disabled,
.form-control.white_disabled[readonly]
{
    background-color:#fff;
}

@media(max-width:767px) {
    
    .pc_hide
    {
        display:unset!important;
    }
    
    .sp_hide
    {
        display:none!important;
    }

}

.btn-group-sm>.btn, .btn-xs {
    padding: .15rem .3rem;
    font-size: .75rem;
    line-height: 1.5;
    border-radius: .2rem;
}

.breadcrumb-item+.breadcrumb-item::before
{
    content:'\f105';
    font-family:FontAwesome;
}

.form-group.explain_row
{
    margin-bottom:1.8rem;
}

/* 画像右クリック防止対策 */
img {
    /*pointer-events:none;*/
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-touch-callout:none;
    -moz-user-select:none;
    user-select:none;
}

#wrapper {
    width:1000px;
    margin:0 auto;
    min-height:100vh;
    /*height:100%;*/
    box-shadow:2px 2px 2px rgba(0,0,0,0.2), -1px -1px 2px rgba(0,0,0,0.2);
    border-radius:2px;
    background-color:#fff;
}

/* ヘッダー */
#common_header {
    width:100%;
    height:64px;
    border-radius:0;
    margin-bottom:0px;
    background-color:#1a63ad;
    z-index:5;
}

#common_header .inner {
    width:1250px;
    margin:0 auto;
    
    background-image:url(../image/testudy_logo.png);
    background-size:auto 70%;
    background-position:0% 50%;
    background-repeat:no-repeat;
    
}

#common_header .header_title {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:64px;
    line-height:64px;
    padding-left:15px;
    color:#fff;
    font-size:150%;
    text-align:center;
    
}

#common_header .header_title.admin {
}

#common_header .header_title img {
    display:block;
    margin-top:8px;
    height:48px;
    max-width:20%;
    
}

#common_header .header_title.group_title img {
    margin-left:auto;
    margin-right:auto;
    margin-top:6px;
    max-width:50%;
}

#common_header .header_logout,
#common_header .header_person {
    height:100%;
    line-height:64px;
    
    padding-right:15px;
    
    text-align:right;
    
}

#common_header .header_person {
    padding-right:30px;
    color:#fff;
}

    #common_header .header_person img {
        width:42px;
        height:42px;
        border-radius:50%;
    }


#common_body {
    width:100%;
    height:100%;
}

#common_body .inner {
    width:1250px;
    margin:0 auto;
    background-color:#FFFFFF;
    padding:20px;
    min-height:100vh;
    padding-top:84px;
    margin-top:-64px;
}

#main_column {
    
    float:left;
    
    width:920px;
    margin-left:0;
    
    
}

#main_column.one_column {
    
    float:none;
    
    width:1150px;
    margin-left:auto;
    margin-right:auto;
    
    
}

#breadcrumb {
    min-height:auto;
}


@media(max-width:1280px)
{
    #common_header
    {
        height:auto;
        min-height:64px;
    }
    #common_header .inner {
        width:970px;
        background-image:none;
    }
    
    #common_header .header_title
    {
        position:relative;
        display:inline-block;
        width:auto;
        max-width:18%;
    }
    
    #common_header .header_title.group_title {
        top:20px;
        max-width:100%;
        line-height:1.1em;
        text-align:left;
    }
    
    #common_header .header_title.group_title img {
        margin-top: -8px;
    }
    
    #common_header .header_title.admin {
        max-width:100%;
    }
    
    #common_header .header_title img {
        height:auto;
        max-height:48px;
        max-width:100%;
        margin-top:8px;
        margin-right:10px;
    }
    
    #common_header .header_title img.logo {
        height:auto;
        max-height:48px;
        margin-right:0px;
        max-width:100%;
    }
    
    #common_header .header_logout
    {
        height:auto;
        line-height:1em;
        margin-top:16px;
        margin-bottom:2px;
    }
    #common_header .header_person
    {
        height:auto;
        line-height:1em;
        margin-top:24px;
    }
    
    #common_body .inner {
        width:1000px;
        padding-left:10px;
        padding-right:10px;
    }

    #side_menu_column {
        width:200px;
        margin-right:10px;
    }

    #main_column {
        width:770px;
        margin-left:0;
    }

    #main_column.one_column {
        width:100%;
    }
}

@media(max-width:1023px)
{
    #common_header
    {
        height:auto;
        min-height:64px;
    }
    #common_header .inner
    {
        width:768px;
    }
    
    #common_body .inner
    {
        width:768px;
        padding-left:10px;
        padding-right:10px;
        padding-top:72px;
    }

    #common_header .header_title
    {
        position:relative;
        display:inline-block;
        top:14px;
        left:0;
        height:auto;
        line-height:1.1em;
        width:auto;
        max-width:15%;
        padding-left:5px;
    }
    
    #common_header .header_title.group_title {
        max-width:90%;
        text-align:left;
        line-height:1.1em;
    }
    
    #common_header .header_title img {
        max-width:100%;
        margin-top:8px;
        margin-right:10px;
        max-height:32px;
    }
    
    #common_header .header_title.group_title img {
        margin-top: -8px;
    }
    
    #common_header .header_title img.logo {
        margin-right:0px;
        max-width:100%;
        max-height:32px;
    }
    
    #common_header .header_logout
    {
        height:auto;
        line-height:1em;
        margin-top:16px;
        margin-bottom:2px;
    }
    #common_header .header_person
    {
        height:auto;
        line-height:1em;
        margin-top:24px;
    }
    
    #side_menu_column {
        width:180px;
        margin-right:10px;
        font-size:90%;
    }
    
    #main_column
    {
        width:550px;
    }

    #main_column.one_column
    {
        width:100%;
    }
    
    #breadcrumb {
        margin-bottom:10px;
    }
}




@media(max-width:767px), print
{
    
    #common_header
    {
        height:auto;
        line-height:0px;
    }
    
    #common_header .inner
    {
        width:95%;
    }
    
    #common_header .header_title
    {
        position:relative;
        display:inline-block;
        top:0;
        left:0;
        height:40px;
        width:auto;
        max-width:20%;
        padding-left:5px;
        line-height:40px;
    }
    
    #common_header .header_title.group_title {
        max-width:90%;
    }
    
    #common_header .header_title img {
        margin-top:4px;
        height:32px;
        max-width:100%;
    }
    
    #common_header .header_title.group_title img {
        height:32px;
        margin-top: -6px;
    }

    #common_header .header_logout,
    #common_header .header_person
    {
        /*line-height:40px;*/
        
        padding-right:10px;
    }
    
    
    #common_header .header_person img {
        width:32px;
        height:32px;
    }
    
    #common_body .inner
    {
        width:100%;
        padding-left:5px;
        padding-right:5px;
        padding-bottom:80px;
    }

    #main_column
    {
        width:100%;
    }

    #main_column.one_column
    {
        width:100%;
    }
    
    #breadcrumb
    {
        display:none;
    }
}

/* */
.test_list_container {
    width:600px;
    max-width:90%;
    margin:5em auto;
}

.test_list_container a.btn {
    margin-bottom:2em;
}

.test_list_container .empty_test_notice {
    text-align:center;
}

.test_list_container .empty_test_notice span {
    display:inline-block;
    max-width:95%;
    padding:2em;
    border:1px solid #999;
    text-align:left;
}

.test_list_container div+.empty_test_notice,
.test_list_container a+.empty_test_notice {
    display:none;
}

.test_list_container .each_workbook
{
    margin-bottom:10px;
}

.test_list_container .each_workbook a
{
    text-align:left;
    vertical-align:middle;
    text-decoration:none;
}

.test_list_container .each_workbook a span
{
    color:#000;
    font-size:20px;
    text-decoration:none;
}

.test_list_container .each_workbook a:hover span
{
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:3px;
}

.test_list_container .each_workbook a img
{
    width:50px;
    margin-right:8px;
    text-decoration:none;
    
}

.top_image_container
{
    width:600px;
    max-width:90%;
    margin:0 auto 20px auto;
    text-align:center;
}

.top_image_container img {
    max-width:100%;
}

.common_error {
    width:800px;
    max-width:90%;
    margin:5em auto;
    text-align:center;
}

.inner_inline_block {
    display:inline-block;
    text-align:left;
}


h2.test_title {
    width:95%;
    display:block;
    text-align:center;
    font-size:180%;
    margin:1em auto 1em auto;
}

h2.test_title.question {
    text-align:left;
    font-size:120%;
}

.test_explain {
    display:inline-block;
    width:auto;
    max-width:800px;
    margin:0 auto 3em auto;
    padding:1em;
    border:1px solid #999;
    line-height:1.6em;
    text-align:left;
}

.test_explain .pre {
    white-space:pre-wrap;
    
}

.test_explain .voice_notice {
    display:block;
    margin-top:1.5em;
    margin-bottom:1em;
}

.test_explain .speaker_icon {
    display:inline-block;
    width:64px;
    height:64px;
}


.text_explain_notice_wrap {
    display:inline-flex;
    flex-flow: column;
}

.text_explain_voice_notice {
    width:auto;
    text-align:center;
}

.text_explain_voice_notice > .notice_inner {
    display:inline-block;
    width:100%;
    text-align:left;
    margin:2em auto 0.5em auto;
    border:1px solid #E0E0E0;
    padding:1em;
    line-height:1.5em;
    background-color:#f0fffb;
}

.text_explain_voice_notice + .text_explain_voice_notice > .notice_inner {
    margin-top:1em;
}

.text_explain_voice_notice > .notice_inner ul {
    padding:0;
    margin:0;
    margin-left:2em;
}

.text_explain_voice_notice > .notice_inner ul li {
    padding-left:0;
}

.test_explain .recording_container
{
    display:inline-flex;
    flex-wrap:nowrap;
}

.test_explain .recording_container .microphone_icon
{
    height:68px;
    background-repeat:no-repeat;
    background-position:50% 50%;
    background-size:auto 68px;
    background-image:url(/image/microphone_icon_blue.png);
    cursor:pointer;
}

.test_explain .recording_container.recording .microphone_icon
{
    background-image:url(/image/microphone_icon_red.png);
    pointer-events:none;
}

.test_explain .recording_container.finished .microphone_icon
{
    opacity:0.6;
}


.test_explain .recording_container .recording_time_limit
{
    font-size:16px;
    font-weight:bold;
    color:#54c3f1;
    height:2em;
    vertical-align:top;
}

.test_explain .recording_container.recording .recording_time_limit
{
    color:#ff0000;
}


.test_explain .recording_container .speaker_icon
{
    transition:opcaity 0.1s 0s linear;
}

.test_explain .recording_container .speaker_icon.off
{
    opacity:0.3;
    pointer-events:none;
}


.test_explain.finish {
    white-space:normal;
}

.test_start_button {
    font-size:200%;
    padding-left:1em;
    padding-right:1em;
}

.test_result {
    position:relative;
    display:inline-block;
    width:auto;
    width:150px;
    height:150px;
    margin:0 auto;
    padding:0;
    border:none;
    text-align:center;
}

.test_result .circle_progress {
    position:absolute;
    top:0;
    left:0;
    width:150px;
    height:150px;
    transform:rotate(-90deg);
}

.test_result .circle_progress circle.progress {
    stroke-dashoffset: 56.548;
    stroke-dasharray: 56.548;
    stroke:#1DA1F2;
    transition:stroke-dashoffset 0.3s 0s ease-out;
}

.test_result .circle_progress circle.progress.poor {
    stroke:#ff0009;
}

.test_result .circle_progress circle.progress.bad {
    stroke:#eb6b6b;
}

.test_result .circle_progress circle.progress.ok {
    stroke:#749f11;
}

.test_result .circle_progress circle.progress.good {
    stroke:#00b9f4;
}

.test_result .circle_progress circle.progress.excellent {
    stroke:#0006ff;
}

.test_result .result_summary .label {
    top:2px;
    margin-top:1.5em;
}

.test_result .result_summary .figure {
    margin-top:3px;
    font-size:40px;
    font-weight:bold;
}

.test_result .result_summary .total_count {
    top:-4px;
    margin-top:0em;
}
.test_result .count {

    padding:0;
    margin:0;
    list-style-type:none;
}

.test_result .count li {
    float:left;
    font-size:48px;
    color:#1c1c1c;
    margin:0 24px;
    padding-left:70px;
    background-repeat:no-repeat;
    background-size:60px auto;
    background-position:0px 3px;
}

.test_result .count li.correct {
    background-image:url(../image/correct_mark.png);
}

.test_result .count li.wrong {
    background-image:url(../image/wrong_mark.png);
}

.test_result_wpm {
    position:relative;
    display:block;
    width:auto;
    width:200px;
    margin:0 auto 1.5em auto;
    padding:1.5em 1.2em;
    border:none;
    border-radius:2px;
    text-align:center;
    background-color:#fde2d2;
}

.test_result_wpm h3 {
    width:100%;
    text-align:center;
    border-bottom:2px solid #fff;
    font-size:20px;
    padding:0 0 0.3em 0;
    color:#e37948;
}

.test_result_wpm .each_score
{
    margin-top:1em;
}

.test_result_wpm .each_score .label
{
    font-size:16px;
    color:#000;
}

.test_result_wpm .each_score .score
{
    width:140px;
    margin:0 auto;
    padding:0.2em 0;
    background-color:#fff;
    border:1px solid #d5d7d8;
    text-align:center;
    font-size:16px;
    color:#000;
}

.footer_button_container {
    width:95%;
    margin:1em auto;
}

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

.top_button_container {
    width:95%;
    margin:0.5em auto -3em auto;
}

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

/* ルビ関連 */
body.hide_ruby rp, body.hide_ruby rt {
    display:none;
}

body:not(.hide_ruby) ruby {
    display: inline-table;
    border-collapse: collapse;
    height: 2em;
    margin: 0;
    padding: 0;
    border: none;
    white-space: nowrap;
    text-indent: 0;
    vertical-align: 1em;
    text-decoration: inherit;
    text-align: center;
    line-height: 1em;
    }

/* 上ルビ */
body:not(.hide_ruby) ruby>rtc {
    display: table-header-group;
    height: 25%;
    margin: 0;
    padding: 0;
    border: none;
    font: inherit;
    font-size: 50%;
    line-height: 1em;
    }

/* 下ルビ(括弧類がある場合とない場合でセレクタが異なる) */
body:not(.hide_ruby) ruby>rtc+rtc,
body:not(.hide_ruby) ruby>rtc+rp+rtc {
    display: table-footer-group;
    height: 25%;
    margin: 0;
    padding: 0;
    border: none;
    font: inherit;
    font-size: 50%;
    text-decoration: none;
    line-height: 1em;
    }

/* 各文字に対応するルビ */
body:not(.hide_ruby) ruby>rtc>rt {
    display: table-cell;
    margin: 0;
    padding: 0 0.125em;
    border: none;
    font-size: 100%;
    text-align: center;
    line-height: 1em;
    }

/* ルビ対象テキスト */
body:not(.hide_ruby) ruby>rb {
    display: table-cell;
    max-height: 75%;
    margin: 0;
    padding: 0 0.125em;
    border: none;
    font: inherit;
    text-decoration: none;
    text-align: center;
    line-height: 1em;
    vertical-align: top;
    }

/* 単純な<ruby>要素での<rt>要素 */
body:not(.hide_ruby) ruby>rt {
    display: table-header-group;
    height: 25%;
    margin: 0;
    padding: 0 0.125em;
    border: none;
    font: inherit;
    font-size: 50%;
    text-align: center;
    line-height: 1.5em;
    }

/* <ruby>要素入れ子の場合 */
body:not(.hide_ruby) ruby>ruby {
    vertical-align: 0em;
    }

/* <ruby>要素が入れ子でない場合のルビテキストと、*/
/* <ruby>要素が入れ子の場合の上位<ruby>要素のルビテキスト、*/
body:not(.hide_ruby) ruby>ruby+rt,
body:not(.hide_ruby) ruby>ruby+rp+rt {
    display: table-footer-group;
    }

/* <ruby>要素直下に<rt>要素が二つある場合 */
body:not(.hide_ruby) ruby>rt+rt {
    display: table-footer-group;
    }

body:not(.hide_ruby) rt {
    font-size:50%;
}



/* 汎用エラーページ */
#error_page {
    margin-top:10%;
}

#error_page .error_container {
    width:600px;
    max-width:95%;
    margin-left:auto;
    margin-right:auto;
    background: #fff;
    padding: 25px 15px 25px 15px;
    border-radius: 3px;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    text-align:center;
    font-size:16px;
}

#error_page .error_description {
    display:inline-block;
    width:auto;
    text-align:left;
    margin-top:15px;
}

#error_page .error_buttons {
    margin-top:25px;
}



/* スピーカーアイコン */

.speaker_icon {
    background:#3bb6e3;
    border-radius:50%;
    
    opacity:1;
    transform:scale(1);
    
    transition:opacity 0.1s linear 0s, transform 0.1s linear 0s;
    
    cursor:pointer;
    
}

.speaker_icon.fadeout {
    opacity:0;
    transform:scale(0.3);
}

.speaker_icon.disabled {
    opacity:0.4;
    cursor:not-allowed;
}

.speaker_icon.clicked {
    transform:scale(0.8);
    transition:none;
}


.speaker_icon .speaker {
    width:100%;
    height:100%;
    background-image:url(/image/speaker.png);
    background-size:cover;
    transform:scale(0.5);
    
}

.speaker_icon.disabled .speaker {
    background-image:url(/image/speaker_disabled.png);
}

.speaker_icon.loading .speaker {
     background-image:none;
}

.speaker_icon.playing .speaker {
    /*animation*/
    -webkit-animation:pump 0.15s 0.15s infinite alternate;
       -moz-animation:pump 0.15s 0.15s infinite alternate;
        -ms-animation:pump 0.15s 0.15s infinite alternate;
         -o-animation:pump 0.15s 0.15s infinite alternate;
            animation:pump 0.15s 0.15s infinite alternate;
}

@-webkit-keyframes pump {
    from{
        -webkit-transform:scaleY(0.6);
        transform:scale(0.6);
    }
    to{
        -webkit-transform:scaleY(0.5);
        transform:scale(0.5);
    }
}
@-moz-keyframes pump {
    from{
        -moz-transform:scaleY(0.6);
        transform:scale(0.6);
    }
    to{
        -moz-transform:scaleY(0.5);
        transform:scale(0.5);
    }
}
@-ms-keyframes pump {
    from{
        -ms-transform:scaleY(0.6);
        transform:scale(0.6);
    }
    to{
        -ms-transform:scaleY(0.5);
        transform:scale(0.5);
    }
}
@-o-keyframes pump {
    from{
        -o-transform:scaleY(0.6);
        transform:scale(0.6);
    }
    to{
        -o-transform:scaleY(0.5);
        transform:scale(0.5);
    }
}
@keyframes pump {
    from{
        transform:scale(0.6);
    }
    to{
        transform:scale(0.5);
    }
}

.speaker_icon.loading .speaker,
.speaker_icon.loading .speaker:before,
.speaker_icon.loading .speaker:after {
  margin:0 0;
  border-radius: 50%;
  width: 1.2em;
  height: 1.2em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}
.speaker_icon.loading .speaker {
  color: #ffffff;
  font-size: 10px;
  position: relative;
  margin-left:2.5em;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.speaker_icon.loading .speaker:before,
.speaker_icon.loading .speaker:after {
  content: '';
  position: absolute;
  top: 0;
}
.speaker_icon.loading .speaker:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.speaker_icon.loading .speaker:after {
  left: 1.5em;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

.speaker_icon .progress {
    display:none;
}

.speaker_icon.playing .progress {
    display:block;
}
.speaker_icon .progress {
  width: 100%;
  height: 100%;
  background: none;
  position: absolute;
  top:0;
  left:0;
}

.speaker_icon .progress::after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid #eee;
  position: absolute;
  top: 0;
  left: 0;
}

.speaker_icon .progress>span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}

.speaker_icon .progress .progress-left {
  left: 0;
}

.speaker_icon .progress .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 5px;
  border-style: solid;
  border-color:  #3bb6e3;
  position: absolute;
  top: 0;
}

.speaker_icon .progress .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 80px;
  border-bottom-right-radius: 80px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}

.speaker_icon .progress .progress-right {
  right: 0;
}

.speaker_icon .progress .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 80px;
  border-bottom-left-radius: 80px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
}

.speaker_icon .progress .progress-value {
  position: absolute;
  top: 0;
  left: 0;
}

.touch_area {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:10000;
    background-color:#fff;
    text-align:center;
}

.touch_area .touch_icon
{
    display:block;
    margin:40px auto 15px;
    
    width:112px;
    height:112px;
    border-radius:50%;
    
    background-color:#3eb6e3;
    background-image:url(/image/icon_touch.png);
    background-size:64px 64px;
    background-position:50% 50%;
    background-repeat:no-repeat;
    text-align:center;
    
}

.touch_area .message
{
    display:block;
    width:100%;
    
    text-align:center;
    
    font-weight:bolder;
    font-size:16px;
    color:#333;

}

.touch_area .notice
{
    display:inline-block;
    width:auto;
    
    margin-top:1.5em;
    padding:0.8em;
    border:1px solid #000;
    
    text-align:left;
    
    font-size:16px;
    color:#333;
    
}

.question_navigator {
    margin-bottom:0.5em;
    overflow-x:hidden;

}

.question_navigator .pagination a.page-link {
    cursor:pointer;
}

.question_navigator li.dot {
    display:none;
}



body.admin .card {
    margin-bottom:1.5em;
}


.ellipsis_cell {
    cursor:pointer;
}
.ellipsis_cell:not(.extended) {
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 0;
    overflow: hidden;
}


.question_body .explain_area {
    border: 1px solid #e1cdcd;
    padding: 0;
    margin-bottom: 1.5em;
}

.question_body .explain_area h3.title {
    width:100%;
    line-height:2em;
    font-weight:bold;
    text-align:left;
    padding:0 1em;
    background-color:#caf6e4;
}

.question_body .explain_area .explain {
    padding:0.5em 1em;
}

.user_test_result_list_table {
    width:auto;
    margin:0 auto;
    margin-bottom:2em;
    
}

.user_test_result_list_table th {
    text-align:center;
    font-weight:bold;
    background-color:#e5fdf4;
}

.result_summary_table {
    width:auto;
    margin:0 auto;
    border-collapse:collapse;
}

.result_summary_table th,
.result_summary_table td {
    padding:0.5em 1em;
    border:1px solid #dee2e6;
    text-align:center;
}

.result_summary_table th {
    font-weight:bold;
    background-color:#e5fdf4;
}

.result_detail_table {
    width:auto;
    margin:0 auto;
    border-collapse:collapse;
}

.result_detail_table th,
.result_detail_table td {
    padding:0.5em 1em;
    border:1px solid #dee2e6;
    text-align:center;
    position:static;
}

.result_detail_table th {
    font-weight:bold;
    background-color:#e5fdf4;
}


.select_test_limit_table {
    width:auto;
    margin:0 auto;
    margin-bottom:2em;
    border:1px solid #90d0ed;
}

.select_test_limit_table th {
    text-align:center;
    font-weight:bold;
    background-color:#b3e5fc;
    border:1px solid #90d0ed;
}

.select_test_limit_table td {
    text-align:center;
    border:1px solid #90d0ed;
}

.select_test_limit_table td.limit_count {
    font-size:20px;
    font-weight:bold;
}

.tag_underline
{
    text-decoration:underline;
    text-decoration-thickness:2px;
    text-underline-position:under;
}

.tag_ch
{
    font-family:'SimSun', 'Segoe UI',SegoeUI,'Microsoft YaHei',微软雅黑,"SF Pro SC","SF Pro Text","SF Pro Icons","PingFang SC","Helvetica Neue",Helvetica,Arial,sans-serif!important;
}


.loading_spinner .spinner {
  -webkit-animation: rotate 2s linear infinite;
          animation: rotate 2s linear infinite;
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
  width: 50px;
  height: 50px;
}
.loading_spinner .spinner .path {
  stroke: #93bfec;
  stroke-linecap: round;
  -webkit-animation: dash 1.5s ease-in-out infinite;
          animation: dash 1.5s ease-in-out infinite;
}

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

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}


#dialog-confirm-common .loading_spinner
{
    display:none;
}

#dialog-confirm-common.loading .loading_spinner
{
    display:block;
    position:fixed;
    top:40%;
    left:50%;
    margin-left:-64px;
    width:128px;
    height:128px;
}

#dialog-confirm-common.loading .modal-dialog
{
    display:none!important;
}


.question_body .image_container {
    margin-bottom:3em;
    margin-top:1em;
    text-align:center;
}

.question_body .image_container img {
    width:100%;
}


.question_body .video_container {
    margin-bottom:3em;
    margin-top:1em;
}

.question_body .video_container video {
    width:100%;
}

video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px);
}