/* here you can put your own css to customize and override the theme */

/***
Rounded Portlets
***/
/*
.portlet {
	border-radius: 4px !important;
}

.portlet .portlet-title {
	border-radius: 4px 4px 0px 0px !important;
}

.portlet .portlet-body,
.portlet .portlet-body .form-actions  {
	border-radius: 0px 0px 4px 4px !important;
}
*/
.center {
  text-align: center;
}
/* Login Page CSS */
.login .page-footer {
  margin: 0 auto;
  text-align: center;
  padding: 10px 0;
}
.login .page-footer .page-footer-tools {
  display: none;
}
.login .page-footer .page-footer-inner {
  float: none;
  color: #eee;
}
.login .page-footer .page-footer-inner a {
  color: orange;
}
/* Login Page CSS */

/* Reports */
.add_to_filter, #report_table .show_on_hover {display: none;}

.details-show .fa-spin {
  font-size: 50px;
  margin: 50px;
}
.details-heading {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  margin: 10px;
}
.css_table {
  display: table;
  width: 100%;
  background: white;
  text-align: center;
}
.css_table > div {
  display: table-row;
}
.css_table > div > div {
  display: table-cell;
  padding: 5px;
}
.css_table > div > div.th {
  background: #0fa1e0;
  font-weight: bold;
  color: white
}

#report_table .report_details {
  background: #d6d6d6;
}
.report_details .details-buttons {
  margin: 15px;
}
.report_details > div {
  max-width: 100vw;
}
.report_details .details-buttons > a {
  margin: 10px;
}
#report_table ol {
  padding: 0 15px;
}
.page-bar {
  margin-bottom: 20px;
}
/* Reports *.

/* Filter */
.filter-add {
  float: right;
}
input.form-control.dark[type=text] {
  background-color: #3d3d3d;
  color: #616161;
}
#filter-sidebar .filter-title a {
  font-weight: bold;
  color: #60a203;
}
#filter-sidebar input.form-control[type=text] {
  width: 100% !important;
}
#filter-sidebar .fa-plus, #filter-sidebar .icon-plus, #filter-sidebar .icon-magnifier {
  color: #E6C528;
}
#filter-sidebar .fa-times {
  color: red;
}
#filter-sidebar .list-items.list-save-filter a i.fa:hover {
    font-size: 1.5em;
}
.bootstrap-switch {
  max-height: 28px;
}
.bootstrap-switch-label {
  padding: 5px 10px;
}
.maxw30pc {
  max-width: 30%;
}
.margin10l {
  margin-left: 10px;
}
.list-activities .object-add {
  margin-top: 10px;
  right: 10px;
  position: absolute;
  display: inline-block;
}
.tools .fa.important {
  color: orange;
}
.tools .fa .badge {
  display: none;
}
.tools .fa.important .badge {
  display: inline-block;
  position: relative;
  top: -8px;
  left: -4px;
}
.page-quick-sidebar-wrapper.filter-fullscreen {
  width: 100%;
}

.page-quick-sidebar-wrapper .expand-contract .fa-expand, .page-quick-sidebar-wrapper.filter-fullscreen .expand-contract .fa-compress {
  display: block;
}
.page-quick-sidebar-wrapper .expand-contract .fa-compress, .page-quick-sidebar-wrapper.filter-fullscreen .expand-contract .fa-expand {
  display: none;
}
.page-quick-sidebar-wrapper .expand-contract .badge {
  width: 23px;
  height: 23px;
  padding: 3px;

  cursor: pointer;
  float: right;
  margin-right: 8px;
}
.page-quick-sidebar-wrapper .expand-contract .badge.filter-expand {
  background: #555;
  color: #ccc;
}
.page-quick-sidebar-wrapper .expand-contract .badge.filter-expand:hover {
  color: black;
  background: white;
}
#filter-sidebar .fliter-close {
    background: #ff5555;
}
#filter-sidebar .fliter-close i {
    color: #4e4e4e;
}
#filter-sidebar .fliter-close:hover {
  background: white;
}
#daterange_filter span {
  font-size: 11px;
}
.page-quick-sidebar-wrapper {
  width: 235px;
}
.page-quick-sidebar-wrapper.filter-fullscreen .page-quick-sidebar .page-quick-sidebar-settings .page-quick-sidebar-settings-list .list-items li .form-control {
  width: 60% !important;
}
.page-quick-sidebar-wrapper.filter-fullscreen h3.list-heading {
  padding-bottom: 10px;
  border-bottom: 1px solid #555;
}
.page-quick-sidebar-wrapper.filter-fullscreen h3.list-heading .filter-add {
  float: none;
}

