/*!**********************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js!./app/assets/ui/assets/stylesheets/ui/ui.scss.erb ***!
  \**********************************************************************************************************************************************************************/
@charset "UTF-8";
/*-----------------------------------------------------------
    MathWorks Add-on Gallery CSS
    v. 01.201403

    $CONTENTS
-------------------------------------------------------------*/
/*
 *  GLOBALS ...................... site_elements,
 *  LAYOUT ....................... positioning_elements, header, navigation_top, leftnav,
 *  PAGE_COMPONENTS ..............
 *  ADDITIVE_CSS .................
 *  TYPOGRAPHY ................... futura_font, truncation
 *  COLORS ....................... pass/fail
 *                                 content_container, content, dialog, welcome_screen
 *  MENU ......................... course_menu, enrolled, tabs, rigth_side, leftnav
 *  IMPORT ................... icon font, offcanvas nav, stcky nav
    ...
 */
/*-----------------------------------------------------------
    $IMPORT
-------------------------------------------------------------*/
/*-----------------------------------------------------------
    $COLORS
-------------------------------------------------------------*/
/*
 * header gradient: rgb(0,86,149) - rgb(0,103,176)
 *                  #005695 - #0067b3
 *                  btn hover, btn txt
 *
 * button hover: rgba(0,132,230,0.25) #0084e6
 * button card hover: rgba(0,132,230,0.12)
 *
 * dark grey text: rgb(60,60,60) #3c3c3c
 * grey text: rgb(128,128,128) #808080
 *
 */
/*-----------------------------------------------------------
    $MIXINS
-------------------------------------------------------------*/
/* Note:
 *  To be used with OpenType font features
 *  Not to be used to enable small caps.
 */
/*-----------------------------------------------------------
    $STICKY
-------------------------------------------------------------*/
/*doc
---
title: Sticky Nav
name: sticky
category: navigation
parent: components
---

Section header sticky navigation.

*/
.sticky_header_container.affix-top .section_header.level_3 {
  height: 52px;
  padding-bottom: 8px;
  -webkit-transition: all 0.5s ease-in;
  -moz-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
}

/*
.sticky_header_container.affix-top .section_header.level_3 .section_header_content { height: 64px; padding-bottom: 8px;
  -webkit-transition: all .5s ease-in;
  -moz-transition: all .5s ease-in;
  transition: all .5s ease-in;
}
  */
/*.section_header.level_3 h1,
.section_header.level_3 p.h1 { padding: 2px 0 0; cursor: pointer; font: normal 400 32px/1 "futura-pt-n4","futura-pt",Arial,Helvetica,sans-serif; float: left; letter-spacing: -.02em; }

.sticky_header_container.affix-top .section_header.level_3 h1,
.sticky_header_container.affix-top .section_header.level_3 p.h1 { font-size: 32px;

  -webkit-transition: all .5s ease-in;
  -moz-transition: all .5s ease-in;
  transition: all .5s ease-in;

}
  */
/* Section Header: Affix on Scroll
.section_header.affix { width: 100%; z-index: 1035; top: 0; }*/
.sticky_header_container.affix {
  width: 100%;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);
  z-index: 1035;
}

/* Affix: Level 1 -- [ Additional Styles: XS ]
    .section_header.level_1.affix ~ .sticky_header_container.affix { top: 155px;	}

    .section_header.level_1.affix ~ .content_container,
    .section_header.level_1.affix ~ .full_banner_container,
    .section_header.level_1.affix ~ .body_lead_container { margin-top: 155px; }

    .section_header.level_1.affix ~ .sticky_header_container.affix ~ .content_container,
    .section_header.level_1.affix ~ .sticky_header_container.affix ~ .full_banner_container,
    .section_header.level_1.affix ~ .sticky_header_container.affix ~ .body_lead_container {	margin-top: 185px;	}

    .section_header.level_1.affix ~ .content_container .anchor,
    .section_header.level_1.affix-top ~ .content_container .anchor { padding-top: 175px;	margin-top: -175px;	}
    .section_header.level_1.affix ~ .sticky_header_container.affix ~ .content_container .anchor,
    .section_header.level_1.affix-top ~ .sticky_header_container.affix-top ~ .content_container .anchor {	padding-top: 205px;	margin-top: -205px;	}
*/
/* Affix: Level 2 -- [ Additional Styles: XS ]
   .section_header.level_2.affix ~ .sticky_header_container.affix { top: 105px;	}

   .section_header.level_2.affix ~ .content_container,
   .section_header.level_2.affix ~ .full_banner_container,
   .section_header.level_2.affix ~ .body_lead_container { margin-top: 105px; }

   .section_header.level_2.affix ~ .sticky_header_container.affix ~ .content_container,
   .section_header.level_2.affix ~ .sticky_header_container.affix ~ .full_banner_container,
   .section_header.level_2.affix ~ .sticky_header_container.affix ~ .body_lead_container {	margin-top: 135px;	}

   .section_header.level_2.affix ~ .content_container .anchor,
   .section_header.level_2.affix-top ~ .content_container .anchor { padding-top: 125px;	margin-top: -125px;	}
   .section_header.level_2.affix ~ .sticky_header_container.affix ~ .content_container .anchor,
   .section_header.level_2.affix-top ~ .sticky_header_container.affix-top ~ .content_container .anchor {	padding-top: 155px;	margin-top: -155px;	}
*/
/* Affix: Level 3 -- [ Additional Styles: XS ] */
@media (min-width: 992px) {
  /* Calc: Height of Banner + 20px */
  /*      .sticky_header_container.affix ~ .content_container,
        .sticky_header_container.affix ~ .full_banner_container,
        .sticky_header_container.affix ~ .body_lead_container { padding-top: 66px; }

        .sticky_header_container.affix.includes_subnav ~ .content_container,
        .sticky_header_container.affix.includes_subnav ~ .full_banner_container,
        .sticky_header_container.affix.includes_subnav ~ .body_lead_container { padding-top: 110px; }

        .sticky_header_container.affix ~ .content_container .anchor { padding-top: 76px; margin-top: -76px; }
        .sticky_header_container.affix-top ~ .content_container .anchor { padding-top: 154px; margin-top: -154px; }

        .sticky_header_container.affix.includes_subnav ~ .content_container .anchor { padding-top: 120px; margin-top: -120px; }
        .sticky_header_container.affix-top.includes_subnav ~ .content_container .anchor  { padding-top: 198px; margin-top: -198px; }
   */
}
/* Level 3: Animations
      @media (min-width:992px) {
        .sticky_header_container.affix .section_header.level_3 { height: 48px; }
        .sticky_header_container.affix .section_header.level_3 .section_header_content { height: 48px; padding-bottom: 7px; }

        .sticky_header_container.affix .section_header.level_3 h1,
        .sticky_header_container.affix .section_header.level_3 p.h1 { padding-top: 3px; padding-bottom: 4px; font-size: 27px; }

        .sticky_header_container.affix #header_desktop { display: none; }

      }
*/
/* Affix: All Levels
		.section_header.affix ~ .full_banner_container ~ .content_container,
		.section_header.affix ~ .body_lead_container ~ .content_container,
		.section_header.affix ~ .full_banner_container ~ .body_lead_container { margin-top: 0px !important; }

*/
/* Added for FX sticky header */
body.mlc .sticky_header_container.affix-top .section_header.level_3 {
  padding-bottom: 0;
}

/*-----------------------------------------------------------
    $NUGGETS
-------------------------------------------------------------*/
.nugget_container {
  padding: 5px 5px 0;
  margin-top: 10px;
  background: #f5f5f5;
  overflow: hidden;
}

.nugget_label {
  margin: 8px 13px 0 5px;
  font-size: 11px;
  float: left;
  text-transform: uppercase;
}

.nugget_rss_sort_container {
  display: flex;
  align-items: center;
  justify-content: end;
}

/* Nuggets */
.nugget {
  max-width: 200px;
  border: 1px solid #d6d4d4;
  border-radius: 5px;
  margin-bottom: 5px;
  background: #fff;
  float: left;
}

.nugget + .nugget {
  margin-left: 5px;
}

.nugget .label {
  padding: 0;
  color: #555;
  font-size: 12px;
  font-weight: normal;
}

.nugget:hover, .nugget:active {
  background-color: rgba(0, 0, 0, 0.04);
  border-color: #777;
}

.nugget:hover .label, .nugget:active .label {
  text-decoration: line-through;
}

