/**
 *@description: This contains additional css, which is not possible through default bs.
 *
 */

@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
    a[href]:after {
        content:"" !important;
    }
    
    .btn {
        display: none !important;
    }
}


body {
    min-width: 1024px;
}
.instructions {
    list-style-type:none;
    list-style-position: inside;
}
body .modal.large {
     width: 90%; /* desired relative width */
  left: 5%; /* (100%-width)/2 */
  /* place center */
  margin-left:auto;
  margin-right:auto; 
}

.instructions li:before {
    content: "\00BB \0020";
}
         
.prominent-message {  /* This is used for showing success/failure messages */
    font-size: 1.5em;
}

.pagination {
    margin: 0px;    
}

#bottom-nav-bar {
    -webkit-box-shadow: 3px -3px 3px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 3px -3px 3px rgba(0, 0, 0, 0.1);
    box-shadow: 3px -3px 3px rgba(0, 0, 0, 0.1);
}

#outer-container {
   /* margin-left:1%;
    margin-right:1%;*/
    margin-bottom: 2em;
}

#nav-menu-left {
    width:15%;
    overflow:hidden;
}

.list-group-item.active a {
    color: #fff;
}

/* Bootstrap classes with added styles */
.btn-danger {
    margin-right:30px;
    margin-left: 30px;
}

.btn-primary {
    margin-right: 5px;
    margin-left: 5px;
}


/* Start Login Page */
#loginpage_server_time {
    font-size: 40px;
}
/* End Login Page */


/* Start TakeTest  Page */

#top-nav-bar {
    margin-bottom:0px;
    background-color: #d5d5d5;
}

#top-nav-bar .navbar-header{
    width: 60%;
}

#welcome {
    color:rgb(70, 130, 180);
    margin-left: 10px;
    float: left;
    margin-top:0.7em
}
#welcome span {
    text-transform: capitalize;
}

#exam-list {
    width:80%;
    margin-left:10%;
}

/* End TakeTest Page */


/* Start of FAQ Page */

.faq-qs {
    list-style:upper-roman;
    font-weight:bold;
}
.faq-qs li {
    margin-bottom: 1em;
}

.faq-qs .steps {
    font-weight: normal;
}
.faq-qs .steps li {
    margin-bottom:0.1em;   
}

#faq-form label{
    width: 25%;
    padding-top: 7px;
    padding-right: 15px;
    padding-left: 15px;
    margin-bottom: 0;
    margin-top:0;
}
#faq-form .inpwid{
    width:50%;
}
.panelwid{
    width:70%;
}
#faq-form .txtarea{
    width:65%;
}
#faq-form .txtarea textarea{
    resize:none;
}
#faq-form .repbtn{
    margin-left:23%
}
/* End of FAQ Page */

/* Video Demo Page */
.video_demo_container {
    display: table-cell;
    vertical-align: middle;
    width: 529px;
    height: 299px;
    left: 0px;
    top: 0px;
}

/* End of Video Demo Page */

/* Candidates & Dealers*/
#content-container .mid{
    vertical-align: middle;
}
/* End Candidates & Dealers */

/* post login header*/
.beta {
    color: #527FA3;
    line-height: 48px;
    text-shadow: 2px 2px 3px #A882EC;
}

#flashmessage_container {
    width: 50%;
    left: 25%;
    top: 0;
    position: fixed;
    z-index: 10000;
    padding: 0 5px;
    background-color: #F9EDBE;
    border-radius: 5px;
}

#flasmessage_inner {
    float:left;
    width: 92%;
    height: 30px;
    white-space: nowrap;
    line-height: 37px;
    text-overflow: ellipsis;
    overflow: hidden
}
/* post login header end*/
tr.row-blocked, tr.row-blocked td {
    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAFklEQVQIW2NkwAIYcQluRpfAqRLDBAAq5QC5RU0eZwAAAABJRU5ErkJggg==');
    background-repeat: repeat-x;
    background-position: 50% 50%;
}
tr.row-blocked td.block{
    background-image: none !important;
}

