/**
 * Custom.css
 * 
 * Used for Frontend Plugins
 * 
 * @package TYPO3
 * @subpackage LMS3
 * @author Kallol Chakraborty <kchakraborty@learntube.de>
 * (c) 2016 LEARNTUBE! GbR - Contact: mail@learntube.de
 */
.typo3-messages {
    margin: 0;
    padding: 0;
    margin-left:auto;
}
.typo3-messages li {
    list-style: none;
}
.content-box {
    min-height: 12em;
}
.content-box p {
    text-align: left;
}
.card-body {
    padding: 0.5em;
    margin: 0;
}
.card-body span {
    margin-top: 0.5em;
}
.card-border {
    padding: 0.3em;
}
.form-control {
    min-width: 240px;
    width: auto;
}
.no_progress {
    height: 20px;
    margin-bottom: 20px;
    overflow: hidden;
}
.navhide {
    display: none !important;
}

/** Mixed Sentence **/
.sortable-h {
    list-style-type: none;
    margin: 5px;
    padding: 0;
    width: 100%;
}
.sortable-h li {
    float: left;
    font-size: 1em;
    height: 30px;
    margin: 5px 10px 10px 0;
    padding: 0 5px 0 5px;
    text-align: center;
    width: auto;
    min-width: 70px;
    background: #f3f3f3 none repeat scroll 0 0;
    border: 1px solid #c5c5c5;
    color: #454545;
    font-weight: normal;
    cursor: move;
}

/** Drag and Sort **/
.dragged {
    position: absolute;
    opacity: 0.5;
    z-index: 2000;
}
.sortable {
    list-style-type: none;
    cursor: move;
}
.sortable li span {
    margin-left: 5px;
}
.sortable li.placeholder {
    position: relative;
}
.sortable li.placeholder:before {
    position: absolute;
}

/** Drag and Drop to Match Left vs Right **/
.dd-left {
    width:30%;
    height:auto;
    float: left;
}
.dd-right {
    width:30%;
    height:auto;
    float: right;
    margin-right: 15%;
}
.draggablediv {
    background-color: #F3F3F3;
    border:1px solid #aaaaaa;
    margin-top:15px;
}
.droppablediv {
    border:1px solid #aaaaaa;
    margin-top:15px;
    padding: 5px;
}
.droptext {
    margin: 5px;
}

.export-wrap {
    margin-bottom: 20px;
    width: 100%;
}

.tleft {
    width: 40%;
}

.tright {
    width: 60%;
    text-align: right;
}

.report-export{
    margin-top: 20px;
}

.ddmatch .list-group-item {
    cursor: move;
}

/** Media Css */
@media only screen and (max-width: 320px) {
    .form-control{width: 100%;}
}

/** JQuery Steps Css **/
#test-tab .card-body {
    min-height: 12em;
    padding-left: 1em;
}
#tabinfo {
    float: right;
    padding-right: 3em;
    margin-top: -2.5em;
    color: #0096D5;
    font-weight: bold;
    font-size: 1em;
}
.wizard, .tabcontrol {
    display: block;
    width: 100%;
    overflow: hidden;
}

.wizard a, .tabcontrol a {
    outline: 0;
}

.wizard ul, .tabcontrol ul {
    list-style: none !important;
    padding: 0;
    margin: 0;
}

.wizard ul > li, .tabcontrol ul > li {
    display: block;
}

.wizard > .steps .current-info, .tabcontrol > .steps .current-info {
    position: absolute;
    left: -999em;
}

.wizard > .content > .title, .tabcontrol > .content > .title {
    position: absolute;
    left: -999em;
}

.wizard > .steps {
    position: relative;
    display: block;
    width: 100%;
    padding-top: 1em;
    padding-bottom: 1em;
}

.wizard.vertical > .steps {
    display: inline;
    float: left;
    width: 30%;
}

.wizard > .steps .number {
    font-size: 1.429em;
}

.wizard > .steps > ul > li {
    width: auto;
}

.wizard > .steps > ul > li, .wizard > .actions > ul > li {
    float: left;
}