.nugget a {
  padding: 3px 25px 5px 5px;
  color: #555;
  display: block;
  overflow: hidden;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nugget a:hover, .nugget a:focus {
  text-decoration: none;
}

.nugget a.icon-remove {
  padding-left: 5px;
}

.nugget a.icon-remove:before {
  line-height: 1.5;
  right: 3px;
  top: 2px;
}

.nugget_remove_all {
  background: transparent;
}

.nugget_remove_all a {
  padding-right: 5px;
}

.nugget_remove_all:hover {
  border: 1px solid #777;
  background: transparent;
}

.nugget_remove_all:hover .label, .nugget_remove_all a:focus {
  text-decoration: none;
}

/* Nuggets: Convert to Button List for Mobile */
@media screen and (max-width: 420px) {
  .nugget_label {
    margin: 6px 0 11px 5px;
    display: block;
    float: none;
  }
  .nugget {
    max-width: none;
    border: none;
    border-radius: 0;
    display: block;
    float: none;
    overflow: hidden;
  }
  .nugget + .nugget {
    margin-left: 0;
  }
  .nugget_remove_all:hover {
    border: none;
  }
}
/*-----------------------------------------------------------
    $RATING
-------------------------------------------------------------*/
/*doc
---
title: Rating
name: rating
category: rating
parent: components
---

MATLAB Examples color palette is composed of of a grey scale of colors.

*/
/*---- Rating: Community ----*/
.rating_container {
  clear: both;
}

/*---- Rating: source (MW, Community icon) ----*/
.rating_container p {
  display: inline-block;
  font-size: 1.5em;
  line-height: 1.125em;
  vertical-align: top;
}

.rating_container p:before {
  margin-left: -1.25em;
}

.rating_container p[class*=icon] {
  padding-left: 1.3em;
}

/* Rating: Star container */
.rating_scale a {
  color: #eaeaea;
}

.rating_scale a:hover {
  color: #eaeaea;
  text-decoration: none;
}

/* Rating: stars base layer, color grey */
.rating_scale,
.rate_input {
  color: #eaeaea;
  display: inline-block;
  font: 1em/1.75 "mathworks";
  position: relative;
}

.rating:before {
  content: "\e677\e677\e677\e677\e677";
}

/* Rating: stars top layer, color yellow */
.rated {
  color: #eec52a;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
}

.rated:before {
  content: "\e677\e677\e677\e677\e677";
}

/* Rating: rank number under the stars */
.ranking {
  clear: both;
  font-size: 0.875em;
}

.ranking .list-inline li + li {
  border-left: 1px solid #595959;
}

/* Rating: Radio group input */
.rating_container .radio_group_label {
  margin-bottom: 0;
  display: inline-block;
  font-size: 15px;
  line-height: 1.75;
  vertical-align: top;
}

/* Rating: radio buttons */
.rate_input:not(:checked) > input {
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  clip: rect(0 0 0 0);
  overflow: hidden;
  position: absolute;
}

.rate_input:not(:checked) > label {
  width: 1.175em;
  padding: 0 0.0625em 0;
  margin-bottom: 0;
  margin-right: 0.0625em;
  float: right;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
}

.rate_input:not(:checked) > label:before {
  content: "\e677";
  margin-right: 0.5em;
}

.rate_input > input:checked ~ label {
  color: #eec52a;
}

.rate_input:not(:checked) > label:hover,
.rate_input:not(:checked) > label:hover ~ label {
  color: #eec52a;
}

.rate_input > input:checked + label:hover,
.rate_input > input:checked + label:hover ~ label,
.rate_input > input:checked ~ label:hover,
.rate_input > input:checked ~ label:hover ~ label,
.rate_input > label:hover ~ input:checked ~ label {
  color: #ea0;
}

.rate_input > label:active {
  left: 2px;
  position: relative;
  top: 2px;
}

/* html5 boilerplate: visually hides content */
.visuallyhidden {
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  clip: rect(0 0 0 0);
  overflow: hidden;
  position: absolute;
}

/* ---- Detail overlay ------------------------------- */
.rate_input {
  margin-right: -5px;
}

.rating {
  display: block;
}

/*doc
---
title: Component: Buttons
name: buttons
category: forms
parent: forms
---

Views:
- Solution Header
- Solution

<h2>Chicklets</h2>
<div class="problem_status_visualization">
  <ul class="test_suite_status">
    <li class="pass test_case ts_public">
      <div class="tooltip hidden"></div>
    </li>
    <li class="pass test_case ts_public">
      <div class="tooltip hidden"></div>
    </li>
    <li class="fail test_case ts_public">
      <div class="tooltip hidden"></div>
    </li>
    <li class="fail test_case ts_public">
      <div class="tooltip hidden"></div>
    </li>
  </ul>
</div>



*/
/*-----------------------------------------------------------
    $BUTTONS
-------------------------------------------------------------*/
/* Buttons: Sizes */
.btn-xs,
.btn-group-xs > .btn {
  padding: 0 13px;
  font-size: 12px;
  line-height: 18px;
}

.btn-sm,
.btn-group-sm > .btn {
  padding: 4px 18px;
  font-size: 12px;
  line-height: 18px;
}

/* Buttons: Types */
.btn-default {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.btn-default, .btn-default:visited {
  border-color: transparent;
  background: transparent;
  color: #3c3c3c !important;
}
.btn-default:active, .btn-default:focus, .btn-default:hover {
  border-color: rgba(5, 5, 5, 0);
  background: rgba(5, 5, 5, 0);
  color: #3c3c3c;
}

.btn-default:hover {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.btn-default:hover, .btn-default:hover:visited {
  border-color: transparent;
  background: #e6e6e6;
  color: #1a1a1a !important;
}
.btn-default:hover:active, .btn-default:hover:focus, .btn-default:hover:hover {
  border-color: rgba(5, 5, 5, 0);
  background: #ebebeb;
  color: #1a1a1a;
}

.btn_login {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.btn_login, .btn_login:visited {
  border-color: transparent;
  background: transparent;
  color: #3c3c3c !important;
}
.btn_login:active, .btn_login:focus, .btn_login:hover {
  border-color: rgba(5, 5, 5, 0);
  background: rgba(5, 5, 5, 0);
  color: #3c3c3c;
}

.open .dropdown-toggle.btn-default {
  background-color: #e5e5e5;
  color: #3c3c3c;
}

.btn_general {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.btn_general, .btn_general:visited {
  border-color: #e5e5e5;
  background: #e5e5e5;
  color: #005fce !important;
}
.btn_general:active, .btn_general:focus, .btn_general:hover {
  border-color: #eaeaea;
  background: #eaeaea;
  color: #005fce;
}

.btn_primary {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.btn_primary, .btn_primary:visited {
  border-color: #808080;
  background: #808080;
  color: #fff !important;
}
.btn_primary:active, .btn_primary:focus, .btn_primary:hover {
  border-color: #858585;
  background: #858585;
  color: #fff;
}

.btn_secondary {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.btn_secondary, .btn_secondary:visited {
  border-color: #0067b3;
  background: #0067b3;
  color: #fff !important;
}
.btn_secondary:active, .btn_secondary:focus, .btn_secondary:hover {
  border-color: #006dbd;
  background: #006dbd;
  color: #fff;
}

.btn_tertiary {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.btn_tertiary, .btn_tertiary:visited {
  border-color: #3ab551;
  background: #3ab551;
  color: #fff !important;
}
.btn_tertiary:active, .btn_tertiary:focus, .btn_tertiary:hover {
  border-color: #3cbd54;
  background: #3cbd54;
  color: #fff;
}

.btn_quaternary {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.btn_quaternary, .btn_quaternary:visited {
  border-color: #eea600;
  background: #eea600;
  color: #fff !important;
}
.btn_quaternary:active, .btn_quaternary:focus, .btn_quaternary:hover {
  border-color: #f8ad00;
  background: #f8ad00;
  color: #fff;
}

.btn_quinary {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.btn_quinary, .btn_quinary:visited {
  border-color: #00ace8;
  background: #00ace8;
  color: #fff !important;
}
.btn_quinary:active, .btn_quinary:focus, .btn_quinary:hover {
  border-color: #00b4f2;
  background: #00b4f2;
  color: #fff;
}

.btn_senary {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.btn_senary, .btn_senary:visited {
  border-color: #79dafc;
  background: #79dafc;
  color: #fff !important;
}
.btn_senary:active, .btn_senary:focus, .btn_senary:hover {
  border-color: #83ddfc;
  background: #83ddfc;
  color: #fff;
}

.btn_septenary {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.btn_septenary, .btn_septenary:visited {
  border-color: #07b38c;
  background: #07b38c;
  color: #fff !important;
}
.btn_septenary:active, .btn_septenary:focus, .btn_septenary:hover {
  border-color: #07bd94;
  background: #07bd94;
  color: #fff;
}

.btn_emphasize {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.btn_emphasize, .btn_emphasize:visited {
  border-color: #db5f23;
  background: #db5f23;
  color: #fff !important;
}
.btn_emphasize:active, .btn_emphasize:focus, .btn_emphasize:hover {
  border-color: #dd652b;
  background: #dd652b;
  color: #fff;
}

.btn_search {
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 0;
}

.btn-sm {
  font-size: 14px;
}

.metadata_action .btn {
  min-width: 120px;
}

/*-----------------------------------------------------------
    $CARD
-------------------------------------------------------------*/
/*
 *  CARD_CONTAINER
 *  EXPLORER_VIEW ......................... attr_container [source, state], metadata_container [info, action]
 *  LIST_VIEW ......................... attr_container [source, state], metadata_container [info, action]
 *  ADDITIVE_CLASSES ..................... card_bg_* [null, general], add_long_title (3 lines), add_short_title (2 lines)
    ...
 */
/*-----------------------------------------------------------
    $CARD_CONTAINER
-------------------------------------------------------------*/
/* Additives:
    - .explorer_view (card view)
    - .list_view (search result view)
    - .add_long_title (3 lines)
    - .add_short title (2 lines)
    - .add_fixed width (220px)
    - .add_card_bg_null (white)
    - .add_card_bg_general (grey (#f6f6f6)
    - .show_leading
*/
.card_container {
  width: 100%;
  font-size: 0.8em;
  line-height: 1.5;
  position: relative;
}

.card_container:before, .card_container:after {
  content: "";
  display: table;
}

.card_container:after {
  clear: both;
}

.card_container h3 {
  font-weight: bold;
}

/* Card: a href */
.card_container > a {
  width: 100%;
  height: 100%;
  float: left;
}

.card_container > a, .card_container > a:active, .card_container > a:visited,
.card_container > a:hover, .card_container > a:focus {
  color: #555;
}

.card_container > a:hover, .card_container > a:focus {
  text-decoration: none;
}

/* Card: Over-rides */
.card_container .panel,
.card_container .panel-footer {
  border-width: 0;
  margin-bottom: 0;
  background: transparent;
  box-shadow: none;
}

.card_container .panel-footer p {
  margin-bottom: 0;
}

/* Card: 1. media (image | icon + summary) */
.card_media {
  position: relative;
}

.card_media img {
  width: 100%;
  height: auto;
}

/* Card: 2. body (content: title, body) */
.card_body {
  position: relative;
}

/* Card: 3. footer (meta data: source, downloads | actions) */
.card_footer {
  width: 100%;
  padding: 0.166666667em 0.75em 0;
  clear: both;
  float: left;
  position: absolute;
  bottom: 1px;
}

/*-----------------------------------------------------------
    $EXPLORER_VIEW
-------------------------------------------------------------*/
.explorer_view {
  min-height: 27em;
  height: auto;
  border: 0.08333333em solid #d9d9d9;
}

.explorer_view .card_media {
  width: 220px;
  height: 165px;
  overflow: hidden;
} /* 12 */
.explorer_view .card_body {
  min-height: 10em;
  max-height: 100%;
} /* 120 / 12 */
.explorer_view .card_body .panel-footer {
  position: static;
}

.explorer_view .card_body .panel-footer {
  position: unset;
}

.explorer_view .panel-body {
  overflow-y: hidden;
}

.explorer_view .panel-body p {
  margin-top: 0;
  line-height: 1.5;
  word-break: break-word;
}

.explorer_view .panel-heading,
.explorer_view .panel-body,
.explorer_view .panel-footer {
  padding: 0 0.8375em;
  border: 0;
}

/*---- $Media ----*/
.explorer_view .card_media + .card_body {
  border-top: 0.08333333em solid #d9d9d9;
  margin-top: 0;
}

/*---- $Height ----*/
/* Height: include metadata
    - metadata (.card_footer) is present
    - decrease description area
*/
.explorer_view > a:nth-last-child(2) .panel-body {
  height: 4.5em;
}

/* Height: no media
    - preserve room for source, state
    - title/description are present (.card_body)
    - grow description area (.panel-body)
    - metadata is present (.card_footer)
*/
.explorer_view > a > div:only-child {
  margin-top: 1.125em;
}

.explorer_view > a:nth-last-child(2) > div:only-child .panel-body {
  height: 16.75em;
}

/* Height: no media & no metadata
    - grow description area (.panel-body)
*/
.explorer_view > a:only-child > div:only-child .panel-body {
  height: 20em;
}

/* Height: no metadata
    - grow description slightly
*/
.explorer_view > a:only-child .panel-body {
  height: 6em;
}

/*---- $Attributes ----*/
/* Additives: (insert at the .attr_container level)
    - .attr_only_source (do not use with .attr_bg_*)
    - .attr_only_state
    - .attr_bg_null
    - .attr_bg_primary
    - .attr_bg_secondary
*/
.attr_container {
  padding: 0.08333333em 0.8375em;
  border-radius: 0.91666667em/0 50% 50% 0;
  font-size: 1em;
  font-weight: bold;
  left: -0.08333333em;
  line-height: normal;
  position: absolute;
  top: -1.08375em;
}

.attr_container > div {
  display: inline-block;
}

.attr_container p {
  margin-bottom: 0;
  line-height: 1.5;
}

.list_view .card_media .attr_container {
  left: 0;
  top: 0.8375em;
} /* l: 165px / t: 10px */
.card_actions .attr_container {
  padding: 0;
  font-weight: normal;
  left: auto;
  position: relative;
  top: 0.5em;
}

/*---- Attributes: source ----*/
.attr_source {
  position: relative;
  top: 0.166666667em;
}

.attr_only_source .attr_source,
[data-install-state=not-installed] .attr_source {
  top: -4px;
}

.attr_only_source .attr_source > span,
[data-install-state=not-installed] .attr_source > span {
  padding: 0.25em;
  border: 0.08333333em solid #b9b9b9;
  border-radius: 50%;
  background: #fff;
  color: #777;
}

.card_actions .attr_source {
  top: -0.16666667em;
}

.card_actions .attr_source > span {
  padding: 0;
  border: 0;
  background: transparent;
}

/*---- Attributes: state ----*/
.attr_state {
  margin-left: 0.25em;
}

.attr_only_state .attr_state,
[data-install-state=installed] .card_body .attr_state {
  padding: 0.166666667em 0 0.08333333em;
}

/*---- Attributes: type ----*/
.attr_type p, .attr_type p > span {
  color: gray;
}

/*---- Attributes: background colors ----*/
.attr_bg_null {
  background: #fff;
}

/* (#009915 !important tertiary) green */
.attr_bg_primary,
[data-install-state=installed] .panel-footer .attr_container,
[data-install-state=installed] .card_media .attr_container {
  background: #20ac3c;
  color: #fff;
}

/* (#eea600 !important quaternary) yellow */
.attr_bg_secondary,
[data-install-state=trialing] .panel-footer .attr_container,
[data-install-state=trialing] .card_media .attr_container {
  background: #ef8322;
  color: #fff;
}

[data-install-state=installed] .card_media .attr_container,
[data-install-state=trialing] .card_media .attr_container {
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3);
}

[data-install-state=not-installed][data-license-state=licensed] .panel-footer .attr_container,
[data-install-state=not-installed][data-license-state=licensed] .card_media .attr_container {
  background: #004b87;
  color: #fff;
}

.cards.horizontal_cards [data-install-state=not-installed][data-license-state=not-licensed] .card_body .attr_state {
  display: none;
}

.cards:not(.horizontal_cards) [data-install-state=not-installed][data-license-state=licensed] .attr_source {
  top: 0;
}

.cards:not(.horizontal_cards) [data-install-state=not-installed][data-license-state=licensed] .attr_source > span {
  padding: 0;
  border: none;
  border-radius: unset;
  background: none;
  color: #fff;
}

.cards:not(.horizontal_cards) .attr_only_state .attr_state,
.cards:not(.horizontal_cards) [data-install-state=not-installed][data-license-state=licensed] .card_body .attr_state {
  padding: 0.166666667em 0 0.08333333em;
}

.cards.horizontal_cards.recommendations .card_body .attr_state {
  background: #004b87;
  color: #fff;
  display: inline-block;
  border-radius: 0.91666667em/0 50% 50% 0;
  padding: 3px 10px 3px 10px;
  margin: 5px 0 0 0;
  font-weight: bold;
}

.cards.horizontal_cards.recommendations .card_body .attr_state p {
  margin-bottom: 0;
}

/*---- $Metadata ----*/
.metadata_container {
  width: 100%;
  float: left;
  position: relative;
}

/*.metadata_container > div:last-child:not(.metadata_action):before { border-left: 1px solid #b9b9b9; content: ''; height: 16px; left: 50%; position: absolute; top: 4px; } */
/*---- Metadata: info ----*/
.metadata_info > p {
  margin-bottom: 0;
  margin-top: 0.425em;
  color: gray;
}

.metadata_info > p > span {
  color: #b9b9b9;
}

.metadata_info .rating_scale {
  font-size: 1.25em;
}

.list_view .metadata_info > p {
  margin-top: 0;
}

/*---- Metadata: action ----*/
.metadata_action {
  margin-right: -15px;
}

.metadata_action > p {
  float: left;
  text-align: center;
  line-height: normal;
}

.metadata_action > p a {
  display: block;
}

/*-----------------------------------------------------------
    $LIST_VIEW
-------------------------------------------------------------*/
.list_view {
  border-bottom: 1px solid #eee;
  margin-bottom: 1.25em;
  clear: both;
  word-break: break-word;
}

.list_view:only-of-type {
  border: 0;
  margin-top: 1.25em;
}

.list_view h3 {
  margin-top: 0.8em;
  margin-bottom: 0;
  font-size: 1.25em;
  line-height: 1.25;
}

.metadata_info h3 {
  margin-top: 0.8em;
  margin-bottom: 0;
  font-size: 1.25em;
  line-height: 1;
  vertical-align: bottom;
}

/* Width: entire item is clickable
    - preserve room for metadata (.card_footer)
*/
.container--detail .list_view .card_media {
  width: 162.66666656px;
  border: 1.33333328px solid #d9d9d9;
  float: left;
}

#search_result .list_view.card_container:before, #search_result .card_container:after {
  content: none;
  display: none;
}

#search_result .list_view.card_container {
  display: grid;
  grid-template-columns: 165px 4fr auto;
  grid-gap: 15px;
}

#search_result .list_view .card_media {
  width: 100%;
}

.list_view .card_media > a {
  display: block;
}

.list_view .card_media > a img {
  border: 1px solid #d9d9d9;
  max-width: 165px;
  margin: 0 auto;
}

.container--detail .list_view .card_body {
  width: calc(100% - 162.66666656px - 13em - 2.5em);
  margin: 0 1.25em 1.25em;
  float: left;
}

#search_result .list_view .card_media > a img {
  border: 1px solid #d9d9d9;
  max-width: 165px;
  margin: 0 auto;
}

#search_result .list_view .card_body {
  width: 100%;
  margin: 0 0 15px;
  overflow: hidden;
}

.list_view .panel-heading,
.list_view .panel-body,
.list_view .panel-footer {
  padding: 0;
}

.list_view .panel {
  margin-bottom: 0.25em;
}

.list_view .panel-heading {
  margin-bottom: 0.75em;
}

.list_view .panel-body p {
  margin-bottom: 0.75em;
}

.list_view .panel-footer {
  top: 5px;
  position: relative;
}

.list_view .card_footer {
  width: 13em;
  padding: 0;
  clear: none;
  position: relative;
}

.list_view .card_actions {
  width: -webkit-calc(100% - 13.3333333333em - 2.5em);
  width: calc(100% - 13.3333333333em - 2.5em);
  margin-right: 1.25em;
  clear: none;
  float: right;
  vertical-align: bottom;
}

/* Examples
    - link sibling to card_footer
    - card_footer: clear: both;
    - card_footer: contains breadcrumbs
*/
.list_view > a:nth-last-child(2) {
  float: left;
}

.list_view > a:nth-last-child(2) .card_body {
  width: calc(100% - 13.75em - 1.25em);
  min-height: 7.75em;
  padding: 0;
  margin-left: 1.25em;
  margin-bottom: 2.25em;
  margin-right: 0;
  float: left;
}

.list_view > a + .card_footer {
  width: calc(100% - 13.75em - 1.25em);
  padding: 0;
  margin-left: 15em;
  top: -2.25em;
} /* width: 120px */
/* Add-ons
    - No overarching link
    - card_footer: float: right;
    - card_footer: contains metadata
*/
/*---- Mobile Card List View Layout ----*/
@media only screen and (max-width: 768px) {
  #search_result .list_view.card_container {
    grid-template-columns: 1fr;
  }
  #search_result .list_view.card_container .card_media {
    grid-column: span 2;
  }
  #search_result .list_view.card_container .card_body .search-result--nested {
    white-space: normal;
  }
}
/*-----------------------------------------------------------
    $ADDITIVE_CLASSES
-------------------------------------------------------------*/
/*---- $Card Background ----*/
.add_card_bg_null {
  background: #fff;
}

.add_card_bg_null .card_media {
  background: #f6f6f6;
}

.add_card_bg_general {
  background: #f6f6f6;
}

.add_card_bg_general .card_media {
  background: #fff;
}

/*---- $Fixed Width ----*/
/* width: 220px; 15px/12px = 1.25 */
/* removed - float: left (handled by media query) */
.add_fixed_width {
  width: 18.375em;
  margin: 0 1.25em 1.25em 0;
  display: inline-block;
}

/*---- $Long Title (3) ----*/
.add_long_title .panel-heading {
  height: 5.375em;
  margin-bottom: 0.675em;
  overflow: hidden;
}

.add_long_title h3 {
  margin-top: 0.8em;
  margin-bottom: 0;
  font-size: 1.25em;
  line-height: 1.25;
} /* font-size: 15px / 12px  */
.list_view .panel-heading {
  height: auto;
}

.list_view.add_long_title h3 {
  margin-top: 0;
}

/*---- $Short Title (2) ----*/
.add_short_title .panel-heading {
  height: 58px;
  margin-bottom: 1.175em;
  overflow: hidden;
}

.add_short_title h3 {
  margin-top: 1em;
  margin-bottom: 0;
  font-size: 1.333333em;
  line-height: 1.25;
} /* font-size: 16px / 12px, margin-top: 15px; line-height: 22.5px/18px*/
/* Tab: app/example style modifications */
/* leaf page - description content */
.generated_example_content .nav > li > a {
  padding: 2px 15px;
  border: 1px solid #b9b9b9;
  border-bottom-color: transparent;
  color: #b9b9b9;
  text-align: center;
}

.generated_example_content .nav-tabs {
  padding-left: 15%;
  border-bottom: none;
}
.generated_example_content .nav-tabs > li {
  margin-bottom: -1px;
  margin-right: 15px;
  z-index: 11;
}
.generated_example_content .nav-tabs > li > a:hover {
  background: none;
  border-color: #777777;
  color: #777777;
}
.generated_example_content .nav-tabs > li.active > a,
.generated_example_content .nav-tabs > li.active > a:hover,
.generated_example_content .nav-tabs > li.active > a:focus {
  border-color: #777777;
  border-bottom-color: #fff;
  color: #777777;
}
.generated_example_content .tab-content {
  border: none;
  border-top: 1px solid #777777;
}

/*---- Landing Page: Single-row card groups
-------------------------------------------------------------*/
.cards {
  margin: 0;
  -webkit-transition: width 0.3s ease-in-out;
  transition: width 0.3s ease-in-out;
}

.cards > a {
  display: block;
  clear: both;
}

.container--grouping {
  padding-top: 20px;
}

/* Layout cards in grid that adjusts per viewport size */
.cards {
  height: auto;
  overflow: hidden;
}

.cards.filtered_view {
  height: auto;
}

.cards {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fill, 220px);
  -ms-grid-rows: 1fr [1];
  grid-template-rows: repeat(1, 1fr);
  grid-auto-rows: 0;
  grid-column-gap: 16px;
  padding: 5px 5px 0 5px;
  margin: 0 -5px;
  overflow-y: hidden;
  align-content: space-around;
  justify-content: space-between;
  overflow-x: hidden;
}

.cards.filtered_view {
  grid-auto-rows: auto;
}

.cards.all_recommendations {
  grid-auto-rows: auto;
}

/*-----------------------------------------------------------
    $TABS
-------------------------------------------------------------*/
.tab-content:before, .tab-content:after {
  clear: both;
  content: "";
  display: table;
}

.tab-content {
  border: none;
  border-top: 1px solid #aaaaaa;
}

/*---- Tab: Function/Block list design ----*/
.package__file-list {
  padding-top: 7px;
  overflow-x: hidden;
}

.package__file-list li a {
  padding: 3px 0 3px 10px;
  color: rgb(0, 87, 149);
  font-weight: normal;
  line-height: 1.5;
}

.package__file-list li a:hover {
  color: rgb(0, 87, 149);
}

.package__file-list .selected {
  background: #eee;
  overflow: hidden;
}

.package__file-list .tooltip-inner {
  white-space: pre-wrap;
  word-break: break-all;
}

.nav--file-list {
  font-size: 12px;
}

.nav--file-list li {
  padding-left: 0;
  margin-bottom: 0;
}

.package__file-list.single_tier h4,
.package__file-list.add_scrollability > ul {
  margin-right: 15px;
}

/* Tab: indent - community submissions */
.package__file-list.single_tier h4,
.package__file-list.single_tier ul {
  margin-left: 0;
}

/* Tab: break non breaking titles */
.package__file-list.single_tier h4 {
  word-break: break-all;
}

/* Tab: indent - category lists (non-community) */
.package__file-list > h2 {
  margin-left: 5px;
  font-size: 18px;
  font-weight: 600;
}

.package__file-list > h3 {
  margin-left: 15px;
}

.package__file-list > h4 {
  margin-left: 30px;
}

.package__file-list > h5 {
  margin-left: 45px;
}

.package__file-list > h6 {
  margin-left: 60px;
}

h2 + .nav--file-list {
  margin-left: 5px;
}

h3 + .nav--file-list {
  margin-left: 15px;
}

h4 + .nav--file-list {
  margin-left: 30px;
}

h5 + .nav--file-list {
  margin-left: 45px;
}

h6 + .nav--file-list {
  margin-left: 60px;
}

h6 > .nav--file-list {
  margin-right: 15px;
}

h6 {
  font-weight: bold;
}

.package__file-list > h3 {
  font-size: 15px;
  font-weight: bold;
  line-height: 1;
  padding: 2px 0 4px;
  color: #555;
  margin-bottom: 0;
}

.package__file-list > h4 {
  font-size: 14px;
  font-weight: 600;
  color: #555;
  padding: 5px 0;
  margin-bottom: 0;
}

/* Tab: empty h4 */
.package__file-list > h4:empty {
  padding-top: 0;
  margin-bottom: 0;
}

/*---- file list content (right column) ---*/
.package__file-content_panel {
  width: 100%;
  border: transparent;
  background: transparent;
  box-shadow: none;
}

.package__file-content_panel iframe {
  width: 100%;
  border-width: 0;
  overflow: hidden;
}

.package__file-content_body {
  padding: 0;
}

/*---- Tab: App list design ----*/
.package__file-list.app_list {
  padding-top: 0;
  margin-bottom: 15px;
}

.app_item {
  border-bottom: 1px solid #eee;
}

.app_item:before, .app_item:after {
  content: "";
  display: table;
}

.app_item:after {
  clear: both;
}

.app_item .card_container {
  padding: 10px;
  margin-bottom: 5px;
  margin-top: 5px;
}

.app_item .card_container h3.small {
  font-size: 1.375em;
}

.app_item .card_container.list_view {
  border-bottom-width: 0;
}

.app_item .card_container.list_view .card_body,
.app_item .card_container.list_view .panel,
.app_item .card_container.list_view .panel-heading {
  margin-bottom: 0;
}

.app_item .card_container.list_view .card_media {
  overflow: hidden;
}

.app_item:first-of-type .card_container.list_view:only-of-type {
  margin-top: 0;
  padding-top: 0;
}

.app_summary {
  margin-bottom: 1.25em !important;
  color: #777777;
}

/*---- package description nav tab */
.nav-tabs {
  border-bottom: none;
  margin-left: 0;
}

.nav-tabs > li {
  padding-left: 0;
  margin-left: 0;
}

.nav-tabs > li > a {
  padding: 4px 15px;
  border-color: transparent;
  border-radius: 0;
  color: rgba(30, 118, 190, 0.9);
  font-size: 16px;
  font-weight: normal;
  text-align: center;
  text-indent: 5px;
}

.nav-tabs > li > a:hover {
  background: none;
  border-color: transparent;
  color: #555555;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  border-color: #aaaaaa;
  border-bottom-color: #fff;
  background-color: transparent;
  color: #777;
}

/*p*/
.learn_more {
  margin-bottom: 0;
  margin-top: 7px;
}
.learn_more > a {
  font-size: 14px;
  text-decoration: none;
}
.learn_more > a:before {
  position: relative;
  top: 3px;
}
.learn_more > a:hover {
  text-decoration: underline;
}
.learn_more > a > span {
  width: 16px;
  font-size: 16px;
  position: relative;
}

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

/*---- Scrolling tabs should use all available space, adding important to over-ride JS styling */
/* site 6 tab design
.all-tabs-container .nav-tabs li a { font-weight: normal; }
.all-tabs-container .tab-content { min-height: 0; }
.all-tabs-container .panel-title { font-size: 19px; }
.all-tabs-container .tabs-vertical .tab-pane.active { padding-bottom: 0; border-bottom: none; }
.all-tabs-container .tabs-vertical { padding-top: 30px; border: 0; }
.all-tabs-container .tabs-vertical>li,
.all-tabs-container .tabs-right>li { margin-bottom: 2px; float: none; text-align: left; }
.all-tabs-container .tabs-vertical>li.active>a,
.all-tabs-container .tabs-vertical>li.active>a:hover,
.all-tabs-container .tabs-vertical>li.active>a:focus { border-right-color: transparent; border-bottom-color: #ddd; margin-right: -1px; background: #fff; z-index: 1000 }
.all-tabs-container .tabs-vertical>li>a { border-radius: 4px 0 0 4px; margin-right: 0; display: block; }
.all-tabs-container .tabs-vertical { width: 25%; float: left; position: relative; }
.all-tabs-container .tabs-vertical + .tab-content { width: 75%; padding-left: 15px; padding-right: 15px; border-top: 1px #ddd solid; border-left: 1px #ddd solid; float: left; position: relative; }
.all-tabs-container .tabs-vertical + .remove_border { border-top: 0; border-right: 0; border-bottom: 0; }
.all-tabs-container .remove_padding { padding: 0 !important; }
.all-tabs-container .responsive .panel-heading { padding: 0; }
.all-tabs-container .responsive .panel-heading a { padding: 10px 15px; color:#3c3c3c; outline: 0; }
.all-tabs-container .nav-tabs a { outline: 0; }
.all-tabs-container .nav-tabs li { padding-left: 0; font: 400 16px/16px "Arial"; }
.all-tabs-container .tabs-vertical .label-description { color: #3c3c3c; display: block; font: 400 14px/14px "Arial"; text-decoration: none; }
.all-tabs-container .nav-tabs:before { content: ""; display: block; }
 */
/* HTML5 Boilerplate .visuallyhidden */
.visually_hidden {
  height: 1px;
  width: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  clip: rect(0 0 0 0);
  overflow: hidden;
  position: absolute;
}

.visually_hidden.focusable:active,
.visually_hidden.focusable:focus {
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  overflow: visible;
  position: static;
}

html body {
  background: #ffffff !important;
}

/*---- Addons changes ----*/
#post_message_channel {
  display: none;
}

/*---- $Forms
-------------------------------------------------------------*/
.textfield {
  padding: 0px;
  border-width: 0px;
  margin: 0px;
  background-color: transparent;
  outline: none;
  text-indent: 5px;
}

/*-----------------------------------------------------------
    $LAYOUT
-------------------------------------------------------------*/
/* lock the grid */
@media screen and (min-width: 50px) {
  .container--header,
  .container--detail,
  .banner--dependency {
    min-width: 768px !important;
    width: 100%;
  }
  .container--main {
    min-width: 498px !important;
  }
}
.container--header {
  height: 72px;
  padding: 0;
  background: linear-gradient(to left, rgb(0, 86, 149) 0%, rgb(9, 57, 102) 100%);
}

.container--nav {
  padding: 0 15px;
  background-color: #fff;
}

.container--main {
  padding-top: 0px !important;
}

.container--detail > .container-fluid {
  padding-bottom: 15px;
}

.container-spellcheck {
  margin-top: 15px;
}

.container--message {
  margin-top: 30px;
}
.container--message h3 {
  margin-bottom: 5px;
  font-size: 22px;
  font-weight: bold;
  line-height: 26px;
}
.container--message p {
  margin-bottom: 15px;
}

div[role=main] {
  position: relative;
  z-index: 0;
}

cite {
  font-style: normal;
}

/* Fix Additional Top Padding in FX */
body.mlc .content_container,
body.mlc .content_container_no_conflict {
  padding-top: 0;
}

/* remove pseudo content [use: banner--dependency comma] */
.remove_pseudo_element:after,
.remove_pseudo_element:before {
  content: "" !important;
}

/*-----------------------------------------------------------
    $HEAD
-------------------------------------------------------------*/
/*---- $Navigation
-------------------------------------------------------------*/
/*---- nav: core ----*/
.nav_core.affix {
  height: 48px;
  background: linear-gradient(to left, rgb(0, 86, 149) 0%, rgb(9, 57, 102) 100%);
}

/* nav: core - actions */
.nav_header_navigation .nav_header_actions {
  display: flex;
  align-items: end;
  margin-top: 10px;
  /* nav: core - general */
  /* nav: core - browse btn */
  /* nav: core - home btn */
  /* nav: core - release mark */
}
.nav_header_navigation .nav_header_actions .nav_core_home a, .nav_header_navigation .nav_header_actions .nav_core_home a:visited,
.nav_header_navigation .nav_header_actions .nav_core_browse a,
.nav_header_navigation .nav_header_actions .nav_core_browse a:visited {
  color: rgba(255, 255, 255, 0.75);
}
.nav_header_navigation .nav_header_actions .nav_core_home a:visited, .nav_header_navigation .nav_header_actions .nav_core_home a:active, .nav_header_navigation .nav_header_actions .nav_core_home a:focus,
.nav_header_navigation .nav_header_actions .nav_core_browse a:visited,
.nav_header_navigation .nav_header_actions .nav_core_browse a:active,
.nav_header_navigation .nav_header_actions .nav_core_browse a:focus {
  text-decoration: none;
}
.nav_header_navigation .nav_header_actions .nav_core_home a:hover,
.nav_header_navigation .nav_header_actions .nav_core_browse a:hover {
  opacity: 0.95;
  text-decoration: none;
}
.nav_header_navigation .nav_header_actions .nav_core_browse {
  margin-left: -10px;
}
.nav_header_navigation .nav_header_actions .nav_core_browse a.icon-arrow-left {
  padding-left: 0;
  width: 32px;
  height: 32px;
}
.nav_header_navigation .nav_header_actions .nav_core_browse a,
.nav_header_navigation .nav_header_actions .nav_core_browse a:visited {
  color: rgba(255, 255, 255, 0.75);
}
.nav_header_navigation .nav_header_actions .nav_core_browse a:before {
  margin-left: 0;
  line-height: 1;
}
.nav_header_navigation .nav_header_actions .nav_core_browse a.disabled {
  cursor: default;
  color: rgba(255, 255, 255, 0.25);
  pointer-events: none;
}
.nav_header_navigation .nav_header_actions .nav_core_home {
  margin-left: 3px;
}
.nav_header_navigation .nav_header_actions .nav_core_home h1 {
  margin-bottom: 0;
}
.nav_header_navigation .nav_header_actions .nav_core_home a {
  font-size: 20px;
}
.nav_header_navigation .nav_header_actions .nav_core_home a.icon-home {
  width: 32px;
  height: 32px;
}
.nav_header_navigation .nav_header_actions .nav_core_home a.icon-home:before {
  margin-left: -29px;
  padding-top: 1px;
}
.nav_header_navigation .nav_header_actions .nav_core_release img {
  width: 75px;
}
.nav_header_navigation .nav_header_actions .nav_core_release_cta a {
  margin-left: 5px;
  color: #fff;
  font-size: 20px;
}
.nav_header_navigation .nav_header_actions .nav_core_release_cta a:hover, .nav_header_navigation .nav_header_actions .nav_core_release_cta a:active, .nav_header_navigation .nav_header_actions .nav_core_release_cta a:focus {
  color: #fff;
  text-decoration: none;
}

/* nav: core - search form/input */
.nav_core form {
  padding-top: 8px;
}

/* nav: core - search input */
.nav_core_search_input {
  height: 30px;
  padding: 3px 12px;
  border: none;
  border-radius: 4px 0 0 4px !important;
}

/* nav: core - search button */
.nav_core_search .btn_search_adjacent {
  border-radius: 0 4px 4px 0;
  background-color: #1c4b6a;
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
}

.nav_core_search .btn_search_adjacent:hover,
.nav_core_search .btn_search_adjacent:active,
.nav_core_search .btn_search_adjacent:focus {
  color: #fff;
  outline: none;
}

.nav_core_search .btn_search_adjacent.icon-search {
  padding-top: 6px;
  padding-bottom: 6px;
}

.nav_core_search .conjoined_search {
  height: 30px;
  padding: 3px 12px;
  border: none;
  border-radius: 4px 0 0 4px !important;
}

.nav_core_search .input-group-btn:last-child > .btn {
  margin-left: 0;
}

/* nav: core - list */
.nav_core_list {
  padding: 4px 0 2px;
}

.nav_core_list a {
  color: #fff;
}

.nav_core_list a:hover,
.nav_core_list a:active,
.nav_core_list a:focus {
  text-decoration: none;
}

.nav_core_list button {
  line-height: 16px;
}

.nav_core_list ul {
  margin-bottom: 0;
}

.nav_core_list li {
  padding-left: 0;
  margin-bottom: 0;
  float: left;
  font-size: 12px;
  line-height: 18px;
}

.nav_core_list > ul > li:not(:first-child):before {
  height: 16px;
  margin: 0 15px;
  border-right: 1px solid rgba(255, 255, 255, 0.75);
  content: "";
  float: left;
  vertical-align: middle;
}

.nav_core_list .add_padding_right_0 {
  padding-right: 0;
}

.nav_core_list .btn_login {
  padding-left: 0;
  padding-right: 0;
  color: #fff !important;
}

.logged-in-name {
  float: left;
  color: #fff;
}

/*---- nav: filters ----*/
.nav_filter {
  background-color: #fff;
}

.nav_filter_content ul {
  margin-left: 0;
  margin-bottom: 15px;
}

.nav--tabs h3,
.nav_filter_content h3 {
  padding: 2px 0 4px;
  margin: 10px 0 0;
  color: #555;
  border-bottom: 1px solid #e6e6e6;
}

.nav_filter_content h3 span {
  margin-top: -3px;
  float: right;
}

.nav_filter_content li {
  padding-left: 0;
  margin: 0;
  list-style: none;
}

.nav_filter_content li.selected {
  background-color: rgb(244, 244, 244);
}

.nav_filter_content li a {
  padding: 1px 4px;
  color: #777;
  display: block;
  font-weight: normal;
  line-height: 21px;
}

.nav_filter_content li.selected a {
  color: #444;
}

.nav_filter_content li a {
  padding-left: 18px;
  background-image: url("https://www.mathworks.com/matlabcentral/fileexchange/images/addons-ui/checkbox-default.png");
  background-repeat: no-repeat;
  background-position: 2px 5px;
}

.nav_filter_content li.selected a {
  background-image: url("https://www.mathworks.com/matlabcentral/fileexchange/images/addons-ui/checkbox-checked.png");
}

.nav_filter_content li a:hover {
  background-image: url("https://www.mathworks.com/matlabcentral/fileexchange/images/addons-ui/checkbox-default-hover.png");
}

.nav_filter_content li.selected a:hover {
  background-image: url("https://www.mathworks.com/matlabcentral/fileexchange/images/addons-ui/checkbox-checked-hover.png");
}

.nav_filter_content a:hover span {
  font-weight: 500;
}

.nav_filter_content li.see-more {
  background-image: none;
  text-align: right;
}

.nav_filter_content li.see-more:before {
  content: none;
}

.nav_filter_content li.see-more a {
  background: none;
  color: rgba(30, 118, 190, 0.9);
}

.nav_filter_content span {
  position: absolute;
  right: 4px;
  text-align: right;
}

.nav_filter_content span[class^=icon-] {
  right: 0;
}

.nav_filter_content a.icon-left {
  padding-left: 20px;
}

.nav_filter_content a.icon-left span {
  left: 0;
  text-align: left;
}

/*---- nav category: filters ----*/
.nav_cat_filter_content ul {
  margin-left: 0;
  margin-bottom: 15px;
}

.nav--tabs h3,
.nav_cat_filter_content h3 {
  padding: 2px 0 4px;
  margin: 10px 0 0;
  color: #555;
  border-bottom: 1px solid #e6e6e6;
}

.nav_cat_filter_content h3 span {
  margin-top: -3px;
  float: right;
}

.nav_cat_filter_content h5 {
  margin-left: 0;
  margin-top: 1px;
  margin-bottom: -1px;
}

.nav_cat_filter_content li {
  padding-left: 15px !important;
  margin: 0;
  list-style: none;
}

.nav_cat_filter_content li.selected {
  background-color: rgb(244, 244, 244);
}

.nav_cat_filter_content li a {
  padding: 1px 36px 1px 4px;
  color: #777;
  display: block;
  font-weight: normal;
  line-height: 21px;
}

.nav_cat_filter_content li.selected a {
  font-weight: bold;
}

.nav_cat_filter_content span {
  position: absolute;
  top: 2px;
  right: 4px;
  text-align: right;
}

.nav_cat_filter_content span[class^=icon-] {
  right: 0;
}

.nav_cat_filter_content ul.parent {
  border-bottom: 1px solid #e6e6e6;
}

.nav_cat_filter_content ul.parent span {
  display: none;
}

.nav_cat_filter_content ul.parent > li > a:before {
  font-size: 11px;
  margin-left: -12px;
  top: 5px;
}

.nav_cat_filter_content li a.icon-arrow-open-left {
  padding-left: 12px !important;
}

.nav_cat_filter_content li a.icon-arrow-open-left:before {
  margin-left: -12px;
  top: 5px !important;
}

.nav_cat_filter_content li.child {
  padding-left: 30px !important;
  font-weight: bold;
}

.nav_cat_filter_content li.child a {
  color: #222;
}

.add_bottom_rule {
  padding-bottom: 2px;
  border-bottom: 1px solid #e6e6e6;
}

.search_nested_content_container .input-group-btn.search-filter,
.nav_core .nav_core_search .input-group-btn.search-filter {
  position: absolute;
  z-index: 4;
  top: 2px;
  left: 3px;
}
.search_nested_content_container .input-group-btn.search-filter span.nugget,
.nav_core .nav_core_search .input-group-btn.search-filter span.nugget {
  background: #f4f4f4;
  margin-top: 2px;
  position: absolute;
}
.search_nested_content_container .input-group-btn.search-filter span.nugget:hover,
.nav_core .nav_core_search .input-group-btn.search-filter span.nugget:hover {
  background: #f4f4f4;
}
.search_nested_content_container .input-group-btn.search-filter span.nugget a,
.nav_core .nav_core_search .input-group-btn.search-filter span.nugget a {
  display: block;
  padding: 2px 25px 2px 5px;
  margin-top: 0;
  font-size: 12px;
}
.search_nested_content_container .input-group-btn.search-filter span.nugget a span.label,
.nav_core .nav_core_search .input-group-btn.search-filter span.nugget a span.label {
  vertical-align: middle;
  color: #777;
}

.search_nested_content_container .input-group-btn.search-filter ~ input#fxsearch,
.nav_core .nav_core_search .input-group-btn.search-filter ~ input#addons_search {
  padding-left: 105px;
}

/* bootstrap overrides */
.nav-pills > li > a {
  border-radius: 0;
  padding-right: 28px;
}

.btn .caret {
  margin-left: 5px;
}

.search_refine .nav_cat_filter_content h5 {
  font-size: 13px;
  font-weight: 600;
  color: #555;
  padding: 5px 0;
}

.nav_filter_content li a:hover,
.nav_filter_content li.selected a:hover {
  background-repeat: no-repeat;
  background-position: 2px 5px;
}

/*---- nav: load more buttons ----*/
a.load-more {
  display: inline-block;
  margin: 18px 0 24px 15px;
}

/*-----------------------------------------------------------
    $MAIN
-------------------------------------------------------------*/
/*---- $GALLERY
-------------------------------------------------------------*/
.section:before, .section:after {
  clear: both;
  content: "";
  display: table;
}

.cards > h2 {
  margin: 0;
  padding-right: 85px;
  margin: 15px 20px 5px 0;
  clear: both;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  white-space: nowrap;
}

.cards > h2 a {
  min-width: 85px;
  margin-top: 3px;
  margin-right: 5px;
  color: #005fce;
  bottom: 2px;
  font-size: 14px;
  text-align: right;
  text-rendering: optimizeLegibility;
  text-transform: lowercase;
  position: absolute;
  right: -5px;
}

.cards > h2 a:hover {
  text-decoration: none;
}

.search__keyword {
  background: #fff;
}

.search__keyword-results {
  padding-left: 15px;
  padding-right: 15px;
  display: grid;
}

.section__filter {
  border-bottom: 1px solid #ddd;
  padding: 5px 15px;
  background: #f4f4f4;
  margin-right: -15px;
  margin-left: -15px;
}

.section__filter form {
  margin-right: 15px;
  margin-top: 10px;
  text-align: right;
}

.section__filter form label {
  font-size: 12px;
  font-weight: normal;
}

.search__keyword-results > div:first-child {
  padding-top: 15px !important;
}

.search_results_hc_links {
  grid-column: 1/-1;
  grid-row: 4;
}

.search_results_answers_links {
  grid-column: 1/-1;
  grid-row: 8;
}

.search_results_cards_hc_links {
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row-start: 4;
  grid-row-end: 4;
}

.search_results_cards_answers_links {
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row-start: 8;
  grid-row-end: 8;
}

/*p*/
.section__btn {
  margin-bottom: 0px;
  display: inline-block;
}

/*-------------------------------------------------------------
    $PACKAGE
-------------------------------------------------------------*/
/*---- Source ----*/
.icon-mathworks b,
.icon_label_hidden b {
  height: 1px;
  width: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  clip: rect(0 0 0 0);
  overflow: hidden;
  position: absolute;
}

/* Source: MW default */
.icon-membrane:before, .explorer_view .icon-mathworks:before {
  content: "\e67f" !important;
}

.rating_container > .icon-mathworks {
  width: 95px;
  height: 19px;
}

.rating_container > .icon-mathworks:before {
  content: url("https://www.mathworks.com/images/responsive/global/pic-header-mathworks-logo.svg");
}

/* Source: MW hardware support (detail) */
.card_actions .attr_source .icon-mathworks {
  width: 20px;
  height: 20px;
  position: relative;
  top: 0.375em;
}

.card_actions .attr_source .icon-mathworks:before {
  content: url("https://www.mathworks.com/images/responsive/global/mathworks_logo.svg");
}

/* Source: MW hardware support (list) */
.rating_container > .icon-mathworks.icon_label_hidden {
  width: 20px;
  font-size: 1em;
  position: relative;
  top: 0.4em;
}

.rating_container > .icon-mathworks.icon_label_hidden:before {
  content: url("https://www.mathworks.com/images/responsive/global/mathworks_logo.svg");
}

/* Source: Community */
.rating_container .icon-community {
  position: relative;
  top: 0.125em;
}

.list_view .attr_source .icon-community {
  position: relative;
  top: 0.25em;
}

.list_view .icon-community,
.detail_view .icon-community {
  color: #777777;
}

/*---- Ribbon ----*/
.card_state {
  padding: 5px 10px;
  margin: 0;
  border-radius: 11px/0 50% 50% 0;
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  line-height: normal;
  position: absolute;
  text-align: center;
  top: 0.8333333333em;
}

/* Ribbon: background colors */
.state_primary {
  background: #20ac3c;
}

.state_secondary {
  background: #ef8322;
}

.package__moreinfo {
  top: 12px;
  right: 0px;
  position: absolute;
  font-weight: bold;
  padding: 10px 0px 0px 0px;
}

/*---- Search: */
.search-result {
  padding-right: 10px;
}

.search-result--nested {
  line-height: 1.75;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-result--nested a {
  padding-left: 2.25em;
  display: inline-block;
}
.search-result--nested a:before {
  opacity: 1;
}
.search-result--nested em {
  color: #000;
  font-style: normal;
  font-weight: bold;
}

/* Search: list view and typeahead icons */
/* Site6 CSS has icon-examples; requested to add icon-example. Temporarily added here */
.icon-example:before {
  content: "\e62e" !important;
}

.search-result--nested .icon-app:before {
  color: #777777;
  font-size: 14px;
  top: 3px;
}

.search-result--nested .icon-block:before {
  color: #555555;
  font-size: 16px;
  top: 3px;
}

.search-result--nested .icon-example:before {
  color: #777777;
  font-size: 14px;
  top: 2px;
}

.search-result--nested .icon-function:before {
  color: #555555;
  font-size: 15px;
  top: 3px;
}

.search-result--nested .icon-model:before {
  color: #555555;
  font-size: 14px;
  top: 2px;
}

/* Search: hide surplus results */
.search-results.collapsed .search-result--nested:nth-child(n+6) {
  height: 0;
  visibility: hidden;
}

.search-results .search-result--nested:nth-child(n+5) {
  height: auto;
  visibility: visible;
}

.search-results.collapsed button {
  display: block;
}

.search-results button {
  display: none;
  border: 0;
  padding: 0;
  background: transparent;
  line-height: 1.75;
  color: #085695;
}

.search-results button:after {
  content: "≫";
  font-size: 16px;
  padding-left: 3px;
}

.search_refine_v3 .search_refine h3 {
  font: bold 15px/1 "Roboto", sans-serif;
}

.search_refine_v3 .search_refine h5 {
  font: normal 500 14px/1.19 "Roboto", sans-serif;
}

.search_refine_v3 li.unrefinable a > span,
.search_refine_v3 li.refinable a > span,
.search_refine_v3 li.refined a > span {
  position: absolute;
  top: 5px;
  right: 4px;
  text-align: right;
}

.search_refine_v3 .search_refine li > h5 {
  margin: 5px 0 0;
}

.search_refine_v3 .search_refine ul > li > a {
  padding: 4px 40px 4px 23px !important;
}

/*---- install/action state
-------------------------------------------------------------*/
/*
  Toggle the add/adding/added buttons and installed/trialing/not-installed labels by setting
  the data-action-state and data-install-state attribute on their common parent. This
  attribute will be manipulated by JavaScript.

  Targets the immediate children of an element with data-view="actions" and data-view="ribbons"
*/
[data-install-state=not-installed][data-license-state=not-licensed] [data-view=ribbons] [data-visible-when] {
  display: none;
}

[data-install-state=not-installed][data-license-state=licensed] [data-view=ribbons] :not([data-visible-when=included_in_license]) {
  display: none;
}

[data-install-state=not-installed][data-license-state=licensed] [data-view=ribbons] [data-visible-when=included_in_license] {
  display: block;
}

[data-install-state=installed] [data-view=ribbons] :not([data-visible-when=installed]) {
  display: none;
}

[data-install-state=installed] [data-view=ribbons] [data-visible-when=installed] {
  display: block;
}

[data-install-state=trialing] [data-view=ribbons] :not([data-visible-when=trialing]) {
  display: none;
}

[data-install-state=trialing] [data-view=ribbons] [data-visible-when=trialing] {
  display: block;
}

[data-install-state=trialing] [data-view=ribbons] [data-visible-when=trialing] > span {
  display: inline;
}

[data-install-state=licensed] [data-view=ribbons] :not([data-visible-when=licensed]) {
  display: none;
}

[data-install-state=licensed] [data-view=ribbons] [data-visible-when=licensed] {
  display: block;
}

[data-action-state=added] [data-view=actions] > :not([data-visible-on=added]) {
  display: none;
}

[data-action-state=added] [data-view=actions] > [data-visible-on=added] {
  display: inherit;
}

[data-action-state=added] [data-view=actions] > [data-visible-on=all] {
  display: inherit;
}

[data-action-state=adding] [data-view=actions] > :not([data-visible-on=adding]) {
  display: none;
}

[data-action-state=adding] [data-view=actions] > [data-visible-on=adding] {
  display: inherit;
}

[data-action-state=adding] [data-view=actions] > [data-visible-on=all] {
  display: inherit;
}

[data-action-state=add] [data-view=actions] > :not([data-visible-on=add]) {
  display: none;
}

[data-action-state=add] [data-view=actions] > [data-visible-on=add] {
  display: inherit;
}

[data-action-state=add] [data-view=actions] > [data-visible-on=all] {
  display: inherit;
}

/*---- Version History Table
-------------------------------------------------------------*/
[data-version-history-table-state=added] [data-view=versions] > :not([data-visible-on=added]) {
  display: none;
}

[data-version-history-table-state=added] [data-view=versions] > [data-visible-on=added] {
  display: inherit;
}

[data-version-history-table-state=added] [data-view=versions] > [data-visible-on=all] {
  display: inherit;
}

[data-version-history-table-state=adding] [data-view=versions] > :not([data-visible-on=adding]) {
  display: none;
}

[data-version-history-table-state=adding] [data-view=versions] > [data-visible-on=adding] {
  display: inherit;
}

[data-version-history-table-state=adding] [data-view=versions] > [data-visible-on=all] {
  display: inherit;
}

[data-version-history-table-state=add] [data-view=versions] > :not([data-visible-on=add]) {
  display: none;
}

[data-version-history-table-state=add] [data-view=versions] > [data-visible-on=add] {
  display: inherit;
}

[data-version-history-table-state=add] [data-view=versions] > [data-visible-on=all] {
  display: inherit;
}

/*---- $SPINNER
-------------------------------------------------------------*/
.loading_page,
.loading_search_results {
  background: rgba(255, 255, 255, 0.5);
  bottom: 0;
  content: "";
  display: none;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 5555;
}

.loading_search_results .message {
  padding: 15px;
  margin-left: 25%;
  margin-top: 55px;
  color: #000;
}

.loading_search_results .message mw-progress-indicator,
.loading_page .message mw-progress-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
}

.show_progress_indicator {
  display: block;
}

span[class^=progress-indicator] mw-progress-indicator {
  left: -15px;
}

button:disabled span[class^=progress-indicator] {
  pointer-events: none;
}

/*---- $TAGS
-------------------------------------------------------------*/
.metadata_actions .btn_general, .metadata_actions .btn_general:hover {
  border-width: 0;
}

.tag--action__installed,
.metadata_action > a {
  padding: 2px 5px;
  font-size: 18px;
  font-weight: 400;
  line-height: 21px;
  -webkit-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern";
  -ms-font-feature-settings: "kern";
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  vertical-align: bottom;
}

.metadata_action > button {
  margin-left: 10px;
  float: left;
}

.metadata_action > div {
  float: left;
  margin-left: 10px;
}

/* override and/or remove default Bootstrap styles */
.metadata_container .dropdown-menu {
  min-width: 185px;
  padding: 0;
  top: 27px;
}

.metadata_container .dropdown-menu > li {
  margin: 0;
  padding: 0;
}

.metadata_container .dropdown-menu > li > button {
  width: 100%;
  text-align: center;
}

.metadata_container p.card_category_anchor {
  margin-top: -60px;
}

.dropdown-menu button p {
  display: block;
  color: #808080;
  font-size: 12px;
  line-height: 16px;
  -webkit-font-smoothing: antialiased;
}

.metadata_container .metadata_action button.dropdown-toggle {
  text-align: center;
}

.tag--action__installing span {
  position: relative;
}

.tag--action__installing button {
  padding-left: 30px;
}

.tag--action__logging-in span {
  position: relative;
}

.tag--action__logging-in button {
  padding-left: 30px;
}

.multicomplete {
  cursor: text;
  overflow: hidden;
  zoom: 1;
  margin: 0 0.5em 0.5em 0;
  border: 1px solid #bbbbbb;
  padding: 0 5px;
  background-color: #ffffff;
  font-size: 12px;
}

.multicomplete-input {
  width: 100% !important;
  display: block;
  float: left;
  margin: 0 !important;
  border: 0 !important;
  padding: 3px 0 !important;
  outline: none !important;
  background-color: #ffffff;
}

.multicomplete-selected-item {
  float: left;
  margin: 0 5px 0 0;
  padding: 2px 0;
  font-weight: bold;
  color: #4d4d4d;
  white-space: nowrap;
}

.multicomplete-selected-item span {
  float: left;
  padding: 0 1px 0 0;
  white-space: nowrap;
}

.multicomplete-selected-item a {
  display: block;
  width: 10px;
  float: left;
  overflow: hidden;
  background: transparent url("https://www.mathworks.com/matlabcentral/images/icon-remove.png") no-repeat -1px 1px;
  background-size: 14px;
  text-indent: -5000px;
  white-space: nowrap;
}

.multicomplete .form-control:focus {
  border-color: transparent;
  box-shadow: 0 0 0 transparent;
}

/* tool type: truncates long titles */
/* modal design adjustments */
/* Bootstrap over-ride: restablishes modal width */
/* .modal-backdrop.in */
.metadata_container .modal-header {
  padding: 8px 20px;
}
.metadata_container .modal-header h3 {
  font-size: 13px;
}

.metadata_container .modal-body {
  min-height: 120px;
}

.metadata_container .modal-footer {
  border-width: 0;
  margin-top: 0;
}

.metadata_container .modal-footer.text-center {
  text-align: center;
}

#login_framework_modal .modal-header {
  border-bottom: none;
}

