/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.mesu_header { height: 57px; }

.mesu_print_only,
.mesu_print_only.mesu_breadcrumbs,
.vivo_print_only  { display: none; }

/* Mesu progress bar */
.mesu-progress-bar-circle-content svg {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.mesu-progress-bar-circle-content .progress-bar{
	fill: none;
}
.mesu-progress-bar-circle-content .progress{
	fill: none;
}
.mesu-progress-bar-circle-content .mesu-progress-bar-color-default{
	stroke: #e2eff0;
}
.mesu-progress-bar-circle-content .mesu-progress-color-default{
	stroke: #78bec7;
}
.mesu-progress-bar-circle-content .mesu-progress-animation-default{
	transition: stroke-dashoffset .5s ease-in-out;
}
/*------------------------------------*\
    Tools Override
\*------------------------------------*/

.vivo_t_header {
  font-family: Lato;
}
.vivo_t_label,
.vivo_t_info,
.vivo_t_button,
.subheader_cell,
.data_cell   { font-family: Roboto !important; }

.maduka_datagird_container h2 { font-family: Lato; font-weight: normal; }

.data_cell.attr_progress,
.subheader_cell.attr_progress,
.data_cell.attr_engagement,
.subheader_cell attr_engagement { width: 1%;}

.data_cell.attr_visits,
.subheader_cell.attr_visits { width: 1%;}

.data_cell.attr_last_visit,
.subheader_cell.attr_last_visit { /* width: 1%; */ white-space: nowrap;}

table.maduka_datagird_container thead tr.header_row {
    background: #D4D4D4 !important;
}
table.maduka_datagird_container thead tr.header_row td.header_cell h2.table_header  { color: initial !important; }

.vivo_t_button,
.vivo_t_inputfile + label,
table.maduka_datagird_container tbody.data_container tr.data_even:hover td.data_cell label,
table.maduka_datagird_container tbody.data_container tr.data_odd:hover td.data_cell label  { background-color: #4FBA77 !important; border-color: #4FBA77 !important;}

.maduka-btn-view-control:hover,
.maduka-btn-view-control:focus,
.maduka-btn-view-control:active,
.maduka-btn-view-control.active,
.open .dropdown-toggle.maduka-btn-view-control,
.maduka-btn-pagination:hover,
.maduka-btn-pagination-active  { background-color: #4FBA77 !important; border-color: #4FBA77 !important;}



/*------------------------------------*\
    MAIN
\*------------------------------------*/

.hidden,
.delay_hidden { display: none !important; }

.mesu-sidenav-loaded~main {
  margin-left: 50px;
}

.mesu_full_height .vc_column-inner .wpb_wrapper {
  display: flex;
  height: 100%;
}

.mesu_clearfix  { clear: both }
.mesu_clearfix:after,
.mesu_clearfix:before {
    content: " ";
    display: table
}

.mesu_videoproxy {
  width: 100%;
  height: 100%;
  position: absolute !important;
  top: 0;
  background-color: #a3c6d9;
  background-image: url(../img/play_button.png);
  background-repeat:no-repeat;
  background-position: center center;
}

.mesu_videoproxy_link   {
  width: 100%;
  height: 100%;
  position: absolute !important;
  top: 0;
}

a.mesu_backlink_product h1 {
  text-decoration: none;
  border-bottom: 1px dashed #abba05;
  display: inline-block;
}

/* --- GRID Layouts styles and controls --------------------------------------*/

.mesu-grid {
/*  border: 5px solid pink; */
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -0.5rem;
  margin-left: -0.5rem;
/*  justify-content: space-between; */
}

.mesu-grid.mesu-grid-columns-2 { gap: 4%; }
.mesu-grid.mesu-grid-columns-3 { gap: 2%; }
.mesu-grid.mesu-grid-columns-4 { gap: 1.3%; }
.mesu-grid.mesu-grid-columns-5 { gap: 1.2%; }
.mesu-grid.mesu-grid-columns-6 { gap: 1.3%; }

.mesu-grid-element {
/*  border: 2px solid blue; */
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.mesu-grid-columns-1 .mesu-grid-element { width: 100%; }
.mesu-grid-columns-2 .mesu-grid-element { width: 48%; }
.mesu-grid-columns-3 .mesu-grid-element { width: 31.5%; }
.mesu-grid-columns-4 .mesu-grid-element { width: 24%; }
.mesu-grid-columns-5 .mesu-grid-element { width: 19%; }
.mesu-grid-columns-6 .mesu-grid-element { width: 15.5%; }

@media (max-width: 950px) {
  .mesu-grid-columns-5 .mesu-grid-element { width: 24%; }
  .mesu-grid-columns-6 .mesu-grid-element { width: 19%; }
}

@media (max-width: 800px) {
  .mesu-grid-columns-2 .mesu-grid-element { width: 100%; }
  .mesu-grid-columns-3 .mesu-grid-element { width: 48%; }
  .mesu-grid-columns-4 .mesu-grid-element { width: 31.5%; }
  .mesu-grid-columns-5 .mesu-grid-element { width: 31.5%; }
  .mesu-grid-columns-6 .mesu-grid-element { width: 24%; }
}

@media (max-width: 600px) {
  .mesu-grid-columns-2 .mesu-grid-element { width: 100%; }
  .mesu-grid-columns-3 .mesu-grid-element { width: 48%; }
  .mesu-grid-columns-4 .mesu-grid-element { width: 48%; }
  .mesu-grid-columns-5 .mesu-grid-element { width: 48%; }
  .mesu-grid-columns-6 .mesu-grid-element { width: 31.5%; }
}

@media (max-width: 500px) {
  .mesu-grid-columns-3 .mesu-grid-element { width: 100%; }
  .mesu-grid-columns-4 .mesu-grid-element { width: 100%; }
  .mesu-grid-columns-5 .mesu-grid-element { width: 100%; }
  .mesu-grid-columns-6 .mesu-grid-element { width: 100%; }
}


/* --- Column Layouts styles and controls ------------------------------------*/

.mesu_layout-column {
  position: relative;
  float: left;
  margin-right: 4%;
  margin-bottom: 20px;
  margin-top:0px;
}

.mesu_one-one     { width: 100% }
.mesu_one-sixth   { width: 13.3333%; }
.mesu_one-fifth   { width: 16.8%; }
.mesu_one-fourth  { width: 22%; }
.mesu_one-third   { width: 30.6666%; }
.mesu_one-half    { width: 48%; }

.mesu_two-third { width: 65.3333%; }

.mesu_three-fourth { width: 60%; }

.vivo_video_single_column .mesu_one-sixth,
.vivo_video_single_column .mesu_one-fifth,
.vivo_video_single_column .mesu_one-fourth,
.vivo_video_single_column .mesu_one-third,
.vivo_video_single_column .mesu_one-half,
.vivo_video_single_column .mesu_two-third,
.vivo_video_single_column .mesu_three-fourth  { width: 100%;}


.mesu_column-last { margin-left: 0; margin-right: 0; }
.mesu_spacing-no  { margin: 0; }
.mesu_clearfix    { clear: both; zoom: 1; }

/* --- product grid  --------------------------------------------------------*/
.mesu_product_grid_row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

@media (max-width: 800px) {
	.mesu_product_grid_row .mesu_one-half { width: 100%; }
	.mesu_product_grid_row .mesu_one-third { width: 100%; }
	.mesu_product_grid_row .mesu_one-fourth { width: 48%; }
}

@media (max-width: 500px) {
	.mesu_product_grid_row .mesu_one-fourth { width: 100%; }
}



/*------------------------------------------------------------------------------
--- SHORTCODES -----------------------------------------------------------------
------------------------------------------------------------------------------*/

/* --- Progress --------------------------------------------------------------*/


.progress-main         { width: 100%; text-align: center; margin-bottom: 20px; margin-top: 20px; }
.progress-main > input { display: inline-block; vertical-align: middle; }
.progress-main input[type="radio"] {margin-right: 0;vertical-align: top;}

.progress-column          { display: inline-block; }
.progress-column > label  { display: inline-block; vertical-align: middle; }

.progress-column .radio {display: inline-block; padding-right: 20px; font-size: 18px; line-height: 27px; cursor: pointer; position: relative;}
.progress-column .radio:hover .inner {-webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); opacity: .5;}
.progress-column .radio input {width: 1px; height: 1px; opacity: 0; position: absolute; left: 6px; top: 7px;}
.progress-column .radio input:checked + .outer .inner {-webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1;}
.progress-column .radio input:checked + .outer { border: 3px solid #f08b3b; }

.progress-column.not-started  .radio input:checked + .outer { border: 3px solid #e15c21; }
.progress-column.started      .radio input:checked + .outer { border: 3px solid orange; }
.progress-column.completed    .radio input:checked + .outer { border: 3px solid #a9b904; }

.progress-column .radio input:focus + .outer .inner {-webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; background-color: #e67012;}

.progress-column.not-started  .radio input:focus + .outer .inner{background: #e15c21;}
.progress-column.started      .radio input:focus + .outer .inner{background: orange;}
.progress-column.completed    .radio input:focus + .outer .inner{background: #a9b904;}

.progress-column .radio .outer {width: 22px; height: 22px; display: block; float: left; margin: 0 15px 0 0; z-index: 9; border: 3px solid #747d7d; border-radius: 50%; background-color: #fff;}
.progress-column .radio .inner {-webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; width: 12px; height: 12px; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); display: block; margin: 2px; border-radius: 50%;
background-color: #f08b3b; opacity: 0;}

.progress-column.not-started  .radio .inner{background: #e15c21;}
.progress-column.started      .radio .inner{background: orange;}
.progress-column.completed    .radio .inner{background: #a9b904;}


/*----------------------------------------------------------------------------*/
/*  MESU - Download                                                           */
/*----------------------------------------------------------------------------*/


.mesu_download_button {
  border: 0px;
  border-radius: 5px 5px 5px 5px;
  color: #ffffff ;
  float: left;
  font-size: 19px;
  line-height: 40px;
  margin-bottom: 10px;
  background-color: #d16d36;
  cursor: pointer;
  text-align: center;
  font-weight: 600;
  width: 100%;
}

.mesu_dl_progress {
  display: none;
  border-radius: 0px 0px 5px 5px;
  background-color: #a9ba04;
/*  padding: 10px 15px; */
}
.mesu_dl-title { /* padding: 10px 15px; */ }
.mesu_download_icon {padding-right: 10px;}



/*------------------------------------------------------------------------------
--- ADMIN BAR ------------------------------------------------------------------
------------------------------------------------------------------------------*/
#wpadminbar #wp-admin-bar-mesu_maintenance_mode .ab-icon:before {
  content: "\f338";
  color: Chartreuse;
  top: 3px;
}

#wpadminbar #wp-admin-bar-mesu_maintenance_mode .ab-icon.mesu-adminmode:before {
  color: red;
}


/*------------------------------------------------------------------------------
--- Common Label definition ----------------------------------------------------
------------------------------------------------------------------------------*/

.mesu-caret-down {
  color: #e15c21;
}

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


.mesu_module_label_free::before,
.mesu_module_label_new::before,
.mesu_module_label_update::before,
.mesu_module_label_neutral::before {
    font-size: 0.6em;
    color: #ffffff;
    border-radius: 5px;
    padding: 3px 10px 3px 10px;
    margin-right: .1em;
    margin-left: 1em;
    vertical-align: middle;
}

.mesu_module_label_unlocked,
.mesu_module_label_locked  {
  text-align: center;
  display: inline-block;
  padding-right: .4em;
}


.mesu_module_label_locked::before {
    font-family: fontawesome;
    content: "\f017";
}

.mesu_module_label_free::before {
    content: "GRATIS";
    background-color: #a9b904;
}

/*------------------------------------------------------------------------------
--- Progress bar  --------------------------------------------------------------
------------------------------------------------------------------------------*/

.mesu_progress      {
  position: relative;
  height: 1.7em;
  width: 240px;
}

.mesu_progress {
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}

.mesu_progress_bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: #428bca;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
    -webkit-transition: width .6s ease;
    transition: width .6s ease;
}


.mesu_progress > .mesu_progress_type {
	position: absolute;
	left: 0px;
	font-weight: 800;
	padding: 3px 30px 2px 10px;
	color: rgb(255, 255, 255);
	background-color: rgba(25, 25, 25, 0.2);
}

.mesu_progress > .mesu_progress_completed {
	position: absolute;
	right: 0px;
	font-weight: 800;
	padding: 3px 10px 2px;
}

.mesu_progress_bar {
    background-color: #B6C649;
}


.mesu_progress_red              { background-color: #e15c21 !important; }
.mesu_progress_orange           { background-color: #f08b3b !important; }
.mesu_progress_feldgrau         { background-color: #507255 !important; }
.mesu_progress_charcoal         { background-color: #2E4057 !important; }
.mesu_progress_red_brown        { background-color: #AD2E24 !important; }
.mesu_progress_android_green    { background-color: #B6C649 !important; }
.mesu_progress_metallic_seaweed { background-color: #177E89 !important; }

.mesu_progress.mesu_progress_feldgrau         > .mesu_progress_type,
.mesu_progress.mesu_progress_charcoal         > .mesu_progress_type,
.mesu_progress.mesu_progress_red_brown        > .mesu_progress_type,
.mesu_progress.mesu_progress_android_green    > .mesu_progress_type,
.mesu_progress.mesu_progress_metallic_seaweed > .mesu_progress_type
{
  color: #ffffff;
}

.mesu_subscription_inactive .mesu_progress_bar {background-color: #ad2e24;}
.mesu_subscription_inactive { color: #ad2e24; }

/*------------------------------------------------------------------------------
--- Product designer -----------------------------------------------------------
------------------------------------------------------------------------------*/

.mesu_t_desginer,
.mesu_t_desginer_unused_modules,
.mesu_t_desginer_unused_units {
  padding: 20px;
  border-radius: 3px;
  background-color: #FFE066;
  width: 63%;
  margin-right: 1%;
  margin-top: 1%;
  float: left;
}

.mesu_t_desginer_unused_modules,
.mesu_t_desginer_unused_units { width: 35%; }

.mesu_t_desginer_unused_units .mesu_t_desginer_units { border-color: #000;}

.mesu_t_designer_grip {
  background-image: url(../img/dragdrop_grip.png);
  width: 20px;
  display: inline-block;
  float: left;
  margin-right: 20px;
  cursor:move;
}

.mesu_t_desginer_module .mesu_t_designer_grip {   height: 65px; }
.mesu_t_desginer_unit .mesu_t_designer_grip {     height: 20px;  width: 15px; }

.mesu_t_designer_modules {
  min-height: 30px;
  border: 1px dashed;
  border-radius: 3px;
}

.mesu_t_desginer_module {
  margin: 10px;
  padding: 10px;
  border: 1px solid #80B8BE;
  border-radius: 3px;
  color: #ffffff;
}

.mesu_t_desginer_module h2 {
    font-family: Lato;
    font-weight: normal;
    margin-top: 0px;
}

.mesu_t_desginer_units {
  margin-top: 25px;
  border: 1px dashed #fff;
  padding: 10px;
  border-radius: 3px;
  min-height: 30px;
}
.mesu_t_desginer_unit  { background-color: #177e89; color: #ffffff;}

.mesu_t_desginer_tplus_input,
.mesu_t_desginer_tplus_input:focus,
.mesu_t_desginer_unlock_input,
.mesu_t_desginer_unlock_input:focus
 {
    background-color: rgba(255, 255, 255, .7);
    outline-color:  rgba(255, 255, 255, .7);
    border: 1px solid #fff;
    padding: 3px;
    height: 30px;
}

.mesu_t_desginer_tplus_input {
  margin-left: 10px;
}

/*----Unused Moodules --------------------------------------------------------*/

.mesu_t_desginer_unused_modules .mesu_t_desginer_module_order,
.mesu_t_desginer_unused_modules .mesu_t_desginer_units { display: none; }

.mesu_t_desginer_unused_modules .mesu_t_desginer_module .mesu_t_designer_grip {
    height: 20px;
    width: 15px;
}

.mesu_t_desginer_unused_modules .mesu_t_desginer_module h2 { margin-bottom: 0px; }


/*------------------------------------*\
    Print Style
\*------------------------------------*/

.mesu_print_trigger,
.mesu_help_trigger  {
  float: right;
  font-size: .8em !important;
  font-weight: lighter;
  cursor: pointer;
  margin-left: .5em;
}

.mesu_help_trigger {
  color: rgba(255, 255, 255, .8);
  width: 1em;
  height: 1em;
  vertical-align: middle;
  text-align: center;
}

.mesu_user-helptopics.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 100ms;
  visibility: hidden;
  opacity: 0;
}

.mesu_helptopics_visible  {
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 1000;
}

#popup-help .popup {
    margin: 70px auto;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    width: 30%;
    min-width: 60%;
    height: 80vh;
    position: relative;
}

#popup-help .mesu_helptopic_healine,
#popup-help .mesu_helptopic_name,
#popup-help .content  {color: #444; }

#popup-help .mesu_helptopic_healine {
  background-color: #e15c21;
  color: #fff;
  padding: 5px 15px;
  border-radius: 5px;
  margin-top: 0px !important;
  display: inline-block;
}

#popup-help .mesu_helptoic-actions {
  display: inline-flex;
  position: absolute;
  bottom: 20px;
}

.mesu_help_submit_satisfied,
.mesu_help_submit_unsatisfied {
    margin-top: 10px;
    border: 1px solid #abba05;
    font-size: 20px;
    color: #ffffff;
    background-image: none;
    background-color: #abba05;
    transition: all ease-in-out 300ms 0s;
    text-transform: none;
    font-weight: 700;
    display: inline-block;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 4px;
    padding: 8px 16px 8px 16px;
    float: left;
    margin-right: 10px;
}

.mesu_help_submit_unsatisfied {
    border: 1px solid #e15c21;
    background-color: #e15c21;
}

.mesu_bookmark_button:hover:after,
.mesu_help_trigger:hover:after,
.mesu_print_trigger:hover:after {
    font-family: Roboto;
    font-size: 15px;
    line-height: 25px;
    content: attr(data-explain);
    padding: 0px 4px;
    color: rgb(255, 255, 255);
    position: absolute;
    left: 10%;
    top: 100%;
    white-space: nowrap;
    z-index: 2;
    border-radius: 2px;
    background-color: rgb(171, 186, 5);
    border: 1px solid rgb(171, 186, 5);
}

/*------------------------------------*\
    Certifications
\*------------------------------------*/

.mesu_certificate_wrapper  {
    display: inline-block;
    width: 100%;
    margin-bottom: 30px;
}
.mesu_certification_image_wrapper { float: left; margin-right: 10px;}
.mesu_certification_image { width: 90px; height: auto; }

.mesu_cerfiticate_button {
    border: 1px solid #abba05;
    font-size: 20px;
    color: #ffffff;
    background-image: none;
    background-color: transparent;
    text-transform: none;
    font-weight: 700;
    display: inline-block;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 4px;
    padding: 8px 16px 8px 16px;
    color: #fff !important;
    background-color: #abba05;
    border-color: #abba05;
    margin-right: 15px;
    text-decoration: none;
}
.mesu_cerfiticate_button i {
	margin-right: 10px;
}





@media print {

  .mesu_prevent_print { display: none; }

  .comment-meta .mesu_print_only,
  .mesu_print_only.mesu_breadcrumbs { display: inline; }

   a[href]:after {
      display: none;
      visibility: hidden;
   }


  #mesu-sidenav,
  .comment-respond,
  .mesu_previous_next_wrapper,
  .mesu-dl-link,
  .mesu-dl-image,
  .mesu_breadcrumbs a,
  .comment-meta a,
  .bookmark-wrapper,
  .vivo_note,
  .vivo_video_wrapper,
  .comment-reply-link,
  .mesu_print_trigger,
  header.header  {
    display: none !important;
    width: 0px !important;
  }

  .mesu_print_only,
  .vivo_print_only  { display: block !important; }

}

/*  NEW CSS */

.mstat-msg-list {
  clear: both;
    list-style: none;
    padding: 0;
}

.mstat-msg-entry {
    border-radius: 5px;
    color: #fff;
    font-family: Menlo,monospace;
    font-size: .9em;
    padding: 2px 20px 1px;
    margin-bottom: 3px;
}
.mstat-msg-entry a,
.mstat-msg-entry a:hover { color: #fff; text-decoration: underline; }


@media (max-width: 1200px) {
  .single-mesu_module .wrapper {
    margin-left: 50px !important; }
}