.wizard > .steps a, .wizard > .steps a:hover, .wizard > .steps a:active {
    display: block;
    width: auto;
    margin: 0 0.2em 0.1em;
    padding: 0.2em 0.5em;
    text-decoration: none;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.wizard > .steps .disabled a, .wizard > .steps .disabled a:hover, .wizard > .steps .disabled a:active {
    background: #eee;
    color: #aaa;
    cursor: default;
}

.wizard > .steps .current a, .wizard > .steps .current a:hover, .wizard > .steps .current a:active {
    background: #0096D5;
    color: #fff;
    cursor: default;
}

.wizard > .steps .done a, .wizard > .steps .done a:hover, .wizard > .steps .done a:active {
    background: #9dc8e2;
    color: #fff;
}

.wizard > .steps .error a, .wizard > .steps .error a:hover, .wizard > .steps .error a:active {
    background: #ff3111;
    color: #fff;
}

.wizard > .actions {
    position: relative;
    display: block;
    text-align: right;
    width: 100%;
}

.wizard > .actions > ul {
    display: inline-block;
    text-align: right;
}

.wizard > .actions > ul > li {
    margin: 0 0.5em;
}

.wizard.vertical > .actions > ul > li {
    margin: 0 0 0 1em;
}

.wizard > .actions a, .wizard > .actions a:hover, .wizard > .actions a:active {
    background: #0096D5;
    color: #fff;
    display: block;
    padding: 0.5em 1em;
    text-decoration: none;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.wizard > .actions .disabled a, .wizard > .actions .disabled a:hover, .wizard > .actions .disabled a:active {
    background: #eee;
    color: #aaa;
}

.wizard > .loading {
}

.wizard > .loading .spinner {
}

.tabcontrol > .steps {
    position: relative;
    display: block;
    width: 100%;
}

.tabcontrol > .steps > ul {
    position: relative;
    margin: 6px 0 0 0;
    top: 1px;
    z-index: 1;
}

.tabcontrol > .steps > ul > li {
    float: left;
    margin: 5px 2px 0 0;
    padding: 1px;

    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.tabcontrol > .steps > ul > li:hover {
    background: #edecec;
    border: 1px solid #bbb;
    padding: 0;
}

.tabcontrol > .steps > ul > li.current {
    background: #fff;
    border: 1px solid #bbb;
    border-bottom: 0 none;
    padding: 0 0 1px 0;
    margin-top: 0;
}

.tabcontrol > .steps > ul > li > a {
    color: #5f5f5f;
    display: inline-block;
    border: 0 none;
    margin: 0;
    padding: 10px 30px;
    text-decoration: none;
}

.tabcontrol > .steps > ul > li > a:hover {
    text-decoration: none;
}

.tabcontrol > .steps > ul > li.current > a {
    padding: 15px 30px 10px 30px;
}

.shortcut-menu {
    z-index: 9;
    margin-top: -20px;
}

.shortcut-menu ul li {
    padding: 0;
    background: initial;
}

/*-------------------------------

    POPUP.CSS

-------------------------------*/

.popup_back {
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}

.popup_cont {
    position: fixed;
    z-index: 9999;
}

.preloader {
    z-index: 9998;
}

/*---------------------

    EDIT BELOW

*/

.popup_close {
    color: #888;
    cursor: pointer;
    position: absolute;
    padding: 5px;
    right: 5px;
    top: 0;
}

.popup_close:hover {
    color: #111;
}

.popup_back {
    cursor: pointer;
    background-color: #222;
}

div.popup {
    background: #fff;
    padding: 25px;
    box-shadow: 0 3px 10px #222;
}

.preloader {
    left: 50%;
    margin: -10px 0 0 -25px;
    position: fixed;
    top: 50%;
}

.menu {
    display: none;
}

.actions {
    margin-bottom: 15px;
}
.bar {
    background: #23527c;
    padding: 5px;
    border-bottom: 1px solid white;
}

.bar a {
    color: white;
}

/** Previous-Top-Next Menu CSS **/
div.prev_top_nxt {
    float: left;
    height: auto;
    margin-bottom: 15px;
    margin-top: 30px;
    width: 100%;
}

div.prev_top_nxt div.prev_page {
    float: left;
    text-align: left;
    width: 33%;
}

div.prev_top_nxt div.top_page {
    float: left;
    text-align: center;
    width: 33%;
}

div.prev_top_nxt div.nxt_page {
    float: right;
    text-align: right;
    width: 33%;
}

div.prev_top_nxt div.nxt_page a {
    background: transparent url(../../../../../../typo3conf/ext/lms3courses/Resources/Public/Images/arrow-right.png) no-repeat scroll right top;
    color: #000;
    font-size: 16px;
    float: right;
    height: 22px;
    padding-top: 25px;
    text-decoration: none;
}

div.prev_top_nxt div.nxt_page a:hover {
    background: transparent url(../../../../../../typo3conf/ext/lms3courses/Resources/Public/Images/arrow-right.png) no-repeat scroll right top;
    color: #000;
}

div.prev_top_nxt div.top_page a {
    background: transparent url(../../../../../../typo3conf/ext/lms3courses/Resources/Public/Images/arrow-up.svg) no-repeat scroll center top;
    color: #000;
    font-size: 16px;
    float: right;
    height: 23px;
    margin-right: 43%;
    padding-top: 25px;
    text-decoration: none;
    width: auto;
}

div.prev_top_nxt div.top_page a:hover {
    background: transparent url(../../../../../../typo3conf/ext/lms3courses/Resources/Public/Images/arrow-up.svg) no-repeat scroll center top;
    color: #000;
}

div.prev_top_nxt div.prev_page a {
    background: transparent url(../../../../../../typo3conf/ext/lms3courses/Resources/Public/Images/arrow-left.png) no-repeat scroll left top;
    color: #000;
    font-size: 16px;
    float: left;
    height: 22px;
    padding-top: 25px;
    text-decoration: none;
}

div.prev_top_nxt div.prev_page a:hover {
    background: transparent url(../../../../../../typo3conf/ext/lms3courses/Resources/Public/Images/arrow-left.png) no-repeat scroll left top;
    color: #000;
}

/** Redmine-2166 Implementation **/
.card-feedback {
    display: none;
}

.sortable .list-group-item {
    position: initial;
}

.sortable .placeholder {
    height:40px;
}

#test-timer {
    transition: all 0.8s ease;
    position: fixed;
    width: 100%;
    text-align: center;
    font-size: 72px;
    line-height: 108px;
    height: 108px;
    background: #1e7832;
    left: 0;
    top: 0;
    z-index: 9999999;
    color: white;
}

div.timer-sticky {
    font-size: 32px !important;
    line-height: 60px !important;
    height: 60px !important;
    background: #f0ad4e !important;
}

.blink {
    animation: blinker 1s linear infinite;
    color: red;
}

@keyframes blinker {
    50% { opacity: 0; }
}

#timeout-actions, #cheating {
    width: 30%;
    min-width: 280px;
    text-align: center;
    padding: 15px;
    margin: 0 auto;
    position: absolute;
    top: 20%;
    background: #c3c3c3;
}

#timeout-actions p {
    text-align: left;
}