#license_agreement_modal iframe {
  width: 100%;
  height: 465px;
}

#license_agreement_modal .modal-content {
  width: 690px;
}

#license_modal .modal-content {
  width: 690px;
}

#license_modal iframe {
  width: 100%;
  height: 500px;
}

#install_failed_modal .modal-footer {
  border: none;
}

/* Modal: sizing */
.modal_dialog_sm {
  width: 440px;
}

.modal_dialog_sm .modal-body, .modal_dialog_custom .modal-body {
  font-size: 15px;
}
.modal_dialog_sm .modal-body p, .modal_dialog_custom .modal-body p {
  margin-bottom: 21px;
}
.modal_dialog_sm .modal-body ul, .modal_dialog_custom .modal-body ul {
  margin-bottom: 0;
  margin-left: 0;
}
.modal_dialog_sm .modal-body li, .modal_dialog_custom .modal-body li {
  padding-left: 0;
}

/* Modal: icon setting */
.modal-body .icon-alert-error:before {
  color: #cc3729 !important;
}

/* Modal: Prevent Bootstrap from adjusting Body Padding when launching modal */
body#addon_details {
  padding-right: 0 !important;
}

/* List View: Title setup */
.list_view h2,
.list_view h3,
.addon_author,
.addon_version_number,
.addon_file_size {
  display: inline;
}

