style {
  /* Novas cores do design system 
    https://zeroheight.com/96edf2f0a/v/latest/p/45c2d7-cores
    */

  /* Cores primárias */
  --bv-color-primary-blue-darker: #223ad2;
  --bv-color-primary-blue-lighter: #31c7ed;
  --bv-color-primary-black: #161616;
  --bv-color-primary-white: #ffffff;

  /* Cores secundárias */
  --bv-color-secondary-green: #18cf80;
  --bv-color-secondary-yellow: #faca06;
  --bv-color-secondary-coral: #ff99a4;
  --bv-color-secondary-magenta: #bc1e57;
  --bv-color-secondary-grey: #4f4f4f;
}

.portal input,
.portal input.input-block,
.portal form .btn {
  height: 40px;
  padding-top: 0px;
  padding-bottom: 0px;
}

/* fix loading overlay */
.portal .portal-loading-background {
  background: rgba(0, 0, 0, 0.6);
}

/*fix slider on sign-up */
.portal .slide-text {
  padding-top: 13px;
}

.portal .dragdealer {
  height: 42px;
}

/* fix saml callback url on authentication */
.portal #callbackContext,
.portal #saml-protocol {
  height: 25px;
  padding-top: 11px;
}

/* fix table pagination controls */
.portal .pagination ul > li > a {
  color: var(--bv-color-primary-blue-darker);
}

.portal .pagination ul > .active > a {
  color: var(--bv-color-primary-black);
}

.portal .pagination ul > li > a:hover {
  color: var(--bv-color-primary-blue-darker);
}

/* fix sizing of anchor tags styled as buttons */
.portal a.btn,
/* specific fix for role selector on users */
.portal #users-component #users-developer-select-org .org-card-wrapper .org-role-section .dev-role-menu .dev-role-menu-anchor {
  height: 26px;
  padding-top: 14px;
}

.portal .btn-group > .btn,
.portal .btn-group > .btn:first-child {
  border: 1px solid var(--bv-color-primary-blue-darker);
  height: 40px;
  color: var(--bv-color-primary-blue-darker);
}

/* fix alert styling */
.portal .alert-warning {
  background-color: #ffab40;
}

.portal .alert {
  color: var(--bv-color-primary-black);
  font-size: 14px;
  font-family: open-sans-regular;
}

/* fix modal styling */
.modal-footer,
.modal-body,
.modal-header {
  background: var(--bv-color-primary-white);
}

/* fix login form styling */
.portal .row-fluid > .login-form-container {
  background: #FFF;
  border: 1px solid #d9d9d9;
  border-radius: 15px;
  margin-top: 50px;
  margin-bottom: 50px;
}

.authscheme .authscheme-info,
.portal .authscheme .logo-section {
  height: unset;
}

.auth-options {
  margin: 30px 0px 30px 0px !important;
}

.row-fluid > .login-form-container > #auth-schemes > .authscheme {
  height: 40px;
}

.portal .row-fluid > .login-form-container > #auth-schemes {
  font-family: open-sans-regular;
}

/* apply secondary button styling to idp auth configs */
.row-fluid > .login-form-container > #auth-schemes > .authscheme {
  border: 1px solid var(--bv-color-primary-blue-darker);
  background: var(--bv-color-primary-white);
  color: var(--bv-color-primary-blue-darker);
}

/* apply secondary button styling to idp auth configs */
.row-fluid > .login-form-container > #auth-schemes > .authscheme:hover {
  border-color: var(--bv-color-primary-blue-darker);
  background: rgba(29, 91, 191, 0.08);
}

/* fix idp auth config width to prevent overflow */
.authscheme .authscheme-info {
  width: 386px;
}

/* fix login form button text styling */
.authscheme .authscheme-info .title-info,
.authscheme .authscheme-info .desc-info {
  body: var(--bv-color-primary-blue-darker);
  font-size: 14px;
  font-family: open-sans-regular;
}

/* fix account-setup, registration and reset password styling */
.portal #registration-component div.span4,
.portal #accountsetup-component div.span4,
.portal #resetpassword-component div.span4 {
  background: var(--bv-color-primary-white);
  padding: 36px;
}