#timeout-actions h2 {
    margin-top: 0;
}

#timeout-actions .buttons {
    margin-top: 5px;
}

.loadingoverlay #timeout-actions,
.loadingoverlay #cheating {
    display: block !important;
}

#attempts-chart {
    max-width: 500px;
    margin: 0 auto;
}

.lms3-notification .bg-warning {
    padding: 15px;
    vertical-align: middle;
}

.table .details-control {
    vertical-align: middle;
    position: relative;
}

.table .details-control i {
    display: none;
    height: 100%;
    line-height: 100%;
    margin-top: 2px;
    padding-right: 5px;
}

.table .details-control p {
    display: inline;
}

.table .details-control .fa-plus-circle {
    display: inline-block !important;
}

.table .details-control.opened .fa-minus-circle {
    display: inline-block !important;
}
.table .details-control.opened .fa-plus-circle {
    display: none !important;
}

.detail tr, .detail td {
}

.detail td, .detail tr {
    vertical-align: middle !important;
}

.detail td:nth-child(2),
.detail td:nth-child(3),
.detail td:nth-child(4),
.detail td:nth-child(5) {
    text-align: center !important;
}

.detail .progress {
    margin-bottom: 0;
}

.detail .fa-check {
    color: green;
    margin-right: 5px;
}

.detail .fa-times {
    color: #d9534f;
    margin-right: 5px;
}

.detail .fa-spinner {
    color: darkmagenta;
    margin-right: 5px;
}

.detail .pending {
    background-color: #c2c2cc;
}

#jqxWidget .progress {
    margin-bottom: 0;
}

#jqxWidget .progress .progress-bar {
    text-align: center;
    line-height: 28px;
}

#jqxWidget .progress .progress-bar-success {
    background: lightgreen;
    color: black;
}

.jqx-grid-cell-middle-align-date {
    text-align: center;
    margin-top: 5px;
}

.table-avatar {
    margin-left: 15px;
    border-radius: 50%;
}

.progress-finished {
    background: lightgreen;
    height: 100%;
    margin-top: 0;
    line-height: 26px;
}

.progress-finished div,
.progress-failed div
{
    height: 100%;
    padding-top: 6px;
    margin: 0;
}

.progress-failed {
    background: #FA8072;
    height: 100%;
}

.fa-flag-o {
    padding-left: 15px;
    color: black;
}

.left-offset {
    padding-left: 15px;
    line-height: 26px;
}

.jqx-item .fa-check {
    color: green;
    font-size: 18px;
    margin: 5px auto;
}

#previous {
    overflow: scroll;
    height: 118px;
}

.badge-remove {
    background: brown;
}

#previous .fa-check {
    font-size: 20px;
    color: green;
}

#report_export {
    float: right;
    margin-bottom: 10px;
}

.jqx-grid-cell {
    margin-left: 0 !important;
}

.course-title {
    width: 300px;
}

.badge-success {
    background-color: #468847 !important;
}