.addon_author,
.addon_version_number,
.addon_file_size {
  color: gray;
}

/* override Bootstrap's default left/right padding for marked search terms */
mark {
  padding: 0.2em 0;
}

/*---- sidebar: detail page for add-ons dependencies
-------------------------------------------------------------*/
.sidebar-dependency .icon-alert-success:before {
  color: #009915 !important;
}

.sidebar-dependency .icon-alert-warning:before {
  color: #eea600 !important;
}

/*---- trial confirmation dialog product list
-------------------------------------------------------------*/
.trial--product li:before {
  content: "-";
  padding-right: 20px;
}

.trial--product li {
  margin-left: 20px;
  margin-bottom: 0px;
}

.trial--product li:last-child {
  margin-bottom: 20px;
}

/*---- $Buttons ----*/
.btn-group.open .dropdown-toggle {
  box-shadow: none;
}

/* log in/out */
.btn-dropdown {
  color: rgba(255, 255, 255, 0.9);
  float: right;
  font-weight: normal;
}

.btn-dropdown:hover, .btn-dropdown:focus {
  background: transparent;
  color: rgb(255, 255, 255);
  box-shadow: unset;
}

.btn-dropdown ~ .dropdown-menu {
  min-width: 50px;
  padding: 0;
  margin: 0;
  border-radius: 0;
  left: auto;
}