/* Filter */

/* List Users */
.list-users .media {
  padding: 12px 10px 11px 10px;
}
.list-users .media .media-object {
  border-radius: 50% !important;
  width: 38.57143px;
  opacity: 0.8;
  filter: alpha(opacity=80);
  float: left;
  margin-right: 10px;
}
.list-users .media .media-object:before, .list-users .media .media-object:after {
  content: " ";
  display: table;
}
.list-users .media .media-object:after {
  clear: both;
}
.list-users .media .media-status:hover {
  cursor: pointer;
}
.list-users .media:hover .media-object {
  opacity: 1;
  filter: alpha(opacity=100);
}
.list-users .media .media-body .media-heading {
  margin: 5px 0 0 0;
  font-size: 14px;
}
.list-users .media .media-body .media-heading-sub {
  font-size: 11px;
  text-transform: uppercase;
}
.list-users .media .media-body .media-heading-small {
  font-size: 10px;
}
.list-users .media .media-status {
  margin-top: 10px;
  right: 10px;
  position: absolute;
  display: inline-block;
}
/* List Users */

/* Chart */
.tooltip_value {
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  width: 100%;
}

#dashboard_bell_chart_portlet .score_options button {
  margin: 3px;
}
div#dashboard_bell_chart_portlet.not_enough_data div#dashboard_bell_chart {
  height: auto;
}
#dashboard_bell_chart_portlet .not_enough_data {
  color: black;
  width: 100%;
  text-align: center;
}
/* Chart */

.hidden {
  display: none;
}
.sidebar-toggler {
  margin: 10px;
}
.page-sidebar-menu .title {
  color: white;
}
.page-header.navbar .page-logo .logo-default {
	margin-top: 4px;
}
.page-header.navbar .page-logo .logo-default img {
	height: 40px;
}
.next.disabled,.prev.disabled, #report_table_info {display: none;}
th a.asc:after {
	content: ' ⇣';
}
th a.desc:after {
	content: ' ⇡';
}
#dashboard_chart_portlet .tools {margin-left: 5px;}
.legendLabel {
padding-left: 5px;
}
.tools .fa {
  font-size: 18px;
  color: white;
  text-decoration: none !important;
}
#report_table_filter {
  float: right;
}
#report_table_wrapper {
  width: 96%;
  margin: 10px auto;
}
.paging {
  margin: 10px 0;
}
.paging span {
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #428bca;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
}
.paging span:hover {
  background-color: #ddd;
}
.paging span a {
  text-decoration: none;
}
.paging .current {
  background: #ddd;
}
.paging .show_counts_btn {
  margin-left: 20px;
  color: #428bca;
  font-size: 13px;
}
#reportrange {padding: 10px; background-color: #35aa47; color: white; border-left: 4px solid white; border-right: 4px solid white;}


/* Portlet GBlue*/
.portlet > .portlet-body.gblue,
.portlet.gblue {
  background-color: #0fa1e0;
}

.portlet.solid.gblue > .portlet-title,
.portlet.solid.gblue > .portlet-body {
  border: 0;
  color: white;
}
.portlet.solid.gblue > .portlet-title > .caption > i {
  color: white;
}

.portlet.box.gblue {
  border: 1px solid #0fa1e0;
  border-top: 0;
}
.portlet.box.gblue > .portlet-title {
  background-color: #0fa1e0;
}
.portlet.box.gblue > .portlet-title > .caption {
  color: white;
}
.portlet.box.gblue > .portlet-title > .caption > i {
  color: white;
}
.portlet.box.gblue > .portlet-title > .actions .btn-default {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid #7ad588;
  color: #8ddc99;
}
.portlet.box.gblue > .portlet-title > .actions .btn-default > i {
  color: #99dfa4;
}
.portlet.box.gblue > .portlet-title > .actions .btn-default:hover, .portlet.box.gblue > .portlet-title > .actions .btn-default:focus, .portlet.box.gblue > .portlet-title > .actions .btn-default:active, .portlet.box.gblue > .portlet-title > .actions .btn-default.active {
  border: 1px solid #a1e2ab;
  color: #b4e8bc;
}
.gblue.btn {
  color: white;
  background-color: #0fa1e0;
  border-color: "";
}
.gblue.btn:hover, .gblue.btn:focus, .gblue.btn:active, .gblue.btn.active {
  color: white;
  background-color: #25586F;
}
/* Portlet GBlue*/

/* Portlet GGreen*/
.portlet > .portlet-body.ggreen,
.portlet.ggreen {
  background-color: #62a21d;
}

