You are here

Home » API reference » Opigno statistics 8

user.css in Opigno statistics 8 

.user-info {
  background-color: #f6f6f6;
  padding: 4rem 5rem;
  margin: 0;
}

@media screen and (max-width: 768px) {
  .user-info {
    padding: 3rem 1rem;
  }
}

.user-info-photo-wrapper,
.user-info-text-wrapper {
  display: inline-block;
  vertical-align: middle;
}

@media screen and (max-width: 768px) {
  .user-info-photo-wrapper,
  .user-info-text-wrapper {
    display: block;
  }
}

.user-info-photo-wrapper {
  width: 100px;
  text-align: center;
  vertical-align: middle;
  margin-right: 4rem;
}

@media screen and (max-width: 768px) {
  .user-info-photo-wrapper {
    width: auto;
    margin-right: 0;
    margin-bottom: 2rem;
  }
}

.user-info-text-wrapper {
  margin-left: -4px;
  width: calc(100% - 100px - 4rem);
}

@media screen and (max-width: 768px) {
  .user-info-text-wrapper {
    margin-left: 0;
    width: auto;
  }
}

.user-info-photo {
  border-radius: 100%;
  width: 100px;
  height: 100px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

@media screen and (max-width: 768px) {
  .user-info-photo {
    margin: 0 auto;
  }
}

.user-info-name,
.user-info-email {
  background-color: #5bb4d8;
  color: #fff;
  font-size: 20px;
  padding-left: 15px;
  margin: 0;
}

.user-info-name {
  padding-top: 10px;
}

.user-info-email {
  color: #fff;
  font-size: 16px;
  font-style: italic;
  padding-bottom: 10px;
  margin-bottom: 1rem;
}

.user-info-icon {
  display: inline-block;
  float: right;
  margin-top: 20px;
  margin-right: 35px;
  background-image: url('../img/icon_user_info.png');
  background-position: center;
  background-repeat: no-repeat;
  width: 38px;
  height: 31px;
}

.user-info-date-joined,
.user-info-last-access,
.user-info-member-for {
  color: #585857;
  font-size: 14px;
  padding-left: 15px;
  margin: 0;
}

.user-badges {
  background-color: #5bb4d8;
  padding: 30px 60px;
  margin-bottom: 5rem;
}

.user-badges-title {
  display: inline-block;
  color: #fff;
  font-size: 20px;
  width: 100px;
  margin-bottom: 0;
}

.trainings-list tbody tr.training-active,
.trainings-list tbody tr.training-active:hover {
  background-color: #5bb4d8 !important;
}

.trainings-list tbody tr.training-active td {
  color: #fff;
}

.trainings-list tbody tr.training-active td:nth-child(2) {
  text-align: center;
}

.trainings-list .training-close {
  background-image: url('../img/icon_close.png');
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  display: inline-block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.trainings-list tbody td:nth-child(2) {
  text-align: right;
}

.trainings-list tbody td:nth-child(3) {
  font-style: italic;
}

.training-details {
  background-color: rgba(0, 0, 0, 0.05);
}

.training-details>td {
  padding: 50px 50px !important;
}

@media screen and (max-width: 768px) {
  .training-details>td {
    padding: 3rem 1rem !important;
  }
}

.training-details-content .module-passed,
.training-details-content .completion,
.training-details-content .score {
  float: left;
  margin-bottom: 40px;
}

@media screen and (max-width: 768px) {
  .training-details-content .module-passed,
  .training-details-content .completion,
  .training-details-content .score {
    float: none;
    margin-bottom: 2rem;
  }
}

.training-details-content .value-indicator-wrapper {
  margin: 15px;
}

.training-details-content .value-wrapper {
  display: inline-block;
  vertical-align: top;
  width: 80px;
}

.training-details-content .value,
.training-details-content .label {
  display: block;
  line-height: normal;
  margin: 0;
  padding: 0;
}

.training-details-content .value {
  color: #5bb4d8;
  font-size: 30px;
  font-weight: 600;
}

.training-details-content .label {
  font-size: 16px;
}

.training-details-content .indicator-wrapper {
  display: inline-block;
}

.training-details-content .indicator {
  display: inline-block;
  width: 100px;
  height: 100px;
}

.training-details-content .indicator circle {
  stroke: transparent;
  fill: #eee;
}

.training-details-content .indicator path {
  fill: #5bb4d8;
}

.training-details-content .indicator circle.inner {
  fill: #fff;
}

.training-details-content .module-passed .value {
  color: #c3e86c;
}

.training-details-content .module-passed .indicator path {
  fill: #c3e86c;
}

.training-details-content .completion .value-wrapper {
  width: 100px;
}

.training-details-content .module-passed .indicator-wrapper,
.training-details-content .completion .indicator-wrapper,
.training-details-content .score .indicator-wrapper {
  position: relative;
}

.training-details-content .module-passed .indicator-wrapper::before,
.training-details-content .completion .indicator-wrapper::before,
.training-details-content .score .indicator-wrapper::before {
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  content: '';
  display: block;
  width: 100px;
  height: 100px;
}

.training-details-content .module-passed .indicator-wrapper::before {
  background-image: url('../img/icon_check.png');
}

.training-details-content .completion .indicator-wrapper::before {
  background-image: url('../img/icon_completion.png');
}

.training-details-content .score .indicator-wrapper::before {
  background-image: url('../img/icon_score.png');
}

.training-details-content .right-block {
  float: right;
  margin-bottom: 40px;
}

@media screen and (max-width: 768px) {
  .training-details-content .right-block {
    float: none;
    margin-bottom: 40px;
  }
}

.training-details-content .time .label,
.training-details-content .completed .label {
  color: #b3b3b3;
  font-style: italic;
}

.training-details-content .time .value-wrapper,
.training-details-content .completed .value-wrapper {
  width: 120px;
}

.training-details-content hr {
  border-top: 2.5px solid #9d9c9c;
  clear: both;
  margin-bottom: 40px;
}

.training-modules-list {
  border: 0 !important;
  border-collapse: collapse;
}

.training-modules-list thead tr,
.training-modules-list thead tr th {
  background: none;
  color: #b3b3b3;
  border-bottom: 10px solid rgba(0, 0, 0, 0.05) !important;
}

.training-modules-list>thead>tr,
.training-modules-list>thead>tr:hover {
  background-color: #fff !important;
}

.training-modules-list tbody tr,
.training-modules-list tbody tr td {
  background: #fff;
  border: 0;
  border-bottom: 10px solid rgba(0, 0, 0, 0.05);
  color: #585857;
}

.training-modules-list .course-active,
.training-modules-list .course-active td {
  background: #5bb4d8 !important;
  border: 0 !important;
  color: #fff;
}

.training-modules-list .course-close {
  background-image: url('../img/icon_close.png');
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 16px;
}

.training-modules-list tr.course-details,
.training-modules-list tr.course-details td {
  background: rgba(0, 0, 0, 0.05) !important;
}

.training-modules-list .course-modules-list {
  border: 0 !important;
}

.training-modules-list .course-modules-list tbody tr,
.training-modules-list .course-modules-list tbody tr td {
  background: #fff !important;
  border-bottom: 10px solid rgba(0, 0, 0, 0.05) !important;
}

.module-panel-wrapper {
  position: relative;
}

.module_panel {
  background-color: #fff;
  box-shadow: -5px 5px 10px rgba(61, 61, 60, 0.1), 5px -5px 10px rgba(61, 61, 60, 0.1);
  display: none;
  position: absolute;
  right: -100px;
  top: -100px;
  width: 490px;
  text-align: left;
  z-index: 100;
}

@media screen and (max-width: 768px) {
  .module_panel {
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    overflow: auto;
    max-width: 100%;
    bottom: 0;
  }
}

.training-modules-list .module_panel table,
.training-modules-list .module_panel table tbody tr,
.training-modules-list .module_panel table tbody tr td {
  border: 0;
}

.training-modules-list .module_panel table {
  border-spacing: 5px 10px;
  margin-left: -5px;
}

.module_panel_header {
  padding: 3rem 2rem 1.5rem;
}

.module_panel_content {
  padding: 1rem 2rem 2rem;
}

@media screen and (max-width: 768px) {
  .module_panel_content {
    padding: 1rem 1rem 2rem;
  }
}

.module_panel_content p {
  margin: 0;
}

.module_panel_title,
.module_panel_overview_title,
.module_panel_responses_title {
  color: #3d3d3c;
  font-size: 18px;
  font-weight: normal;
  line-height: 20px;
  margin: 0;
  text-transform: uppercase;
}

.module_panel_overview_title {
  margin-top: 40px;
  font-weight: 600;
}

.module_panel_activities_overview {
  border-spacing: 5px 10px;
}

.module_panel_activities_overview tr:nth-child(2n) td:not([class*="ui-datepicker"]),
.module_panel_activities_overview tr:nth-child(2n+1) td:not([class*="ui-datepicker"]) {
  background-color: #f6f6f6;
}

.module_panel_activities_overview tr td:nth-child(2) {
  text-align: center;
}

.module_panel_activities_overview tr:nth-child(2n) td:nth-child(3),
.module_panel_activities_overview tr:nth-child(2n+1) td:nth-child(3) {
  background: #fff;
  width: 43px;
}

.module_panel_activities_overview tr:nth-child(2n) td:nth-child(3) span,
.module_panel_activities_overview tr:nth-child(2n+1) td:nth-child(3) span {
  background-size: cover;
  display: block;
  width: 43px;
  height: 43px;
}

.module_panel_activities_overview+a {
  display: block;
  text-align: center;
  padding: .75rem;
  background-color: #5bb4d8;
  color: #fff;
  text-decoration: none;
  margin-left: -2rem;
  margin-right: -2rem;
  text-transform: uppercase;
}

.module_panel_activities_overview+a:hover {
  background-color: #5bb4d8;
  text-decoration: none;
  color: #fff;
}

.module_panel_responses_title {
  margin-top: 60px;
  margin-bottom: 15px;
}

.module_panel_responses {
  background-color: #f6f6f6;
  color: #898988;
  font-size: 18px;
  font-weight: bold;
  padding: 200px 130px 180px;
  text-align: center;
  text-transform: uppercase;
}

.module_panel_close {
  color: #3d3d3c;
  float: right;
  font-size: 28px;
  line-height: 20px;
  text-decoration: none;
}

.module_panel_close:hover {
  color: #3d3d3c;
  text-decoration: none;
}

.training-details-content .time .value-wrapper .value,
.training-details-content .completed .value-wrapper .value {
  font-size: 20px;
}

.training-details-content .completed {
  margin-top: 1rem;
}

.table-hover tbody tr.training-details:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

File

css/user.css
View source 
  1. .user-info {

  2.   background-color: #f6f6f6;

  3.   padding: 4rem 5rem;

  4.   margin: 0;

  5. }

  6. 

  7. @media screen and (max-width: 768px) {

  8.   .user-info {

  9.     padding: 3rem 1rem;

  10.   }

  11. }

  12. 

  13. .user-info-photo-wrapper,

  14. .user-info-text-wrapper {

  15.   display: inline-block;

  16.   vertical-align: middle;

  17. }

  18. 

  19. @media screen and (max-width: 768px) {

  20.   .user-info-photo-wrapper,

  21.   .user-info-text-wrapper {

  22.     display: block;

  23.   }

  24. }

  25. 

  26. .user-info-photo-wrapper {

  27.   width: 100px;

  28.   text-align: center;

  29.   vertical-align: middle;

  30.   margin-right: 4rem;

  31. }

  32. 

  33. @media screen and (max-width: 768px) {

  34.   .user-info-photo-wrapper {

  35.     width: auto;

  36.     margin-right: 0;

  37.     margin-bottom: 2rem;

  38.   }

  39. }

  40. 

  41. .user-info-text-wrapper {

  42.   margin-left: -4px;

  43.   width: calc(100% - 100px - 4rem);

  44. }

  45. 

  46. @media screen and (max-width: 768px) {

  47.   .user-info-text-wrapper {

  48.     margin-left: 0;

  49.     width: auto;

  50.   }

  51. }

  52. 

  53. .user-info-photo {

  54.   border-radius: 100%;

  55.   width: 100px;

  56.   height: 100px;

  57.   background-repeat: no-repeat;

  58.   background-position: center;

  59.   background-size: cover;

  60. }

  61. 

  62. @media screen and (max-width: 768px) {

  63.   .user-info-photo {

  64.     margin: 0 auto;

  65.   }

  66. }

  67. 

  68. .user-info-name,

  69. .user-info-email {

  70.   background-color: #5bb4d8;

  71.   color: #fff;

  72.   font-size: 20px;

  73.   padding-left: 15px;

  74.   margin: 0;

  75. }

  76. 

  77. .user-info-name {

  78.   padding-top: 10px;

  79. }

  80. 

  81. .user-info-email {

  82.   color: #fff;

  83.   font-size: 16px;

  84.   font-style: italic;

  85.   padding-bottom: 10px;

  86.   margin-bottom: 1rem;

  87. }

  88. 

  89. .user-info-icon {

  90.   display: inline-block;

  91.   float: right;

  92.   margin-top: 20px;

  93.   margin-right: 35px;

  94.   background-image: url('../img/icon_user_info.png');

  95.   background-position: center;

  96.   background-repeat: no-repeat;

  97.   width: 38px;

  98.   height: 31px;

  99. }

  100. 

  101. .user-info-date-joined,

  102. .user-info-last-access,

  103. .user-info-member-for {

  104.   color: #585857;

  105.   font-size: 14px;

  106.   padding-left: 15px;

  107.   margin: 0;

  108. }

  109. 

  110. .user-badges {

  111.   background-color: #5bb4d8;

  112.   padding: 30px 60px;

  113.   margin-bottom: 5rem;

  114. }

  115. 

  116. .user-badges-title {

  117.   display: inline-block;

  118.   color: #fff;

  119.   font-size: 20px;

  120.   width: 100px;

  121.   margin-bottom: 0;

  122. }

  123. 

  124. .trainings-list tbody tr.training-active,

  125. .trainings-list tbody tr.training-active:hover {

  126.   background-color: #5bb4d8 !important;

  127. }

  128. 

  129. .trainings-list tbody tr.training-active td {

  130.   color: #fff;

  131. }

  132. 

  133. .trainings-list tbody tr.training-active td:nth-child(2) {

  134.   text-align: center;

  135. }

  136. 

  137. .trainings-list .training-close {

  138.   background-image: url('../img/icon_close.png');

  139.   background-position: center;

  140.   background-repeat: no-repeat;

  141.   cursor: pointer;

  142.   display: inline-block;

  143.   width: 20px;

  144.   height: 20px;

  145.   position: absolute;

  146.   top: 50%;

  147.   left: 50%;

  148.   transform: translate(-50%, -50%);

  149. }

  150. 

  151. .trainings-list tbody td:nth-child(2) {

  152.   text-align: right;

  153. }

  154. 

  155. .trainings-list tbody td:nth-child(3) {

  156.   font-style: italic;

  157. }

  158. 

  159. .training-details {

  160.   background-color: rgba(0, 0, 0, 0.05);

  161. }

  162. 

  163. .training-details>td {

  164.   padding: 50px 50px !important;

  165. }

  166. 

  167. @media screen and (max-width: 768px) {

  168.   .training-details>td {

  169.     padding: 3rem 1rem !important;

  170.   }

  171. }

  172. 

  173. .training-details-content .module-passed,

  174. .training-details-content .completion,

  175. .training-details-content .score {

  176.   float: left;

  177.   margin-bottom: 40px;

  178. }

  179. 

  180. @media screen and (max-width: 768px) {

  181.   .training-details-content .module-passed,

  182.   .training-details-content .completion,

  183.   .training-details-content .score {

  184.     float: none;

  185.     margin-bottom: 2rem;

  186.   }

  187. }

  188. 

  189. .training-details-content .value-indicator-wrapper {

  190.   margin: 15px;

  191. }

  192. 

  193. .training-details-content .value-wrapper {

  194.   display: inline-block;

  195.   vertical-align: top;

  196.   width: 80px;

  197. }

  198. 

  199. .training-details-content .value,

  200. .training-details-content .label {

  201.   display: block;

  202.   line-height: normal;

  203.   margin: 0;

  204.   padding: 0;

  205. }

  206. 

  207. .training-details-content .value {

  208.   color: #5bb4d8;

  209.   font-size: 30px;

  210.   font-weight: 600;

  211. }

  212. 

  213. .training-details-content .label {

  214.   font-size: 16px;

  215. }

  216. 

  217. .training-details-content .indicator-wrapper {

  218.   display: inline-block;

  219. }

  220. 

  221. .training-details-content .indicator {

  222.   display: inline-block;

  223.   width: 100px;

  224.   height: 100px;

  225. }

  226. 

  227. .training-details-content .indicator circle {

  228.   stroke: transparent;

  229.   fill: #eee;

  230. }

  231. 

  232. .training-details-content .indicator path {

  233.   fill: #5bb4d8;

  234. }

  235. 

  236. .training-details-content .indicator circle.inner {

  237.   fill: #fff;

  238. }

  239. 

  240. .training-details-content .module-passed .value {

  241.   color: #c3e86c;

  242. }

  243. 

  244. .training-details-content .module-passed .indicator path {

  245.   fill: #c3e86c;

  246. }

  247. 

  248. .training-details-content .completion .value-wrapper {

  249.   width: 100px;

  250. }

  251. 

  252. .training-details-content .module-passed .indicator-wrapper,

  253. .training-details-content .completion .indicator-wrapper,

  254. .training-details-content .score .indicator-wrapper {

  255.   position: relative;

  256. }

  257. 

  258. .training-details-content .module-passed .indicator-wrapper::before,

  259. .training-details-content .completion .indicator-wrapper::before,

  260. .training-details-content .score .indicator-wrapper::before {

  261.   position: absolute;

  262.   background-position: center;

  263.   background-repeat: no-repeat;

  264.   content: '';

  265.   display: block;

  266.   width: 100px;

  267.   height: 100px;

  268. }

  269. 

  270. .training-details-content .module-passed .indicator-wrapper::before {

  271.   background-image: url('../img/icon_check.png');

  272. }

  273. 

  274. .training-details-content .completion .indicator-wrapper::before {

  275.   background-image: url('../img/icon_completion.png');

  276. }

  277. 

  278. .training-details-content .score .indicator-wrapper::before {

  279.   background-image: url('../img/icon_score.png');

  280. }

  281. 

  282. .training-details-content .right-block {

  283.   float: right;

  284.   margin-bottom: 40px;

  285. }

  286. 

  287. @media screen and (max-width: 768px) {

  288.   .training-details-content .right-block {

  289.     float: none;

  290.     margin-bottom: 40px;

  291.   }

  292. }

  293. 

  294. .training-details-content .time .label,

  295. .training-details-content .completed .label {

  296.   color: #b3b3b3;

  297.   font-style: italic;

  298. }

  299. 

  300. .training-details-content .time .value-wrapper,

  301. .training-details-content .completed .value-wrapper {

  302.   width: 120px;

  303. }

  304. 

  305. .training-details-content hr {

  306.   border-top: 2.5px solid #9d9c9c;

  307.   clear: both;

  308.   margin-bottom: 40px;

  309. }

  310. 

  311. .training-modules-list {

  312.   border: 0 !important;

  313.   border-collapse: collapse;

  314. }

  315. 

  316. .training-modules-list thead tr,

  317. .training-modules-list thead tr th {

  318.   background: none;

  319.   color: #b3b3b3;

  320.   border-bottom: 10px solid rgba(0, 0, 0, 0.05) !important;

  321. }

  322. 

  323. .training-modules-list>thead>tr,

  324. .training-modules-list>thead>tr:hover {

  325.   background-color: #fff !important;

  326. }

  327. 

  328. .training-modules-list tbody tr,

  329. .training-modules-list tbody tr td {

  330.   background: #fff;

  331.   border: 0;

  332.   border-bottom: 10px solid rgba(0, 0, 0, 0.05);

  333.   color: #585857;

  334. }

  335. 

  336. .training-modules-list .course-active,

  337. .training-modules-list .course-active td {

  338.   background: #5bb4d8 !important;

  339.   border: 0 !important;

  340.   color: #fff;

  341. }

  342. 

  343. .training-modules-list .course-close {

  344.   background-image: url('../img/icon_close.png');

  345.   background-position: center;

  346.   background-repeat: no-repeat;

  347.   cursor: pointer;

  348.   display: inline-block;

  349.   width: 20px;

  350.   height: 20px;

  351.   margin: 16px;

  352. }

  353. 

  354. .training-modules-list tr.course-details,

  355. .training-modules-list tr.course-details td {

  356.   background: rgba(0, 0, 0, 0.05) !important;

  357. }

  358. 

  359. .training-modules-list .course-modules-list {

  360.   border: 0 !important;

  361. }

  362. 

  363. .training-modules-list .course-modules-list tbody tr,

  364. .training-modules-list .course-modules-list tbody tr td {

  365.   background: #fff !important;

  366.   border-bottom: 10px solid rgba(0, 0, 0, 0.05) !important;

  367. }

  368. 

  369. .module-panel-wrapper {

  370.   position: relative;

  371. }

  372. 

  373. .module_panel {

  374.   background-color: #fff;

  375.   box-shadow: -5px 5px 10px rgba(61, 61, 60, 0.1), 5px -5px 10px rgba(61, 61, 60, 0.1);

  376.   display: none;

  377.   position: absolute;

  378.   right: -100px;

  379.   top: -100px;

  380.   width: 490px;

  381.   text-align: left;

  382.   z-index: 100;

  383. }

  384. 

  385. @media screen and (max-width: 768px) {

  386.   .module_panel {

  387.     position: fixed;

  388.     right: 0;

  389.     left: 0;

  390.     top: 0;

  391.     overflow: auto;

  392.     max-width: 100%;

  393.     bottom: 0;

  394.   }

  395. }

  396. 

  397. .training-modules-list .module_panel table,

  398. .training-modules-list .module_panel table tbody tr,

  399. .training-modules-list .module_panel table tbody tr td {

  400.   border: 0;

  401. }

  402. 

  403. .training-modules-list .module_panel table {

  404.   border-spacing: 5px 10px;

  405.   margin-left: -5px;

  406. }

  407. 

  408. .module_panel_header {

  409.   padding: 3rem 2rem 1.5rem;

  410. }

  411. 

  412. .module_panel_content {

  413.   padding: 1rem 2rem 2rem;

  414. }

  415. 

  416. @media screen and (max-width: 768px) {

  417.   .module_panel_content {

  418.     padding: 1rem 1rem 2rem;

  419.   }

  420. }

  421. 

  422. .module_panel_content p {

  423.   margin: 0;

  424. }

  425. 

  426. .module_panel_title,

  427. .module_panel_overview_title,

  428. .module_panel_responses_title {

  429.   color: #3d3d3c;

  430.   font-size: 18px;

  431.   font-weight: normal;

  432.   line-height: 20px;

  433.   margin: 0;

  434.   text-transform: uppercase;

  435. }

  436. 

  437. .module_panel_overview_title {

  438.   margin-top: 40px;

  439.   font-weight: 600;

  440. }

  441. 

  442. .module_panel_activities_overview {

  443.   border-spacing: 5px 10px;

  444. }

  445. 

  446. .module_panel_activities_overview tr:nth-child(2n) td:not([class*="ui-datepicker"]),

  447. .module_panel_activities_overview tr:nth-child(2n+1) td:not([class*="ui-datepicker"]) {

  448.   background-color: #f6f6f6;

  449. }

  450. 

  451. .module_panel_activities_overview tr td:nth-child(2) {

  452.   text-align: center;

  453. }

  454. 

  455. .module_panel_activities_overview tr:nth-child(2n) td:nth-child(3),

  456. .module_panel_activities_overview tr:nth-child(2n+1) td:nth-child(3) {

  457.   background: #fff;

  458.   width: 43px;

  459. }

  460. 

  461. .module_panel_activities_overview tr:nth-child(2n) td:nth-child(3) span,

  462. .module_panel_activities_overview tr:nth-child(2n+1) td:nth-child(3) span {

  463.   background-size: cover;

  464.   display: block;

  465.   width: 43px;

  466.   height: 43px;

  467. }

  468. 

  469. .module_panel_activities_overview+a {

  470.   display: block;

  471.   text-align: center;

  472.   padding: .75rem;

  473.   background-color: #5bb4d8;

  474.   color: #fff;

  475.   text-decoration: none;

  476.   margin-left: -2rem;

  477.   margin-right: -2rem;

  478.   text-transform: uppercase;

  479. }

  480. 

  481. .module_panel_activities_overview+a:hover {

  482.   background-color: #5bb4d8;

  483.   text-decoration: none;

  484.   color: #fff;

  485. }

  486. 

  487. .module_panel_responses_title {

  488.   margin-top: 60px;

  489.   margin-bottom: 15px;

  490. }

  491. 

  492. .module_panel_responses {

  493.   background-color: #f6f6f6;

  494.   color: #898988;

  495.   font-size: 18px;

  496.   font-weight: bold;

  497.   padding: 200px 130px 180px;

  498.   text-align: center;

  499.   text-transform: uppercase;

  500. }

  501. 

  502. .module_panel_close {

  503.   color: #3d3d3c;

  504.   float: right;

  505.   font-size: 28px;

  506.   line-height: 20px;

  507.   text-decoration: none;

  508. }

  509. 

  510. .module_panel_close:hover {

  511.   color: #3d3d3c;

  512.   text-decoration: none;

  513. }

  514. 

  515. .training-details-content .time .value-wrapper .value,

  516. .training-details-content .completed .value-wrapper .value {

  517.   font-size: 20px;

  518. }

  519. 

  520. .training-details-content .completed {

  521.   margin-top: 1rem;

  522. }

  523. 

  524. .table-hover tbody tr.training-details:hover {

  525.   background-color: rgba(0, 0, 0, 0.05);

  526. }