.portal .leading {
  margin-bottom: 0;
}

/*  fix public landing page styling */

.portal .dashboard-banner h1 {
  border-bottom: 2px solid var(--bv-color-primary-blue-darker);
}

.portal .dashboard-banner {
  padding-bottom: 0;
}

.portal div.dashboard-sections-inner {
  max-width: 1040px;
}

.portal div.dashboard-section {
  padding-left: 36px;
  padding-right: 36px;
  border-top: 1px solid #d9d9d9;
}

.portal a.dashboard-section-video-inner {
  border-bottom: 5px var(--bv-color-primary-blue-darker) solid;
}

.portal .dashboard-section-video-link,
.portal .dashboard-section-video a {
  color: var(--bv-color-primary-blue-darker);
}

.dashboard-sections-inner .dashboard-section {
  background: var(--bv-color-primary-white);
}

/* COLORS */

/* site title */
.portal .header-nav-brand a,
.portal .header-nav-brand a:link,
.portal .header-nav-brand a:visited,
.portal .header-nav-brand a:hover,
.portal .header-nav-brand a:focus,
.portal .header-nav-brand a:active {
  color: var(--bv-color-primary-black);
}

/* page title */
.portal h1,
.portal h2,
.portal h3,
.portal h4 {
  color: var(--bv-color-primary-blue-darker) !important;
}

/* background */
body {
  background: #f6f6f6;
}

/* ui background */
.portal .portal-form-body,
.portal .datagrid-controls-header,
.portal .table,
.portal .datagrid-controls-footer,
.portal form .datagrid-controls-footer,
.portal .datagrid-header th,
.portal .well,
.portal .wizard-panels,
/* fix accordion on user page */
.portal .accordion.alternate div.accordion-group {
  background: var(--bv-color-primary-white);
}

/* fix accordion border on user page */
.portal .accordion-group {
  border: 1px solid;
}

/* body text */
.portal ::placeholder,
.portal input ::placeholder,
.portal textarea ::placeholder {
  color: var(--bv-color-primary-black);
  opacity: 0.8;
}

/* body text */
.portal select,
.portal input[type="text"],
.portal textarea,
.portal .control-group.success select,
.portal .control-group.success label,
.portal .control-group.success input,
.portal .control-group.success input.parsley-validated {
  color: var(--bv-color-primary-black);
}

/* remove table header shadow */
.portal .table,
.portal .datagrid .datagrid-table,
/* fix accordion on user page */
.portal .accordion.alternate div.accordion-group {
  box-shadow: unset;
  -webkit-box-shadow: unset;
}

/* fix table row hover style */
.portal .table-hover tbody tr:hover > td {
  background: rgba(29, 91, 191, 0.08);
}

/* disabled button styling */
.portal .btn.disabled,
.portal .btn.disabled:hover {
  color: rgba(0, 0, 0, 0.7);
  background-color: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
}

/* fix margins and alignment */
@media screen and (max-width: 1024px) {
  .portal .accordion button {
    margin-top: unset;
    float: unset;
  }
}

.portal .table td span.valign-sub {
  vertical-align: sub;
}

/* body text */
.portal .datagrid-header th {
  color: var(--bv-color-primary-black);
  font-weight: bold;
}

/* body text */
body {
  color: var(--bv-color-primary-black);
}

/* link */
.portal a,
.portal a:link,
.portal a:visited,
.portal .help-list-title,
.portal .wizard-controls .nav-pills > li.active > a,
.portal .wizard-controls .nav-pills > li.active > a:hover,
.pottal .wizard-controls .nav-pills > li > a:hover {
  color: var(--bv-color-primary-blue-darker);
}

/* link hover */
.portal a:hover,
.portal a:focus,
.portal a:active {
  color: var(--bv-color-primary-blue-darker);
}

/* small text */
.portal small,
.portal .small {
  color: var(--bv-color-primary-black);
}