.btn-dropdown ~ .dropdown-menu li {
  margin-bottom: 0;
  padding-left: 0;
}

.btn-dropdown ~ .dropdown-menu li a {
  padding: 5px 10px;
  text-align: center;
}

button.dropdown-toggle.btn-block {
  text-align: center;
}

/* Prerelease page formatting */
.container--message .mw_logo {
  width: 173px;
  height: 75px;
}

.prerelease--container {
  background-color: #f5f5f5;
}

.prerelease--container h3 {
  margin-bottom: 20px;
}

/* release not supported formatting */
.not_supported_font_size {
  font-size: 15px;
  font-weight: bold;
}

/* ---- Detail overlay
-------------------------------------------- */
#add_on_detail {
  width: 100%;
  height: 100%;
  background-color: #fff;
  left: 0;
  overflow: auto;
  position: fixed;
  top: 0;
  z-index: 1000;
}

#overview_tab h1,
#overview_tab h2,
#overview_tab h3,
#overview_tab h4,
#overview_tab h5 {
  padding: 0;
  color: #333;
  font-feature-settings: "kern";
}

#overview_tab h1 {
  margin: 0 0 35px;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.19;
}

#overview_tab h2 {
  margin: 0 0 15px;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.21;
}

#overview_tab h3 {
  margin: 0 0 13px;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.18;
}

