@font-face {
  font-family: 'Agrandir';
  src: url('Agrandir-SemiNarrowRegularB3.woff2') format('woff2'),
  url('Agrandir-SemiNarrowRegularB3.woff') format('woff'),
  url('Agrandir-B3-SemiNarrowRegular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Heebo';
  src: url('fonts/Heebo-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
:root {
  font-family: 'Roboto';
  --fbx-main-rgb-0: 149, 90, 194;
  --fbx-main-rgb-100: 100, 45, 145;
  --fbx-main-rgb-200: 52, 0, 99;
  --fbx-sec-rgb-0: 238, 255, 103;
  --fbx-sec-rgb-100: 185, 213, 49;
  --fbx-sec-rgb-200: 0, 164, 0;
}

.oj-web-applayout-offcanvas-icon {
    color: rgb(var(--fbx-main-rgb-100)) !important;
}

.oj-full-width {
    max-width: 100%;
}

.fondo-grad-opinion {
    background-image: linear-gradient( #f9f9f9 , rgba(179, 142, 93,.15) )
}

/*Colors*/
.fbx-main-bg-rgb-0 { background-color: rgb(149, 90, 194);}
.fbx-main-bg-rgb-100 { background-color: rgb(100, 45, 145);}
.fbx-main-bg-rgb-200 { background-color: rgb(52, 0, 99);}

.fbx-sec-bg-rgb-0 { background-color: rgba(238, 255, 103,0.2);}
.fbx-sec-bg-rgb-100 { background-color: rgb(185, 213, 49);}
.fbx-sec-bg-rgb-200 { background-color: rgb(0, 164, 0);}

.fbx-main-rgb-0 { color: rgb(149, 90, 194);}
.fbx-main-rgb-100 { color: rgb(100, 45, 145);}
.fbx-main-rgb-200 { color: rgb(52, 0, 99);}

.fbx-sec-rgb-0 { color: rgb(238, 255, 103);}
.fbx-sec-rgb-100 { color: rgb(185, 213, 49);}
.fbx-sec-rgb-200 { color: rgb(0, 164, 0);}

body{
    background-color: rgba(149, 90, 194, 0.01);
    font-size: 0.9em;
}
.badge-fbx {
    --oj-badge-bg-color: rgb(52, 0, 99);
    --oj-badge-text-color: white;
    font-family: Courier;
}
.badge-fbx-subtle{
    --oj-badge-bg-color: rgb(149, 90, 194);
    --oj-badge-text-color: white;
    font-family: Courier;
}
.oj-table-header{
    background-color: rgba(149, 90, 194, 0.025) !important;
    color: rgb(100, 45, 145) !important;

}
.table-hide-header{
    background-color: #f9f3fc !important;
}
.oj-table-column-header-cell{
    margin: 0 auto !important;
    padding-top:0;
    padding-bottom: 0;
}
.fbx-text-main{
    color: rgb(100, 45, 145);
}
.fbx-loading{
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 9999;
  align-items: center;
  top: 0
}

.fbx-loading-circle{
  text-align: center;
  position: relative;
  top: 40%;
  margin: 0 auto;
}

.fbx-auth-links{
  font-size:12px;
}

.fbx-logo-sidebar{
  margin: 10px;
}
.fbx-auth-logo{
  /* align-items: center;
  justify-content: center; */
  margin: 30px auto;
  width: 100px;
  height: 100px;
  background: white;
}

.sendOffScreen {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.fnb-app-icon {
  width:103px;
  height:36px
}

html:not([dir="rtl"]) .fnb-app-icon {
  padding-right:4px
}

html[dir="rtl"] .fnb-app-icon {
  padding-left:4px
}

.fnb-app-icon:before {
  display:inline
}

.demo-appheader-avatar {
  width:24px;
  height:24px
}

.demo-appheader-avatar:before {
  content:url("images/avatar_24px.png")
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
  .demo-appheader-avatar:before {
      content:url("images/avatar_24px_2x.png");
      -webkit-transform:translate(-25%, -25%) scale(0.5);
      transform:translate(-25%, -25%) scale(0.5)
  }
}

.fbx-profile-header{
  background-color:#fff;
}

.fbx-input-mask{
  border: 0px;
}

#gauge-container .demo-center-content-status-meter-sample {
  margin: auto;
  width: 12.5rem;
  height: 12.5rem;
}

.fbx-credit-logos{
  width: 188px;
  height: 30px;
  background-image: url("images/tarjetas_credito188x30.png");
}

.demo-list {
    width: 100%;
    height: 45vh;
    min-height: 18.75rem;
    overflow-x: hidden;
  }
  
  .demo-tweet span {
    word-wrap: break-word;
  }
  
  .demo-tweet a:focus {
    outline-offset: -1px;
    outline-style: solid;
  }

.border {
    border:1px solid black;
}

.pkg-pop {
    display: flex;
    overflow: auto;
}

.pkg-pop-header {
    align-self: center;
    margin-bottom: 10px;
  }

.pkg-pop-content {
    align-self: stretch;
    overflow: auto;
  }

.fbx-discount-div{
  background-color: red;
  color: white;
}
.fbx-no-border{
  border: none !important;
}
.fbx-crossed{
  text-decoration: line-through;
}

details {
    border: 1px solid #d4d4d4;
    padding: .75em .75em 0;
    margin-top: 10px;
    box-shadow:0 0 20px #d4d4d4;
}
summary {
    font-weight: bold;
    margin: -.75em -.75em 0;
    padding: .75em;
    background-color: rgb(var(--fbx-main-rgb-0));
    color: #fff;
    cursor:pointer;
}

details[open] {
    padding: .75em;
	border-bottom: 1px solid #d4d4d4;
}

details[open] summary {
    border-bottom: 1px solid #d4d4d4;
    margin-bottom: 10px;
    background-color: rgb(var(--fbx-sec-rgb-100));
    color: #000;
}

.oj-bg-closed-fbx {
    background-color: rgb(var(--fbx-main-rgb-0)) !important;
}

.oj-bg-open-fbx {
    background-color: rgb(var(--fbx-sec-rgb-100)) !important;
}

.oj-border-open-fbx {
    border-width: 1px;
    border-style: none solid solid solid;
    border-color: rgb(var(--fbx-sec-rgb-100)) !important;
}

.fa-stack.small { font-size: 0.6em; }

.width-100 {
    max-width:100% !important;
}

.oj-panel-full {
    padding: 0px !important;    
}

.oj-panel-full .padslot,
.oj-panel-full .pad {
    border: 0px !important;
    padding: 0.5rem !important;
}

.oj-panel-full .pad {
    border: 1px solid rgb(var(--fbx-sec-rgb-100)) !important;
    border-radius: 0 0 var(--oj-core-border-radius-lg) var(--oj-core-border-radius-lg);
}

.oj-panel-full.oj-collapsed > .oj-collapsible-header-wrapper{
    background-color: rgb(var(--fbx-main-rgb-0)) !important;
}
.oj-panel-full.oj-expanded > .oj-collapsible-header-wrapper {
    background-color: rgb(var(--fbx-sec-rgb-100)) !important;
}

.center-v{
    vertical-align: middle;
}

.selector-wrap {
    width: 1.75rem;
    height: 1.75rem;
}

.selector-wrap > .oj-selector-wrapper {
    max-height: 1.75rem !important;
    max-width: 1.75rem !important;
}

.version-table {
    border-collapse: collapse;
    width: 100%;
}

.version-table th,
td {
    padding: 0.5rem;
}

.version-table tr:nth-child(even) {
    background-color: var(--oj-core-neutral-secondary-1);
}