/* ui background */
.portal .datagrid-controls-header,
.portal .datagrid-controls-footer {
  background: var(--bv-color-primary-white);
}

.portal .wysihtml5-toolbar li a.btn,
.portal .wysihtml5-toolbar li a.btn:first-child,
.portal .wysihtml5-toolbar li.dropdown a.btn.dropdown-toggle {
  height: 20px;
  padding-top: 11px;
  border: 1px solid var(--bv-color-primary-blue-darker);
  color: var(--bv-color-primary-blue-darker);
}

.portal .wysihtml5-toolbar li.dropdown a.btn.dropdown-toggle:hover {
  color: var(--bv-color-primary-white);
}

/* primary button background, primary button text */
.portal .dropdown-toggle,
.portal .dropdown-menu,
.portal .dropdown-menu a,
.portal .dev-role-menu,
.portal .dev-role-menu a,
/* fix ddl menu on user page */
.portal #users-component #users-developer-select-org .org-card-wrapper .org-role-section .dev-role-menu .dev-role-menu-anchor {
  color: var(--bv-color-primary-blue-darker);
  background: var(--bv-color-primary-white);
}

/* primary button hover */
.portal .dropdown-toggle:hover,
.portal .dropdown-menu li > a:hover {
  color: unset;
  background: var(--bv-color-primary-blue-darker);
}

/* primary button hover */
.portal .dropdown .dropdown-toggle:hover {
  color: unset;
  background: var(--bv-color-primary-blue-darker);
}

/* primary button hover */
.portal .bootstrap-select .btn:hover {
  background: var(--bv-color-primary-blue-darker);
}

/* primary button background */
.portal .caret {
  border-top-color: var(--bv-color-primary-blue-darker);
  border-bottom-color: var(--bv-color-primary-blue-darker);
}

/* primary button text */
.portal .page-size-opt {
  color: var(--bv-color-primary-white);
}

/* border color */
.portal input,
.portal select,
.portal textarea,
.portal input[type="text"],
.portal input[type="password"],
.portal input[type="datetime"],
.portal input[type="datetime-local"],
.portal input[type="date"],
.portal input[type="month"],
.portal input[type="time"],
.portal input[type="week"],
.portal input[type="number"],
.portal input[type="email"],
.portal input[type="url"],
.portal input[type="search"],
.portal input[type="tel"],
.portal input[type="color"],
.portal .uneditable-input,
.portal input[data-type="login"],
.portal .datagrid-header,
.portal .datagrid-header th,
.portal td,
.portal .table td,
.table td,
.portal .wizard-controls .nav-pills > li > a,
.portal legend,
.portal .help-list-title,
.portal hr,
.swagger-section .swagger-ui-wrap ul#resources li.resource,
.swagger-section .swagger-ui-wrap input.parameter,
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.portal .btn-info,
.portal a.btn-info,
.modal-header,
.modal-footer,
.portal .form-actions,
.portal .accordion.alternate div.accordion-group {
  border-color: #d9d9d9;
}

/* primary button background */
/* background and border color should be same color value */
/* adding button-primary for okta widget button.*/
.portal .btn-primary,
.portal .button-primary,
.portal a.btn-primary {
  border-color: var(--bv-color-primary-blue-darker);
  background: var(--bv-color-primary-blue-darker);
}

/* the background color is a derivative of the base color */
.portal .btn-primary:hover,
.portal a.btn-primary:hover {
  background: var(--bv-color-primary-blue-darker);
  border-color: var(--bv-color-primary-blue-darker);
  scale: 1.05;
}

/* button margin fix */
.portal .btn {
  min-width: unset;
}

/* primary button text */
.portal .btn-primary,
.portal .button-primary,
.portal a.btn-primary {
  color: var(--bv-color-primary-white);
}

/* primary (active) button background */
.portal .btn-group .btn.active {
  border-color: var(--bv-color-primary-blue-darker);
  background: var(--bv-color-primary-blue-darker);
}

/* primary (active) button background color is a derivative of the base color */
.portal .btn-group .btn.active:hover {
  background: var(--bv-color-primary-blue-darker);
}