#overview_tab h4 {
  margin: 0 0 18px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.22;
}

#overview_tab h5 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.19;
}

#overview_tab h6 {
  padding: 0;
  color: #333;
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.4;
}

[class*=companion_btn].btn-sm {
  padding: 4px 18px;
}

[class*=companion_btn].btn-xs, button[class*=companion_btn].btn-xs   {
  padding: 0 13px;
}

input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: searchfield-cancel-button;
}

/* Styles to make README files appear correctly (overwriting site7.css styling) */
.readme_h1 {
  margin-bottom: 16px !important;
}

.readme_table {
  margin-top: 0px;
  margin-bottom: 16px !important;
}

.readme_td, .readme_th {
  border: 1px solid lightgrey;
  padding: 6px 13px;
}

.readme_th[align=left] {
  text-align: left;
  vertical-align: middle;
}

.readme_th[align=right] {
  text-align: right;
  vertical-align: middle;
}

.readme_th[align=center] {
  text-align: center;
  vertical-align: middle;
}

.readme_td[align=left] {
  text-align: left;
  vertical-align: middle;
}

.readme_td[align=right] {
  text-align: right;
  vertical-align: middle;
}

.readme_td[align=center] {
  text-align: center;
  vertical-align: middle;
}

/* Styles for the Horizontal Cards, Personalization View */
.cards.horizontal_cards {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto 0;
  grid-auto-rows: 1fr;
  grid-row-gap: 20px;
}