.portlet.solid.ggreen > .portlet-title,
.portlet.solid.ggreen > .portlet-body {
  border: 0;
  color: white;
}
.portlet.solid.ggreen > .portlet-title > .caption > i {
  color: white;
}

.portlet.box.ggreen {
  border: 1px solid #62a21d;
  border-top: 0;
}
.portlet.box.ggreen > .portlet-title {
  background-color: #62a21d;
}
.portlet.box.ggreen > .portlet-title > .caption {
  color: white;
}
.portlet.box.ggreen > .portlet-title > .caption > i {
  color: white;
}
.portlet.box.ggreen > .portlet-title > .actions .btn-default {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid #7ad588;
  color: #8ddc99;
}
.portlet.box.ggreen > .portlet-title > .actions .btn-default > i {
  color: #99dfa4;
}
.portlet.box.ggreen > .portlet-title > .actions .btn-default:hover, .portlet.box.ggreen > .portlet-title > .actions .btn-default:focus, .portlet.box.ggreen > .portlet-title > .actions .btn-default:active, .portlet.box.ggreen > .portlet-title > .actions .btn-default.active {
  border: 1px solid #a1e2ab;
  color: #b4e8bc;
}
.ggreen.btn {
  color: white;
  background-color: #62a21d;
  border-color: "";
}
.ggreen.btn:hover, .ggreen.btn:focus, .ggreen.btn:active, .ggreen.btn.active {
  color: white;
  background-color: #83BA39;
}
/* Portlet GBlue*/

/* Menu Color GrassBlade Green */
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active > a, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active.open > a,
.page-sidebar .page-sidebar-menu > li.active > a,
.page-sidebar .page-sidebar-menu > li.active.open > a {
  background: #62a21d;
}

.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active > a:hover, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active.open > a:hover,
.page-sidebar .page-sidebar-menu > li.active > a:hover,
.page-sidebar .page-sidebar-menu > li.active.open > a:hover {
  background: #83BA39;
}


/** Configurations **/

.gb_xapi_test_result {
  margin-left: 10px;
  display: inline-block;
}


.integrations_configure .notes {
  padding: 25px 50px;
}
.integrations_configure .notes code {
  display: block;
  margin: 20px;
  padding: 20px;
}
/** Groups **/
.controller-groups ul.group_leaders_list {
  list-style: none;
  padding: 7px 0 0 0;
}

.controller-groups .portlet.group_members {
padding: 15px;
}
.edit_groups.group_type_grassblade_xapi_companion #group_users_table_wrapper .table-group-actions,
.edit_groups.group_type_grassblade_xapi_companion #group_users_table_wrapper tr > td:first-child,
.edit_groups.group_type_grassblade_xapi_companion #group_users_table_wrapper tr > th:first-child {
    display: none;
}

.red {
  color: red;
}
.green {
  color: green;
}
.tooltip {
  z-index: 100000;
}



/** Played Segments **/
    .played-segments {
        overflow: hidden;
        clear: both;
        display: block;
        min-height: 84px;
        padding: 10px;
    }
    .played-segments > div {
      border: 1px solid black;
        height: 40px;
        position: relative;
      overflow: visible;
    }
    .played-segment {
      position: absolute;
        float: left;
        opacity: 0.5;
        /* mix-blend-mode: multiply; */
        background: green;
        height: 40px;
    }
    .played-segment > div {
      min-width: 90px;
      left: -22px;
      top: 42px;
      position: relative;
     }
    .played-segments div.left_indicator {
      display: none;
      float: left;
      color: #4c8100;
    }
    .played-segments div.right_indicator {
      display: none;
      float: right;
      color: #ecbc29;
    }
    .played-segments:hover > div > div.right_indicator {
      display: block;
      position: absolute;
      bottom: -39px;
      right: 2px;
      z-index: 1;
    }
    .played-segment:hover {
      background: yellow;
      opacity: 0.9;
      height: 40px;
      -moz-box-shadow:4px 4px 2px #000000;
      -webkit-box-shadow:4px 4px 2px #000000;
      box-shadow:4px 4px 2px #000000;
    }
    .played-segment:hover div, .played-segments > div.right_indicator {
      display: block;
    }
    .played-segments .progress {
      text-align: center;
        top: 58px;
        position: relative;
    }
    .played-segments.played-segments-full-screen {
        position: fixed;
        left: 1%;
        top: 50%;
        background: white;
        width: 98%;
        border: 1px solid black;
        padding: 3%;
        z-index: 2;
    }
  .css_table.json-details > div > div {
    max-width: 600px;
    word-wrap: break-word;
  }

/** Played Segments **/