/* Misc box */
.plainbox{
    background-color: white;
    border: 1px solid #999;
    box-shadow: 0 0 30px #C5C9B2;
    padding-right: 30px;
}

/*exams edit*/
#ex_edit_form div[class='pull-left']{
    width:45%;
}
#ex_edit_form .ipwd{
    width: 45%;
    display:inline-block;
}
#ex_edit_form label[class='control-label']{
    width: 45%;
    margin-right: 15px;
}
/* Error Message */
#errormessage {
    position: absolute;
    z-index: 3000;
    top:0;
    left:0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7); 
}

#errormessage_container {
    margin: 5%;
}

.panel-heading h3, h4{
    margin-top: 4px;
}
.detail-margin{
    margin-top: 2%;
    margin-left: 10%;
}/* Player css */

#img_player {
    width :100%;
    height:85%;
}

#video_player {
    width: 100%;
    height:100%;
    margin: auto;
    background-color: gray;
    text-align: center;
}

#video_player video{
    
}

#html_player {
    
}

.hover-group .hover-toggle{
    visibility:hidden;
}

.hover-group:hover .hover-toggle{
    visibility:visible;
}

#taketest{
    -webkit-user-select: none;
}

.btn-link-warning{
    color:#EEA236;
}

.btn-link-warning:hover{
    color:#CA7D0F;
}

.btn-link-danger{
    color:red;
}

.btn-link-danger:hover{
    color:red;
}

.searhHeaderClearIcon{
    left: -20px;
    padding: 0px;
    color: #B8B5B5 !important;
    text-decoration: none !important;
}

h4 {
    text-transform: capitalize;
}

p {
    text-indent:0.5em;
    text-align:justify;
}
p:first-letter {
    text-transform:uppercase;
}

div.stats {
    text-align: justify;
}
div.stats strong {
    margin-left: 3em;
}

#reports td {
    vertical-align: middle;
}
.padding-left-5px{
    padding-left:5px;
}

.vertical-table-header {
    text-align:center;
    white-space:nowrap;
    transform-origin:50% 50%;
    -webkit-transform-origin:50% 50%;
    transform: rotate(90deg);
    -webkit-transform:rotate(90deg);
}

.vertical-table-header:before {
    content:'';
    padding-top:105%;/* takes width as reference, + 10% for faking some extra padding */
    display:inline-block;
    vertical-align:middle;
}

.ar-bg-lavendar {
    /*background-color: rgb(84, 132, 237);*/
    background-color:#9A9CFF
}

.ar-bg-orange {
    background-color: rgb(255, 184, 120);
}

#ar-fixed-students-panel {
    position: relative;
    top     : 0px;
    width: 45%;
}

#ar-fixed-students-panel ul{
    height: 30em;
    overflow-y: scroll;
    overflow-x:hidden;
}

#ar-fixed-batch-panel {
    position: relative;
    top: 0px;
    width: 45%;
}

#ar-students-group {
    height: 25em;
    overflow-y: scroll;
    overflow-x:hidden;
}

.ar-text-upper {
    text-transform: uppercase; 
}

.ar-text-capitalize {
    text-transform: capitalize;
}


/** reference: https://gist.github.com/matthiasg/6153853 **/
/* Side notes for calling out things
-------------------------------------------------- */

/* Base styles (regardless of theme) */
.bs-callout {
margin: 20px 0;
padding: 15px 30px 15px 15px;
border-left: 5px solid #eee;
}
.bs-callout h1,
.bs-callout h2,
.bs-callout h3,
.bs-callout h4,
.bs-callout h5,
.bs-callout h6 {
margin-top: 0;
}

.bs-callout-danger h1,
.bs-callout-danger h2,
.bs-callout-danger h3,
.bs-callout-danger h4,
.bs-callout-danger h5,
.bs-callout-danger h6 {
color: #B94A48;
}