.cards.card_rows_1 {
  grid-template-rows: auto 0;
}

.cards.card_rows_2 {
  grid-template-rows: auto auto 0;
}

.cards.card_rows_3 {
  grid-template-rows: auto auto auto 0 !important;
}

.cards.card_rows_4 {
  grid-template-rows: auto auto auto auto 0 !important;
}

.cards.card_rows_5 {
  grid-template-rows: auto auto auto auto auto 0 !important;
}

.cards.card_rows_6 {
  grid-template-rows: auto auto auto auto auto auto 0 !important;
}

.cards.card_rows_7 {
  grid-template-rows: auto auto auto auto auto auto auto 0 !important;
}

.cards.card_rows_8 {
  grid-template-rows: auto auto auto auto auto auto auto auto 0 !important;
}

.cards.card_rows_9 {
  grid-template-rows: auto auto auto auto auto auto auto auto auto 0 !important;
}

/* Responsive Breakpoints for Horizontal Cards */
@media screen and (min-width: 1672px) {
  .cards.horizontal_cards {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
@media screen and (min-width: 978px) and (max-width: 1023px) {
  .cards.horizontal_cards {
    grid-template-columns: 1fr 1fr;
  }
}
/*
  Begin card component styling for MyProducts
*/
/* Set a minimum height on each card, overriding the default vertical card style */
.cards.horizontal_cards .card_container.explorer_view {
  height: 100% !important;
  min-height: 115px !important;
}

/* Make the card anchor into a grid, displaying two columns */
.cards.horizontal_cards .card_container a {
  display: grid !important;
  grid-template-columns: 40% 1fr !important;
}

/* Set the card_media as flex to assist with ribbon placement, modify the media image appearance to scale better  */
/* Width and height modified */
.cards.horizontal_cards .card_container a .card_media {
  display: flex !important;
  background-size: cover !important;
  background-position: center center !important;
  width: 100%;
  height: auto;
}

/* attr_container might not be used in the My Products card view, but leaving it incase there is an edge case and we need to use it */
.cards.horizontal_cards .card_container a .card_media .attr_container {
  align-self: flex-end !important;
  position: unset !important;
  top: unset !important;
  left: unset !important;
  padding: 2px 5px !important;
}

/* When on recommendations view, do not show blue background on attr container */
.cards.horizontal_cards.recommendations .card_container a .card_media .attr_container {
  background: none;
}

/* When on recommendations view, set max height to hide any grid-auto-rows */
.cards.horizontal_cards.recommendations {
  align-content: flex-start;
  max-height: 270px;
  overflow-y: hidden;
}

/* Styling for source icon on horizontal cards */
.cards.horizontal_cards .card_media .attr_container .attr_source > span {
  border: 0.08333333em solid #b9b9b9;
  border-radius: 50%;
  background: #fff;
  color: #777;
  padding: 0.25em;
}

/* Ribbon appearance in the card_media */
.cards.horizontal_cards .card_media .ribbon {
  align-self: flex-end !important;
  margin-bottom: 10px !important;
}

/* Ribbon styling when used in card_media or card_body */
.cards.horizontal_cards .card_body .ribbon .ribbon_text,
.cards.horizontal_cards .card_media .ribbon .ribbon_text {
  border-radius: 0 10px 10px 0 !important;
  color: #fff !important;
  padding: 5px 10px 5px 10px !important;
}

/* When ribbon is used in card_media use green bg for installed and orange bg for trialing */
.cards .card_media .ribbon .ribbon_text_installed {
  background: #008013 !important;
}

.cards.horizontal_cards .card_media .ribbon .ribbon_text_included_in_license {
  background: #004b87 !important;
}

.cards.horizontal_cards .card_media .ribbon .ribbon_text_trialing {
  background: #EF8322 !important;
}

/* When ribbon is present, 0 margin top on the heading, might not be used on My Products, but preserving it for edge cases */
.cards.horizontal_cards .card_body .panel-heading h3 {
  margin-top: 10px !important;
}

.cards.horizontal_cards .card_body .ribbon + .panel .panel-heading h3 {
  margin-top: 0 !important;
}

/* Modify show_more_mask, overriding MW global styles */
.show_more_toggle_mask {
  -webkit-mask-image: linear-gradient(to bottom, black 100%, rgba(0, 0, 0, 0) 100%) !important;
  mask-image: linear-gradient(to bottom, black 100%, rgba(0, 0, 0, 0) 100%) !important;
}

/* Not from original styling: */
.cards.horizontal_cards .card_container.add_fixed_width {
  width: 100%;
  margin: auto;
  display: block;
}

.cards.horizontal_cards .explorer_view .card_media + .card_body {
  border-top: 0;
}

.cards.horizontal_cards .explorer_view .card_body {
  min-height: auto;
  max-height: 120px;
  height: auto;
  overflow-y: hidden;
}

.explorer_view .card_media {
  width: 100%;
  height: 165px;
  overflow: hidden;
}

.cards.horizontal_cards .add_long_title .panel-heading {
  height: auto;
  margin-bottom: 0;
}

.cards.horizontal_cards .explorer_view > a:only-child .panel-body {
  height: auto;
}

.card_body_line_clamp_1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card_body_line_clamp_2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card_body_line_clamp_3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card_body_line_clamp_4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.show_more_toggle_element {
  padding-bottom: 40px;
}

.show_more_toggle_element .read_more_actuator {
  bottom: 15px;
}

.cards.horizontal_cards .card_container.add_card_cta h3 {
  margin: 0;
  text-align: center;
  color: #0076a8;
}

.cards.horizontal_cards .card_container.add_card_cta a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}

.cards.horizontal_cards .card_container.add_card_cta {
  border: 1px solid #0076a8;
}

.personalization_title_row {
  margin-top: 20px;
}

/* Banner Styling */
.fx_banner_panel {
  margin: 0px 0px 20px 0px;
}

.fx_banner_panel_body {
  border: 1px solid #0076a8;
  background: #e2f0ff;
}

.aoe_banner_panel {
  margin: 20px 0px 10px 0px;
}

.aoe_banner_panel_body {
  border: 1px solid #e6e6e6;
  background: #f5f5f5;
}

/* Sticky Container CSS */
body {
  position: relative;
}

.sticky_anchornav_container {
  display: flex;
  flex-direction: row;
  position: relative;
}

.sticky_anchornav_sidebar {
  width: 25%;
  padding: 15px 0px 0px 15px;
}

.sticky_anchornav_body {
  width: 75%;
  padding: 0px 15px 0px 15px;
}

/* Right Alignment */
.sticky_anchornav_container.sticky_anchornav_right {
  flex-direction: row-reverse;
}

.sticky_anchornav_container.sticky_anchornav_right .sticky_anchornav_sidebar {
  padding-right: 0;
  padding-left: 15px;
}

.sticky_anchornav_container.sticky_anchornav_right .sticky_anchornav_body {
  padding-right: 15px;
  padding-left: 0;
}

#sticky_anchornav {
  position: sticky;
  top: 15px;
  height: calc(100vh - 30px);
  overflow-y: auto;
}

