/**
 * Original Author: Nilavra Bhattacharya
 * Date: 2019-05-14
 * Time: 03:30 PM
 */

body{ font-family: sans-serif!important;}

li.ins, li.ins li {
    /*font-size: 18px;*/
    /*color: #007bff;*/
    /*font-style: italic;*/
}

li.ins { margin: 6px 0; }
li.ins li { margin: 3px 0; }


.auto_caption{
    /*font-size: 16px;*/
    /*color: #dc3545 !important;*/
    /*color: blue;*/
}

ol.worker_comments{
    /*font-size: 18px;*/
    color: blue;
}

ul.batch_stats{
    /*font-size: 18px;*/
    color: black;
}

ol.worker_comments li,
ul.batch_stats li {
    margin-bottom: 10px;
}

.auto_caption i{
    color: blue;
    /*font-size: 18px;*/
}




ol.ans{
    columns: 2;
    width: 90%;
}




.crowd_caption > li:not(.red) code,
ol.worker_comments code
{
    color: black;
    background-color: #f1f1f1;
}

p {
    /*font-size: 15px;*/
}

.crowd_caption > li.red  code {
    cursor: text;
}

.oth_issue {
    /*background-color: white !important;*/
    /*font-weight: normal !important;*/
    color: blue;
    /*font-size: 16px;*/
    /*font-style: italic;*/
}

.well.flags {
    /*font-family: monospace;*/
}

.annotation_heatmaps {
    height: 80px;
    min-width: 300px;
    max-width: 100%;
    margin: 0 auto;
}


.row{ margin-top: 5px;}

.tooltip-inner{
    /*font-size: 16px;*/
}


.page_links, /*remove this later*/
.border_top {
    border-top: 2px solid #aaa;
    padding-top: 20px;
}




#submitBtn{
    margin-top: 50px;
    height: 70px;
    /*font-size: 30px;*/
}

.motivation{
    margin-top: 10px;
    /*margin-bottom: 0px;*/
    /*font-size: 17px!important;*/
}

.motivation p {
    margin: 0 0 10px;
}

.row-fixed {
    position: fixed;
    background: #fff;
    z-index: 10;
    /*max-width: 970px;*/
    width: 100%;
    -webkit-box-shadow: 0px 1px 5px 0px rgba(200,200,200,0.4);
    -moz-box-shadow: 0px 1px 5px 0px rgba(200,200,200,0.4);
    box-shadow: 0px 1px 5px 0px rgba(200,200,200,0.4);
    margin-top: 0px;
    /*border-bottom: 1px solid;*/
}
.row-padding {
    padding-top: 250px; /* height of your fixed row*/
}

.row-margin {
    margin-top: 250px; /* height of your fixed row*/
}

span#NUM_FILTERED_ROWS strong.load_finish {
    /*background-color: yellow;*/
}


.mark, mark {
    background-color: #f8d7a8;
    padding: 0;
    font-weight: bold;
}

span.img_count {
    /*font-family: monospace;*/
    font-weight: bold;
}

.annotation_heatmaps {
    height: 90px;
    min-width: 300px;
    max-width: 100%;
    margin: 0 auto;
}


/*---------------- thumbnail -----------*/
a.thumbnail_a{
    display: inline-block;
    border: 1px solid #777;
}
img.thumbnail_img {
    max-height: 135px;
}

/*---------------- details -----------*/

.img_heading {
    border-top: 2px solid #aaa;
    padding-top: 10px;
}

.img_heading:first-child {
    margin-top: 0px;
}

.img{
    /*font-size: 14px;*/
    font-family: monospace;
    /*font-weight: bold;*/
}

.imgBox > img {
    border: 1px solid #777777;
}

ul.crowd_results { padding-left: 25px;}


.crowd_caption > li {
    /*font-size: 18px;*/
    margin-bottom: 10px;
}

/*.crowd_caption > li.red {*/
/*color: red;*/
/*cursor: pointer;*/
/*!*background-color: yellow;*!*/
/*font-weight: bold;*/
/*}*/

.crowd_caption span.worker_dtl {
    color: mediumslateblue;
    /*font-size: 15px;*/
}

.crowd_caption > li.red > span.caption{
    color: red;
    cursor: pointer;
    background-color: yellow;
    font-weight: bold;
}

.crowd_caption > li  code {
    font-weight: normal;
}













/*
 * off Canvas sidebar
 * --------------------------------------------------
 */

body {height:100%;}
html {height:100%;}
.row-offcanvas {height:100%;}

#sidebar {
    width: inherit;
    min-width: 350px;
    max-width: 350px;
    background-color:#fafafa;
    float: left;
    height:100%;
    position:relative;
    overflow-y:auto;
    overflow-x:hidden;
}

#main {
    height:100%;
    overflow:auto;
}

@media screen and (max-width: 768px)
{
    .row-offcanvas {
        position: relative;
        -webkit-transition: all 0.25s ease-out;
        -moz-transition: all 0.25s ease-out;
        transition: all 0.25s ease-out;
        width:calc(100% + 350px);
    }

    .row-offcanvas-left
    {
        left: -350px;
    }

    .row-offcanvas-left.active {
        left: 0;
    }

    .sidebar-offcanvas {
        position: absolute;
        top: 0;
    }
}