div.filter-emails>ul> li.tooltips {
  list-style-type: none;
  margin-left: -32px;
}
div.filter-fullscreen>div.filter-emails>ul> li.tooltips {
  text-align: center !important;

}
.tooltip.top{
  overflow-wrap:break-word;
}

.filter-fullscreen> .tooltip.top{
  left:10% !important;
  overflow-wrap:break-word;
}

.pwd-links{
  text-decoration: underline;
  color: orange;
  margin-top: 15px;
}

.pwd-links:hover{
  color: #fff !important;
}

/** User Icons **/
  .agent_icon {
    display: inline-block;
    width: 50px;
    height: 50px;
    position: relative;
    vertical-align: middle;
  }
  .agent_icon > div {
    position: absolute;
    left: 0;
    top: 0;
  }
  .agent_icon > img {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    border-radius: 30px !important;
  }
  .char_icon {
    font-size: 20px;
    border-radius: 30px !important;
    font-family: sans-serif;
    font-weight: bold;
    width: 50px;
    height: 50px;
    display: inline-table;
    vertical-align: middle;
  }
  .char_icon div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
/** User Icons **/


/** Dragable Widgets **/
@media screen and (max-width : 992px){
  .portlet-sortable-empty {
    box-shadow: none!important;
    height: 0px !important;
  }
}
/** Dragable Widgets **/

/*** Help Icon ***/

.help > i {
  color: #34aa47 !important;
  margin-top: 11px;
  margin-right: 10px;
  font-size: 1.8em !important;
}
.help > i:hover{
  font-size: 2.2em !important;
  margin-right: 8px;
}


/** Floated widget add button */
div.gb-floated-widget-button{
  position:fixed;
  bottom: 81px;
  right: 81px;
  z-index: 10 ;
  border-radius: 50%!important;
}
div.gb-floated-widget-button > a{
  position: absolute;
  height: 60px;
  width: 60px;
  background-color: #83BA39;
  border-radius: 50%!important;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: 0px 8px 18px -4px #888888;
}

div.gb-floated-widget-button > a >span{
  position: absolute;
  left:50%;
  top:50%;
  bottom: auto;
  right: auto;
  color: white;
  transform: translateX(-50%) translateY(-50%);
  font-size: 45px;
}
/** Floated widget add button */


dd.progress_bar {
    display: block;
    margin: 10px auto;
    padding: 0;
    position: relative;
    width: 98%;
    background-color: #F5F5F5;
    border: medium none;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
    height: 20px;
   /* overflow: hidden; */
}
dd.progress_bar > div {
    display: block;
    position: relative;
    text-align: right;
    width: 75%;
    background-color: #5CB85C ;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15) inset;
    color: #FFFFFF;
    float: left;
    font-size: 12px;
    height: 100% ;
    transition: width 0.6s ease 0s;
}
dd.progress_bar > span {
  float: left;
  z-index: 10;
  width: 100%;
  display: inline-block;
  margin: auto;
  text-align: center;
  position: absolute;
  left: 0;
  color: #333;
}
dd.progress_bar .tooltip {
  width: 0;
  top: -35px !important;
}
dd.progress_bar .tooltip .tooltip-inner {
  min-width: 200px;
  position: relative;
  left: -100px;
}
dd.progress_bar .tooltip .tooltip-arrow {
  bottom: -28px;
  position: relative;
}
.played-segments .curve canvas {
  width: 100% !important;
}
.played-segments .curve {
  pointer-events: none;
  position: relative;
  top: -40px;
}

.played-segments #video_div {
  height: auto;
}
#video_report > div, #video_report > div > div {
  width: 800px;
  margin: auto;
}
#video_report .played-segments-full-screen {
  top: 10%;
}
#video_report .played-segments-full-screen {
  width: 100%;
}
#video_report .played-segments .curve {
  pointer-events: auto;
}
#video_report #video_div #audio-playlist-vjs-playlist {
  margin-top: 20px;
}
#dashboard_video_heatmap_portlet .played-segments {
  padding: 0;
}
#dashboard_video_heatmap_portlet .data_elements {
  width: 800px;
  margin: auto;
  margin-top: 50px;
  background: #ffbc00;
}
#dashboard_video_heatmap_portlet .data_elements > div {
  padding:  0 20px;
  color: #333;
}
#dashboard_video_heatmap_portlet .data_elements .fa {
  font-size: 100px;
}
#dashboard_video_heatmap_portlet .data_element {
  margin-top: 20px;
  font-size: 40px;
  font-weight: bold;
}
#dashboard_video_heatmap_portlet .data_label {
  font-size: 15px;
  font-weight: bold;
  padding-bottom: 10px;
}