.sticky_header_container.includes_subnav ~ .content_container #sticky_anchornav {
  top: 106px;
}

#sticky_anchornav .nav {
  margin: 0 0 0px -15px;
}

#sticky_anchornav .nav > li {
  padding: 0;
  margin: 0;
  border-left: 6px solid transparent;
  border-bottom: none;
  font-size: 14px;
  transition: border-left-color 0.3s ease;
}

#sticky_anchornav .nav > li > a {
  color: #0076a8;
  padding: 7px 0 5px 10px;
  border-bottom: 1px dotted #e6e6e6;
  background: none transparent !important;
}

#sticky_anchornav .nav > li.active {
  border-left-color: #0076a8;
}

#sticky_anchornav .nav > li.active > a {
  color: #004b87;
  font-weight: bold;
}

.recommended_products_body {
  margin: 0px 5% 15px 5%;
}

.recommended_warning {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Tablet (sm) ---- */
@media (min-width: 768px) and (max-width: 991px) {
  .sticky_anchornav_sidebar {
    width: 33%;
  }
  .sticky_anchornav_body {
    width: 67%;
  }
}
/* ---- Mobile (xs) ---- */
@media (max-width: 767px) {
  .sticky_anchornav_sidebar {
    display: none;
  }
  .sticky_anchornav_body {
    width: 100%;
    padding: 0px 15px;
  }
}
/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Anchors with padding */
.my_products_anchor:before {
  margin-top: -15px;
  height: 15px;
  content: "";
  display: block;
}

.cards .card_container.add_card_skeleton {
  opacity: 0.8;
}

.cards .card_container.add_card_skeleton .attr_container {
  display: none;
}

.cards .card_container.add_card_skeleton .card_media {
  background-image: none !important;
}

.cards .card_container.add_card_skeleton .card_body h3.skeleton_copy {
  color: transparent;
  background: #f6f6f6;
  display: block;
  width: 100%;
  padding: 3px 5px;
  animation: pulse 2s infinite;
}

.cards .card_container.add_card_skeleton .card_body p.skeleton_copy {
  color: transparent;
  background: #f6f6f6;
  display: block;
  width: 100%;
  padding: 3px 5px;
  margin: 10px 0 5px;
  animation: pulse 2s infinite;
}

.cards .card_container.add_card_skeleton .card_body p.skeleton_copy + p.skeleton_copy {
  width: 50%;
  margin: 0;
}

.card_container .wrap_action_zone_text {
  max-width: 200px;
  margin: 0 15px 0 0;
}

@keyframes pulse {
  0% {
    background-color: #f6f6f6;
  }
  50% {
    background-color: #eeeeee;
  }
  100% {
    background-color: #f6f6f6;
  }
}