.bs-callout-warning h1,
.bs-callout-warning h2,
.bs-callout-warning h3,
.bs-callout-warning h4,
.bs-callout-warning h5,
.bs-callout-warning h6 {
color: #C09853;
}

.bs-callout-info h1,
.bs-callout-info h2,
.bs-callout-info h3,
.bs-callout-info h4,
.bs-callout-info h5,
.bs-callout-info h6 {
color: #3A87AD;
}

.bs-callout-success h1,
.bs-callout-success h2,
.bs-callout-success h3,
.bs-callout-success h4,
.bs-callout-success h5,
.bs-callout-success h6 {
color: #3C763D;
}

.bs-callout p:last-child {
margin-bottom: 0;
}

.bs-callout code,
.bs-callout .highlight {
background-color: #fff;
}

/* Themes for different contexts */
.bs-callout-danger {
background-color: #fcf2f2;
border-color: #dFb5b4;
}
.bs-callout-warning {
background-color: #fefbed;
border-color: #f1e7bc;
}
.bs-callout-info {
background-color: #f0f7fd;
border-color: #d0e3f0;
}
.bs-callout-success {
background-color: #dff0d8;
border-color: #d6e9c6;
}

/** Callout css ends here **/

.checkbox input[type=checkbox]{
    margin-left: -15px !important;
}
@-moz-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Firefox */
@-webkit-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Webkit */
@-ms-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* IE */
@keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Opera and prob css3 final iteration */

.flash-warn-time{
    position:absolute;
    top:0;
    left:40%;
    z-index:9999;
    -moz-transition:all 1s ease-in-out;
    -webkit-transition:all 1s ease-in-out;
    -o-transition:all 1s ease-in-out;
    -ms-transition:all 1s ease-in-out;
    transition:all 1s ease-in-out;
    /* order: name, direction, duration, iteration-count, timing-function */  
    -moz-animation:blink normal 2s infinite ease-in-out; /* Firefox */
    -webkit-animation:blink normal 2s infinite ease-in-out; /* Webkit */
    -ms-animation:blink normal 2s infinite ease-in-out; /* IE */
    animation:blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */

}
.fullScreen-occupy .modal-dialog {
    width: 100%;
    height: 100%;
    margin:0px;
}
.fullScreen-occupy .modal-content {
    width: 100%;
    height: 100%;
    margin:0px;
}
.fadeout {
    opacity: 0;
    transition : opacity 2s ease-out 1s;
    -ms-transition : opacity 2s ease-out 1s;
    -moz-transition : opacity 2s ease-out 1s;
    -webkit-transition : opacity 2s ease-out 1s;
}
.fadein {
    opacity: 0.8;
    transition : opacity 2s ease-out 0s;
    -ms-transition : opacity 2s ease-out 0s;
    -moz-transition : opacity 2s ease-out 0s;
    -webkit-transition : opacity 2s ease-out 0s;
}
 .carousel-control{
    width:5%;
}

.thumbnail_carousel  .carousel-control{
    width:3%;
    background: #fff;
}
.thumbnail_carousel  .carousel-control .glyphicon {
    color:#337ab7;
    font-size:20px;
}
.highlight{
    background-color:#D5E4ED;
}
.course_dashboard .carousel-indicators li{
    border: 1px solid #337ab7;
}
.course_dashboard .carousel-indicators .active{
    background-color:#337ab7;
}
.thumbnail_carousel  .carousel-indicators{
    display:none;
}


.ticket_item {
    background-repeat: no-repeat;
    background-position: right top;
    padding-right:80px;
}

.ticket_new {
    background-image:url(/static/img/ticket/new.png);    
}

.ticket_open {
    background-image:url(/static/img/ticket/open.png);    
}

.ticket_pending {
    background-image:url(/static/img/ticket/pending.png);    
}

.ticket_closed {
    background-image:url(/static/img/ticket/closed.png);    
}

.ar-page-heading {
    margin-left:5px;
    padding-bottom: 15px;
    border-bottom: 1px solid #cccccc
}

#content-container {
    padding-left:30px;
    padding-right:20px;
}