#dashboard_video_heatmap_portlet .played-segments.played-segments-full-screen {
    border: none;
    position: relative;
    padding: 0;
    margin: auto;
    width: 100%;
    left: 0;
    top: 0;
    background: transparent;
}
/*
#video_report .played-segments {
    padding: 0;
    position: relative;
    top: -107px;
    opacity: 0.9;
    border: none;
    width: 800px;
}
*/

#api-configuration-popup .modal-dialog {
  min-width: 80%;
}
#api-configuration-popup .modal-body .btn {
  margin: 20px;
}
#api-configuration-popup .checking, #api-configuration-popup .connected {
  display: none;
}
#api-configuration-popup .connected i.fa {
  font-size: 25px;
}
#api-configuration-popup .connected {
  color: green;
  font-weight: bold;
  font-size: 25px;
  margin: 14px;
  display: block;
}

[data-timestamp-formats] {
  cursor: pointer;
}


/* Browser Details */
.browser_details {
  margin: 10px;
}
.browser_details .fa {
  font-size: 18px;
  margin-left: 5px;
}

.fa-chrome {
  color: #4685f2;
}
.fa-firefox {
  color: #ff9500;
}
.fa-windows {
  color: #00bcf2;
}
.fa-apple , .fa-linux {
  color: #000;
}
.fa-internet-explorer {
  color: #0cf;
}
.fa-safari {
  color: #0bbcec;
}
.fa-edge {
  color: #3277bc;
}
.fa-opera {
  color: #cc0f16;
}
.fa-android {
  color: #a4c639;
}
.fa-mobile{
  color: #83BA39;
}
.fa-desktop{
  color: #62A21D;
}
.fa-desktop.apple, .fa-desktop.mac, .fa-mobile.iphone, .fa-tablet.ipad {
  color: gray;
}
.fa-tablet{
  color: #E6C528;
}
a, button {
  cursor: pointer;
}
.tooltip-inner {
  max-width: 300px;
}
.tooltip-inner table.filter_email_tooltip th {
  vertical-align: top;
  text-align: left;
}
.tooltip-inner table.filter_email_tooltip td {
  vertical-align: top;
  text-align: right;
}
.link {
  color: #468ccb;
  cursor: pointer;
}
.link:hover {
  text-decoration: underline;
}
li.filter-col-visible-true {
  color: white;
}
li.filter-col-visible-true .fa-plus, li.filter-col-visible-false .fa-times {
  display: none;
}
li.filter-col-visible-false .fa-plus, li.filter-col-visible-true .fa-times {
  cursor: pointer;
}
.cloud_lrs .translations_opt_2 {
  display: none;
}
.statement_switch {
  width: 100%;
  cursor: pointer;
  background-color: rebeccapurple;
  text-align: center;
  color: white;
  font-weight: bold;
}
.json-statement .statement_switch .modified_statement_title {
  display: none;
}
.json-statement.show_modified .statement_switch {
  background-color: red;
}
.json-statement.show_modified .statement_switch .modified_statement_title {
  display: inline;
}
.json-statement.show_modified .statement_switch .original_statement_title {
  display: none;
}
.json-statement .modified_statement, .json-statement.show_modified .original_statement {
  display: none;
}
.json-statement.show_modified .modified_statement {
  display: block;
}

.page-header-fixed-mobile #debug-kit-toolbar {
  left: 0;
  width: max-content;
}
.app_only {
  display: none;
}
body.mobileapp .app_only {
  display: auto;
}

#download-popup {
  color: #333;
}
#download-popup .form-div {
  display: grid;
  grid: auto / auto auto;
  gap: 15px;
}
#download-popup .modal-header {
  background: cornflowerblue;
}
#download-popup .modal-header .modal-title {
  color: white;
  font-weight: bold;
}
#download_form .csv-selected .btn-csv {
  background-color: #35aa47;
  color: white;
}
#download_form .pdf-selected .btn-pdf {
  background-color: #d84a38;
  color: white;
}

/* For Quiz Report Progress Bar */

td.responses > dd, td.no_of_attempts > dd {
  margin: 2px 0;
}

.quiz_report .responses, .quiz_report .no_of_attempts {
  text-align: center;
  vertical-align:middle;
  min-width: 75px !important;
}

/* For printing function */
@media print {
  /* Remove url added next to anchor text */
  a[href]:after {
    content: none !important;
  }
  /* Remove the name first alphabet icon  */
  .char_icon {
    display: none;
  }
}


.sparkline-tooltip{
	margin:0px !important;
}

.api .sparkline-tooltip {
  padding: 0px 15px 10px 0px !important;
}