/* primary (active) button text */
.portal .btn-group .btn.active {
  color: var(--bv-color-primary-white);
}

/* secondary button styling is inverted off primary */
/* primary button background, primary button text */
.portal .btn-secondary,
.portal a.btn-secondary,
.portal .btn-info,
.portal a.btn-info,
.portal .layer7-dragndrop-panel button.remove-option {
  border-color: var(--bv-color-primary-blue-darker);
  color: var(--bv-color-primary-blue-darker);
  background: var(--bv-color-primary-white);
}

/* primary button hover */
.portal .btn-secondary:hover,
.portal a.btn-secondary:hover,
.portal .btn-info:hover,
.portal a.btn-info:hover,
.portal .layer7-dragndrop-panel button.remove-option:hover {
  border-color: var(--bv-color-primary-blue-darker);
  color: var(--bv-color-primary-blue-darker);
  background: rgba(29, 91, 191, 0.08);
  scale: 1.05;
}

/* header background */
.portal .header-nav {
  background: var(--bv-color-primary-white);
  boxshadow: 0px 2px 3px rgba(0, 0, 0, 0.12);
}

/* header link */
.portal .header-nav-links li > a,
.portal .header-nav-links li > a:link,
.portal .header-nav-links li > a:visited,
.portal .header-nav-links li > a:hover,
.portal .header-nav-links li > a:focus,
.portal .header-nav-links li > a:active {
  color: var(--bv-color-primary-blue-darker);
}

/* footer background */
/* this only applies to Dev Console footer that has a background
We need to figure out how to handle this as we don't have a
consistent footer. */

/* footer text */
.portal .portal-footer small,
.portal .portal-footer .small {
  color: var(--bv-color-primary-black);
}

/* footer link */
.portal .portal-footer a,
.portal .portal-footer a:link,
.portal .portal-footer a:visited,
.portal .portal-footer a:hover,
.portal .portal-footer a:active,
.portal .portal-footer a:focus {
  color: var(--bv-color-primary-blue-darker);
}

/* TYPOGRAPHY */

/* site title */
.portal .header-nav-brand a,
.portal .header-nav-brand a:link,
.portal .header-nav-brand a:visited,
.portal .header-nav-brand a:hover,
.portal .header-nav-brand a:focus,
.portal .header-nav-brand a:active {
  font-family: open-sans-semi-bold;
}

/* body text */
body {
  font-family: open-sans-regular;
}

/* body text */
.portal .table th,
.portal th,
.table th {
  font-family: open-sans-regular;
  font-weight: bold;
}

/* page title */
.portal h1 {
  font-family: open-sans-semi-bold;
}

/* small text */
.portal small,
.portal .small {
  font-family: open-sans-regular;
}

/* header text */
.portal h2,
.portal h3,
.portal h4,
.portal h5,
.portal h6 {
  font-family: open-sans-bold;
}

/* footer text */
.portal .portal-footer small,
.portal .portal-footer .small {
  font-family: open-sans-regular;
}

/* button text */
.portal .btn,
.portal .button-primary,
.portal a.btn,
.authscheme .authscheme-info .title-info {
  font: 14px open-sans-semi-bold, Helvetica, sans-serif;
}

/* FONT SIZE */

/* site title */
.portal .header-nav-brand a,
.portal .header-nav-brand a:link,
.portal .header-nav-brand a:visited,
.portal .header-nav-brand a:hover,
.portal .header-nav-brand a:focus,
.portal .header-nav-brand a:active {
  font-size: 14px;
}

/* body text */
body {
  font-size: 14px;
}

/* page title */
.portal h1 {
  font-size: 30px !important;
}

/* section title */
.portal h2 {
  font-size: 26px;
}

/* title */
.portal h3 {
  font-size: 22px;
}

/* small title */
.portal h4 {
  font-size: 18px;
}

/* label */
.portal h5 {
  font-size: 12px;
}

/* small label */
.portal h6 {
  font-size: 10px;
}

/* small text */
.portal small,
.portal .small {
  font-size: 12px;
}