.user-profile {
    height: 196px;
}

.user-profile img {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 20px;
    left: 25%;
    border-radius: 50px;
}
.user-profile h2 {
    position: absolute;
    margin-top: 130px;
    font-size: 20px;
    text-align: center;
    width:100%;
    text-transform:capitalize;
}
.user-profile p {
    position: absolute;
    margin-top: 156px;
    font-size: 14px;
    text-align: center;
    width:100%;
    text-transform:capitalize;
}



/** Bootstrap extra **/
h1>.badge, h2>.badge, h3>.badge {
    vertical-align:middle;
}

h1>.label, h2>.label, h3>.label {   /* may not be needed */
    vertical-align:middle;
}


/** Overwrite Bootstrap css **/
.btn-danger {
    margin-right:2px;
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

/* workaround for modal-backdrop angular-bootstrap issue
    ref: http://stackoverflow.com/questions/28319230/angular-bootstrap-modal-backdrop-not-showing-for-bootstrap-css-version-3-3-2
*/
.modal-backdrop {
  bottom: 0;
  position: fixed;
}

/** Below is hack for datepicker overflowing through right */

.hackyhack {
    position: relative;
}
.hackyhack .dropdown-menu {
    left: auto !important;
    right: 0px;
}
 
 
/** Table related extra css */

.table-head tr>th{
   font-weight: bold;
}
 
.table .fm-actions {
    text-align: right;
    padding-right: 1em;
}

.table .fm-actions button{
    margin-left: 0.2em;
}

/** Button outline
    Refer: http://bootsnipp.com/snippets/featured/bootstrap-outline-buttons **/

.btn-outline {
    background-color: transparent;
    color: inherit;
    transition: all .5s;
}

.btn-primary.btn-outline {
    color: #428bca;
}

.btn-success.btn-outline {
    color: #5cb85c;
}

.btn-info.btn-outline {
    color: #5bc0de;
}

.btn-warning.btn-outline {
    color: #f0ad4e;
}

.btn-danger.btn-outline {
    color: #d9534f;
}

.btn-primary.btn-outline:hover,
.btn-success.btn-outline:hover,
.btn-info.btn-outline:hover,
.btn-warning.btn-outline:hover,
.btn-danger.btn-outline:hover {
    color: #fff;
}

/** btn outline ends here **/


.fm-card {
    background-color:white;
    padding:1em 1em 1em 1em;
    margin-top:1em;
    margin-bottom: 1em;
}

.fm-card-nobg {
    padding:0.2em 1em 1em 1em;
    margin-top:1em;
}

.table>tbody>th>td.v-center, .table>tbody>tr>td.v-center {
    vertical-align: middle;
}


/** timeline **/

.timeline {
    position: relative;
    padding: 0px 0 20px;
    list-style: none;
}

.timeline:before {
    content: " ";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 5%;
    width: 3px;
    margin-left: -1.5px;
    background-color: #eeeeee;
}

.timeline > li {
    position: relative;
    margin-bottom: 10px;
}

.timeline > li:before,
.timeline > li:after {
    content: " ";
    display: table;
}

.timeline > li:after {
    clear: both;
}

.timeline > li:before,
.timeline > li:after {
    content: " ";
    display: table;
}

.timeline > li:after {
    clear: both;
}

.timeline > li > .timeline-panel {
    float: left;
    position: relative;
    width: 90%;
    padding: 20px;
    padding-top: 10px;
    border: 1px solid #d4d4d4;
    border-radius: 2px;
    -webkit-box-shadow: 0 1px 6px rgba(0,0,0,0.175);
    box-shadow: 0 1px 6px rgba(0,0,0,0.175);
}

.timeline > li > .timeline-panel:before {
    content: " ";
    display: inline-block;
    position: absolute;
    top: 26px;
    right: -15px;
    border-top: 15px solid transparent;
    border-right: 0 solid #ccc;
    border-bottom: 15px solid transparent;
    border-left: 15px solid #ccc;
}

.timeline > li > .timeline-panel:after {
    content: " ";
    display: inline-block;
    position: absolute;
    top: 27px;
    right: -14px;
    border-top: 14px solid transparent;
    border-right: 0 solid #fff;
    border-bottom: 14px solid transparent;
    border-left: 14px solid #fff;
}

.timeline > li > .timeline-badge {
    z-index: 100;
    position: absolute;
    top: 16px;
    left: 5%;
    width: 50px;
    height: 50px;
    margin-left: -25px;
    border-radius: 50% 50% 50% 50%;
    text-align: center;
    font-size: 1.4em;
    line-height: 50px;
    color: #fff;
    background-color: #999999;
}

.timeline > li.timeline-inverted > .timeline-panel {
    float: right;
}

.timeline > li.timeline-inverted > .timeline-panel:before {
    right: auto;
    left: -15px;
    border-right-width: 15px;
    border-left-width: 0;
}

.timeline > li.timeline-inverted > .timeline-panel:after {
    right: auto;
    left: -14px;
    border-right-width: 14px;
    border-left-width: 0;
}

.timeline-badge.primary {
    background-color: #2e6da4 !important;
}

.timeline-badge.success {
    background-color: #3f903f !important;
}

.timeline-badge.warning {
    background-color: #f0ad4e !important;
}

.timeline-badge.danger {
    background-color: #d9534f !important;
}

.timeline-badge.info {
    background-color: #5bc0de !important;
}

.timeline-title {
    margin-top: 0;
    color: inherit;
}

.timeline-body > p,
.timeline-body > ul {
    margin-bottom: 0;
}

.timeline-body > p + p {
    margin-top: 0px;
}

@media(max-width:767px) {
    ul.timeline:before {
        left: 40px;
    }

    ul.timeline > li > .timeline-panel {
        width: calc(100% - 90px);
        width: -moz-calc(100% - 90px);
        width: -webkit-calc(100% - 90px);
    }

    ul.timeline > li > .timeline-badge {
        top: 16px;
        left: 15px;
        margin-left: 0;
    }

    ul.timeline > li > .timeline-panel {
        float: right;
    }

    ul.timeline > li > .timeline-panel:before {
        right: auto;
        left: -15px;
        border-right-width: 15px;
        border-left-width: 0;
    }

    ul.timeline > li > .timeline-panel:after {
        right: auto;
        left: -14px;
        border-right-width: 14px;
        border-left-width: 0;
    }
}

.stticket h4 {
    margin-bottom: 0px;
}


.thumb {    /* added for file upload preview */
    width: 24px;
    height: 24px;
    float: none;
    position: relative;
    top: 7px;
}

.fm-file-name {
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fm-text-ellipsis {
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/** Refer: https://github.com/twbs/bootstrap/issues/3737 **/

.form-condensed .form-group {
    margin-top: 0;
    margin-bottom: 5px;
}


/** Refer : http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-transparent-and-fullscreen-modals **/

.modal-fullscreen .modal-dialog {
    margin: 0;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
}

@media (min-width: 768px) {
    .modal-fullscreen .modal-dialog {
      width: 750px;
    }
}
@media (min-width: 992px) {
    .modal-fullscreen .modal-dialog {
      width: 970px;
    }
}
@media (min-width: 1200px) {
    .modal-fullscreen .modal-dialog {
       width: 1170px;
    }
}

.fm-centered-msg {
    text-align: center;
    font-style: italic;
    margin-top:15em;
}

.v-center {
    vertical-align: middle;
}

.carousel-indicators {
    bottom: 0px;
    display: none;
}

.fm-print-margin-bottom-30 {
    margin-bottom: 30px
}

.fm-print-margin-bottom-20 {
    margin-bottom: 30px
}

.fm-print-margin-top-30{
    margin-top: 30px
}

.fm-print-margin-top-20{
    margin-top: 20px
}
.fm-print-hr{
    height:3px;
    border:none;
    color:#333;
    background-color:#333;
}