@import url('https://fonts.googleapis.com/css?family=Lato:400,700,900');

body {font-family:'Meiryo', 'Arial','Microsoft Jhenghei','SegoeUIWF', sans-serif !important}

.pointer {cursor:pointer}
table {width:100%}

sup.required {color:#f00}

.highlight {background: orange; color: black;}

.form-control-static    {border:0}
.form-control           {height:auto}

.sidebar .info {position:static !important}

.main-header .logo {height:52px !important}

.mockSingle input[type="text"] {width:400px; padding:5px; border-width:0; border-bottom-width:1px; border-bottom-color:#ccc; }
.mockSingle input {margin:7px;}


.radio-inline, .checkbox-inline {padding-left:30px !important}


.jFiler-items-default .jFiler-item .jFiler-item-info { float:none !important; overflow: hidden; white-space: nowrap; margin-right: 50px; text-overflow: ellipsis;}
	.jFiler-items-default .jFiler-item .jFiler-item-title {  }

.vocaBox {padding:0; margin:0; list-style:none}
    .vocaBox .item {padding:10px 20px; border-radius:5px}
    .vocaBox .item + .item {margin-top:20px}
    .vocaBox .item:hover {background:#efefef}

        .vocaBox .item .word {font-weight:bold; font-size:2em; border-bottom:1px solid #c1bab0}

        .vocaBox .voiceBox {float:right; font-size:12px}
            .vocaBox .voiceBox .voice {float:left; padding:5px 15px; color:#000; border-radius:5px; background:#e3e3e3}
            .vocaBox .voiceBox .voice + .voice {margin-left:10px}
        .vocaBox .voiceBox .voice * {vertical-align:middle}

        .vocaBox .voiceBox audio {margin-left:10px; width:65px}

        .vocaBox  li .toolBox {visibility:hidden}
        .vocaBox  li:hover .toolBox {visibility:visible}

        .vocaBox .toolBox {float:right; padding:0; margin:0; list-style:none; font-size:12px}
        .vocaBox .toolBox li {display:inline-block}

        .vocaBox .item .pronounce {font-size:12px; color:#999}
        .vocaBox .item .pronounce .kk {float:left; font-family:monospace}
        .vocaBox .item .pronounce .dj {float:left; font-family:monospace}

        .vocaBox .item .pronounce .kk + .dj {margin-left:10px}

        .vocaBox .explainBox {list-style:none; font-size:12px}
            .vocaBox .explainBox li {position:relative; margin:5px 0; min-height:25px}
            .vocaBox .explainBox li+li { border-bottom:1px dotted #ccc}

        .vocaBox .explainBox .lang {display:inline-block; margin-right:5px; padding:1px 5px; background-color:#00a65a; color:#fff}

        .vocaBox .extBox {list-style:none; font-size:12px}
            .vocaBox .extBox li {position:relative; margin:5px 0; min-height:25px}
            .vocaBox .extBox li+li { border-bottom:1px dotted #ccc}
                .vocaBox .extBox .text {margin-top:1px; overflow:hidden}

        .vocaBox .extBox .lang {float:left; margin-right:5px; padding:1px 5px; background-color:#f0ad4e; color:#fff}


        .vocaBox .exampleBox {list-style:none; font-size:12px}
            .vocaBox .exampleBox li {position:relative; margin:5px 0; min-height:25px}
            .vocaBox .exampleBox li+li { border-bottom:1px dotted #ccc}

                .vocaBox .exampleBox .example {margin-top:1px; overflow:hidden}
                .vocaBox .exampleBox .lang {float:left; display:inline-block; margin-right:5px; padding:1px 5px; background-color:#3c8dbc; color:#fff}


#mockitem-edit {padding-bottom:60px; background:#fff}
#mockitem-edit .form-btns {position:fixed; left:0; right:0; bottom:0; padding:5px; text-align:right; background:rgb(255, 255, 255)}

#mock-edit {padding-bottom:60px; background:#fff}
#mock-edit .form-btns {position:fixed; left:0; right:0; bottom:0; padding:5px; text-align:right; background:rgb(255, 255, 255)}

#source {}

#source .mockWrap {}
    #source .typeWrap {float:left; width:100px}
        #source .typeWrap .btn {margin-top:5px}

    #source .typeBox {padding:15px 0; text-align:center; color:#fff}
    #source .mockWrap + .mockWrap {margin-top:20px}

    #source .typeBox.reading    {background-color:#00c0ef !important;}
    #source .typeBox.listening  {background-color:#f39c12 !important}
    #source .typeBox.writing    {background-color:#bf5329 !important}
    #source .typeBox.speaking   {background-color:#000 !important}

    #source .mockBox {overflow:hidden; padding:10px; position:relative; background-color:#f9f9f9;}
        #source .itemWrap {padding:10px; min-height:120px}
        #source .itemWrap:hover {box-shadow:0 0 10px #ccc; background-color:#fff}

        #source .mockBox .placeholder {overflow:hidden; background:#ffcf84 !important; outline:1px solid #f39c12}

            #source .itemWrap .titleWrap {margin-bottom:10px; border-bottom:1px dotted #999}
                #source .itemWrap .titleWrap .title         {white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:1.2em; font-weight:bold}
                    #source .itemWrap .titleWrap .grabber       {visibility:hidden; padding:0 4px; cursor:move}
                    #source .itemWrap:hover .titleWrap .grabber {visibility:visible}

                #source .itemWrap .titleWrap .tool          {float:right; display:none}
                #source .itemWrap:hover .titleWrap .tool    {display:block}


                #source .itemBox .item {opacity:.8; position:relative; line-height:20px; overflow:hidden; background:#bfbfbf !important}
                #source .itemBox .item[done="1"] { background:#89C4F4 !important }
                #source .itemBox .item:hover {opacity:1}
                #source .itemBox .item + .item {margin-top:10px}

                #source .itemBox .item .code {float:left; overflow:hidden; width:100px; padding:5px; color:#fff; background:rgba(0,0,0,0.2)}
                    #source .itemBox .item .code .grabber       {float:left; visibility:hidden; line-height:20px; margin-left:0; padding:0 4px 0 2px; cursor:move}
                    #source .itemBox .item:hover .code .grabber {visibility:visible}

                #source .itemBox .item .tool {float:right; display:none}
                #source .itemBox .item .tool .btn {padding:5px; background:rgba(255,255,255, .6)}
                #source .itemBox .item:hover .tool {display:block}

                #source .itemBox .item .question {padding:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#000}

                #source .itemBox  .placeholder          {line-height:20px; overflow:hidden; background:#fcc !important; outline:1px solid #f00}
                #source .itemBox .item + .placeholder   {margin-top:10px}
                #source .itemBox .placeholder + .item   {margin-top:10px}

    #source .mockBox + .mockBox {margin-top:20px}

    #source .list-group-item {padding:5px 10px; font-size:.8em}

    #mock {background:#fff}
    #mockitem-edit {background:#fff}


    #project-sort .unitBox {list-style:none; padding:0; margin:0}
    #project-sort .unitBox li{padding:5px; border-radius:5px; position:relative}
    #project-sort .unitBox .placeholder {height:32px; outline:1px solid #f00; background:#ff6; opacity:.8}
    #project-sort .unitBox li:hover{background:#efefef}
        #project-sort .unitBox .sn      {float:left; width:37px; margin-right:10px; text-align:right}

        #project-sort .unitBox li [role="grabber"] {display:none; content:''; position:absolute; left:-5px; top:10px; width:20px; height:20px; cursor:move}
        #project-sort .unitBox li:hover [role="grabber"] {display:block}

        #project-sort .unitBox .title   {overflow:hidden}
            #project-sort .unitBox .title .id {float:left; margin-right:10px; width:40px; text-align:right; font-size:12px; color:#999}


.embedBox { position: relative; }
    .embedBox iframe { position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height:100%}
    
    
    
#course .itemBox            {padding:5px; margin:0; list-style:none; background:#ededed;}
    #course .itemBox .item  {padding:4px 5px; font-size:16px; font-weight:bold;}
    #course .itemBox .item+.item  {border-top:1px dotted #aaa}
    #course .itemBox .item:hover  {cursor:pointer; background:#fff;}
    
        #course .itemBox             .itemMover {visibility:hidden; padding:0 8px; cursor:move}
        #course .itemBox .item:hover .itemMover {visibility:visible}
    
        #course .unitBox       .unitMover {visibility:hidden; padding:0 8px; cursor:move}
        #course .unitBox:hover .unitMover {visibility:visible}
    
    
    
    
    
#courseitem-add .groupWrap {width:20%; display:inline-block; vertical-align:top; padding:10px}
    #courseitem-add .group {border:2px solid #ccc; border-radius:8px; margin:10px; padding:5px}
        #courseitem-add .group .titleBox {font-weight:bold; font-size:16px; cursor:pointer; color:#000}
        
        #courseitem-add .group .itemBox     {display:none; background:#efefef}
            #courseitem-add .group .itemWrap    {padding:5px}
            #courseitem-add .group .item        {background:#fff; padding:5px 10px}
                #courseitem-add .group .item .title  {font-weight:bold; cursor:pointer}
.counter::before{ counter-increment: item; content: counter(item) "."; font-weight: bold;}