/* header text */
.portal h2 {
  font-size: 34px;
}

/* footer text */
.portal .portal-footer small,
.portal .portal-footer .small {
  font-size: 12px;
}

/* button text */
.portal .btn,
.portal a.btn,
.authscheme .authscheme-info .title-info {
  font-size: 14px !important;
}

.sign-info {
  font-size: 14px !important;
}

/* info icon color */
.portal .popover-trigger-info:after {
  background: var(--bv-color-primary-blue-darker);
  color: var(--bv-color-primary-white);
}

/* left nav bar on homepage */
.portal .header-nav-trigger a,
.portal .header-nav-trigger a:hover {
  color: var(--bv-color-primary-black);
}

.mobile-menu-trigger {
  color: var(--bv-color-primary-black);
}
.mobile-nav .mm-list > li > a {
  color: var(--bv-color-primary-blue-darker);
}

.mobile-nav .mm-list > li > a:hover,
.mobile-nav .mm-list > li.active > a {
  color: var(--bv-color-primary-blue-darker);
}

.mobile-nav .mm-list > li:hover > a {
  background: transparent;
}

.mobile-nav .mm-list > li:hover > a:hover {
  color: var(--bv-color-primary-blue-darker);
}

.portal label {
  line-height: normal;
}

.portal textarea {
  margin-bottom: 0em;
}

.portal .uneditable-input {
  color: var(--bv-color-primary-black);
  background-color: rgba(0, 0, 0, 0.1);
}

.portal form pre {
  background: transparent;
}

.portal .layer7-dragndrop-panel span.add-on {
  height: 30px;
}

.portal .layer7-dragndrop-panel i.icon-portal-dragdrop {
  padding-top: 3px;
}

.portal
  .layer7-dragndrop-panel
  .input-prepend.input-append
  button.remove-option {
  margin-left: 4px;
  border-radius: 4px;
}

.portal .layer7-dragndrop-panel input.options-input {
  height: 38px;
}

.portal .page-title-row {
  background: var(--bv-color-primary-white);
}

.portal .page-title-row h1 {
  margin-left: 14px;
}

.portal .page-title-row h1 {
  margin-left: 14px;
}

.portal .page-title-row .portal-page-actions .btn:last-child {
  margin-right: 14px;
}

.portal .wizard-controls {
  margin-top: 24px;
  font-size: 14px;
  font-family: open-sans-regular;
}

.portal .wizard-controls .active .wizard-title,
.portal .wizard-controls .active .wizard-title:hover {
  color: var(--bv-color-primary-black);
}

.portal .wizard-controls .wizard-title {
  color: var(--bv-color-primary-blue-darker);
}

.portal .wizard-controls .wizard-title:hover {
  color: var(--bv-color-primary-blue-darker);
}

.portal .wizard-controls .disabled .wizard-title,
.portal .wizard-controls .disabled .wizard-title:hover {
  color: grey;
}

.portal .wizard-controls small {
  font-size: 12px;
  color: var(--bv-color-primary-black);
}

.portal .trial-video-sidebar .trial-video-sidebar-header:before {
  color: var(--bv-color-primary-white);
  background-color: var(--bv-color-primary-blue-darker);
}

.portal .table-striped tbody > tr:nth-child(odd) {
  background-color: transparent;
}

.portal .layer7-tabs .nav-tabs {
  background: var(--bv-color-primary-white);
  padding-left: 36px;
}

.portal .layer7-tabs .nav-tabs a {
  background: transparent;
  border: none;
}

.portal .layer7-tabs .nav-tabs li a {
  color: var(--bv-color-primary-blue-darker);
}

.portal .layer7-tabs .nav-tabs li a:hover {
  color: var(--bv-color-primary-blue-darker);
}

.portal .layer7-tabs .nav-tabs .active a,
.portal .layer7-tabs .nav-tabs .active a:hover {
  color: var(--bv-color-primary-black);
}

.portal .layer7-tabs .tab-content {
  margin-top: 0px;
}

.portal input.pwd-policy-input {
  margin-bottom: 0px;
}