html {
    font-size:14px
}
body {
    margin:0px;
    height:100%;
    overflow-x:hidden;
    overflow-y:auto;
    background-color:var(--surface-a);
    font-family:var(--font-family);
    font-weight:normal;
    color:var(--text-color);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
a {
    text-decoration:none
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin:1.5rem 0 1rem 0;
    font-family:inherit;
    font-weight:600;
    line-height:1.2;
    color:inherit
}
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
    margin-top:0
}
h1 {
    font-size:2.5rem
}
h2 {
    font-size:2rem
}
h3 {
    font-size:1.75rem
}
h4 {
    font-size:1.5rem
}
h5 {
    font-size:1.25rem
}
h6 {
    font-size:1rem
}
p {
    line-height:1.5;
    margin:0 0 1rem 0
}
@keyframes pulse {
    0% {
        background-color:rgba(165,165,165,.1)
    }
    50% {
        background-color:rgba(165,165,165,.3)
    }
    100% {
        background-color:rgba(165,165,165,.1)
    }
}
.p-toast.p-toast-topright,
.p-toast.p-toast-topleft {
    top:100px
}
.action-button {
    font-weight:bold;
    text-align:center;
    color:#2b3034 !important;
    background-color:#feab4d;
    padding:10px 24px 9px 24px;
    border-radius:3px;
    transition:background-color .2s
}
.action-button:hover {
    background-color:#feb767;
    color:#fff;
    text-decoration:none !important
}
.status-indicator {
    position:fixed;
    width:42px;
    height:42px;
    right:7px;
    bottom:7px;
    font-size:28px;
    color:var(--primary-color);
    pointer-events:none
}
.text-secondary {
    color:var(--text-color-secondary)
}
.floatlabel-demo .field {
    margin-top:2rem
}
.p-connected-overlay {
    opacity:0;
    transform:scaleY(0.8);
    transition:transform .12s cubic-bezier(0, 0, 0.2, 1),opacity .12s cubic-bezier(0, 0, 0.2, 1)
}
.p-connected-overlay-visible {
    opacity:1;
    transform:scaleY(1)
}
.p-connected-overlay-hidden {
    opacity:0;
    transform:scaleY(1);
    transition:opacity .1s linear
}
@-webkit-keyframes connected-overlay-in {
    from {
        opacity:0;
        -webkit-transform:scaleY(0.8);
        transform:scaleY(0.8)
    }
    to {
        opacity:1;
        -webkit-transform:none;
        transform:none
    }
}
@keyframes connected-overlay-in {
    from {
        opacity:0;
        transform:scaleY(0.8)
    }
    to {
        opacity:1;
        transform:none
    }
}
@-webkit-keyframes connected-overlay-out {
    from {
        opacity:1
    }
    to {
        opacity:0
    }
}
@keyframes fade-out-down {
    from {
        opacity:1
    }
    to {
        opacity:0
    }
}
.connected-overlay-in {
    -webkit-animation-name:connected-overlay-in;
    animation-name:connected-overlay-in
}
.connected-overlay-out {
    -webkit-animation-name:connected-overlay-out;
    animation-name:connected-overlay-out
}
.layout-topbar {
    background-color:var(--surface-a);
    padding:0;
    height:70px;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:997;
    box-shadow:0 0 4px rgba(0,0,0,.25);
    border-bottom:1px solid var(--surface-d);
    display:flex;
    align-items:center;
    padding:0 35px
}
.layout-topbar .menu-button {
    display:none;
    color:var(--text-color);
    width:70px;
    height:70px;
    line-height:70px;
    text-align:center;
    transition:background-color .2s;
    overflow:hidden;
    cursor:pointer
}
.layout-topbar .menu-button:hover {
    background-color:var(--surface-c)
}
.layout-topbar .menu-button i {
    font-size:24px;
    line-height:inherit
}
.layout-topbar .logo img {
    width:180px
}
.layout-topbar .logo:focus {
    outline:0 none;
    transition:box-shadow .2s;
    box-shadow:0 0 0 .2rem #bbdefb
}
.layout-topbar .app-theme {
    background-color:var(--primary-color);
    color:var(--primary-color-text);
    padding:.5rem;
    border-radius:4px;
    box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);
    width:39px;
    height:39px;
    margin-left:70px
}
.layout-topbar .app-theme img {
    width:25px
}
.layout-topbar .topbar-form {
    margin-left:auto
}
.layout-topbar .topbar-menu {
    list-style-type:none;
    margin:0;
    padding:0;
    height:100%;
    display:flex
}
.layout-topbar .topbar-menu>li {
    height:70px;
    line-height:70px
}
.layout-topbar .topbar-menu>li>a {
    text-decoration:none;
    color:var(--text-color);
    min-width:120px;
    font-size:16px;
    display:block;
    text-align:center;
    user-select:none;
    line-height:68px;
    border-bottom:2px solid rgba(0,0,0,0);
    transition:border-bottom-color .2s;
    cursor:pointer
}
.layout-topbar .topbar-menu>li>a:hover,
.layout-topbar .topbar-menu>li>a:focus {
    border-bottom-color:var(--primary-color)
}
.layout-topbar .topbar-menu>li>a:focus {
    z-index:1;
    outline:0 none;
    transition:box-shadow .2s;
    box-shadow:inset 0 0 0 .2em #bbdefb
}
.layout-topbar .topbar-menu>li.topbar-submenu {
    position:relative
}
.layout-topbar .topbar-menu>li.topbar-submenu .ui-overlay-badge {
    display:inline
}
.layout-topbar .topbar-menu>li.topbar-submenu.topbar-submenu-active>ul {
    display:block
}
.layout-topbar .topbar-menu>li.topbar-submenu>ul {
    display:none;
    position:absolute;
    transform-origin:top;
    top:70px;
    right:0;
    width:275px;
    max-height:400px;
    background-color:var(--surface-f);
    box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);
    overflow:auto;
    list-style-type:none;
    padding:1rem;
    margin:0;
    border-radius:3px;
    animation-duration:.12s
}
.layout-topbar .topbar-menu>li.topbar-submenu>ul>li {
    line-height:1
}
.layout-topbar .topbar-menu>li.topbar-submenu>ul>li.topbar-submenu-header {
    display:block;
    color:var(--text-color-secondary);
    font-weight:600;
    user-select:none;
    padding:1.5rem 0 1rem 0;
    font-size:.857rem;
    text-transform:uppercase
}
.layout-topbar .topbar-menu>li.topbar-submenu>ul>li.topbar-submenu-header:first-child {
    padding-top:1rem
}
.layout-topbar .topbar-menu>li.topbar-submenu>ul a {
    text-decoration:none;
    color:var(--text-color);
    padding:.5rem;
    display:flex;
    align-items:center;
    user-select:none;
    border-radius:3px;
    cursor:pointer
}
.layout-topbar .topbar-menu>li.topbar-submenu>ul a:hover {
    background-color:var(--surface-c)
}
.layout-topbar .topbar-menu>li.topbar-submenu>ul a span {
    margin-left:.5rem
}
.layout-topbar .topbar-menu>li.topbar-submenu>ul a i {
    font-size:18px;
    color:var(--text-color-secondary)
}
.layout-topbar .topbar-menu>li.topbar-submenu>ul a img {
    width:32px;
    margin-right:.5rem
}
.layout-topbar .topbar-menu .theme-badge {
    padding:2px 4px;
    vertical-align:middle;
    border-radius:3px;
    color:#fff;
    font-weight:bold;
    font-size:11px;
    position:relative;
    top:-1px
}
.layout-topbar .topbar-menu .theme-badge.material {
    background:linear-gradient(to bottom, #2196F3, #2196F3)
}
.layout-topbar .topbar-menu .theme-badge.bootstrap {
    background:linear-gradient(to bottom, #563D7C, #966BD8)
}
.layout-topbar .topbar-menu .theme-badge.darkmode {
    background:linear-gradient(to bottom, #141d26, #5a6067)
}
.layout-sidebar {
    position:fixed;
    left:0;
    top:70px;
    height:calc(100% - 70px);
    background-color:var(--surface-a);
    width:250px;
    border-right:1px solid var(--surface-d);
    user-select:none;
    transition:transform .4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
    display:flex;
    flex-direction:column
}
.layout-sidebar .layout-sidebar-filter {
    padding:1.25rem 1rem;
    border-bottom:1px solid var(--surface-d);
    background-color:var(--surface-a)
}
.layout-sidebar .layout-menu {
    padding:0 1rem;
    overflow-y:auto;
    flex-grow:1
}
.layout-sidebar .layout-menu .menu-category {
    display:block;
    color:var(--text-color);
    font-weight:700;
    user-select:none;
    padding:1.5rem 0 1rem 0;
    font-size:.857rem;
    text-transform:uppercase;
    border-top:1px solid var(--surface-d)
}
.layout-sidebar .layout-menu .menu-category:first-child {
    border-top:0 none;
    padding-top:1rem
}
.layout-sidebar .layout-menu .menu-items {
    padding:0 0 1rem 0;
    display:flex;
    flex-direction:column
}
.layout-sidebar .layout-menu .menu-items a {
    color:var(--text-color);
    display:flex;
    align-items:center;
    padding:.5rem;
    border-radius:3px;
    cursor:pointer
}
.layout-sidebar .layout-menu .menu-items a:hover {
    background-color:var(--surface-c)
}
.layout-sidebar .layout-menu .menu-items a:focus {
    z-index:1;
    outline:0 none;
    transition:box-shadow .2s;
    box-shadow:0 0 0 .2em #bbdefb
}
.layout-sidebar .layout-menu .menu-items a.router-link-active {
    font-weight:700;
    color:var(--primary-color)
}
.layout-sidebar .layout-menu .menu-items a .ui-tag {
    padding-top:.125rem;
    padding-bottom:.125rem;
    margin-left:.5rem
}
.layout-sidebar .layout-menu .menu-items a.hidden {
    pointer-events:none
}
.layout-sidebar .layout-menu .menu-items .submenu {
    display:none
}
.layout-sidebar .layout-menu .menu-items .submenu ul {
    padding:.5rem 0;
    margin:0;
    list-style-type:none
}
.layout-sidebar .layout-menu .menu-items .submenu ul a {
    font-size:.875rem;
    padding:.475rem .5rem .475rem 2rem
}
.layout-sidebar .layout-menu .menu-image {
    padding:0 0 1rem 0
}
.layout-sidebar .layout-menu .menu-image.menu-banner a {
    padding:0
}
.layout-sidebar .layout-menu .menu-image.menu-banner a:hover {
    background-color:rgba(0,0,0,0)
}
.layout-sidebar .layout-menu .menu-image.menu-banner a:hover img {
    background-color:var(--surface-c)
}
.layout-sidebar .layout-menu .menu-image.menu-banner a:focus {
    box-shadow:none
}
.layout-sidebar .layout-menu .menu-image img {
    width:100%
}
.layout-sidebar-filter-panel.ui-autocomplete-panel {
    padding:.5rem 0
}
.layout-sidebar-filter-panel.ui-autocomplete-panel .ui-autocomplete-table .ui-widget-header td {
    border:1px solid rgba(0,0,0,0);
    padding:3px 5px
}
.layout-sidebar-filter-panel.ui-autocomplete-panel .ui-autocomplete-table .ui-autocomplete-item.ui-autocomplete-row>td {
    border:1px solid rgba(0,0,0,0);
    padding:0
}
.layout-sidebar-filter-panel.ui-autocomplete-panel .ui-autocomplete-table .ui-autocomplete-item.ui-autocomplete-row>td a {
    display:flex;
    align-items:center;
    padding:.5rem 1rem;
    color:var(--text-color)
}
.layout-sidebar-filter-panel.ui-autocomplete-panel .ui-autocomplete-table .ui-autocomplete-item.ui-autocomplete-row>td a .ui-tag {
    padding-top:.125rem;
    padding-bottom:.125rem;
    margin-left:.5rem
}
.layout-sidebar-filter-panel.ui-autocomplete-panel .ui-autocomplete-table .ui-autocomplete-item.ui-autocomplete-row.ui-state-highlight>td a {
    background:var(--primary-color);
    color:var(--primary-color-text)
}
.layout-content {
    margin-left:250px;
    padding-top:70px
}
.layout-content .content-section {
    padding:2rem
}
.layout-content .content-section.introduction {
    background-color:var(--surface-b);
    color:var(--text-color);
    padding-bottom:0;
    display:flex;
    align-items:top;
    justify-content:space-between
}
.layout-content .content-section.introduction .feature-intro h1 span {
    font-weight:400;
    color:var(--text-color-secondary)
}
.layout-content .content-section.introduction .feature-intro p {
    margin:0
}
.layout-content .content-section.introduction .feature-intro a {
    text-decoration:none;
    color:#2196f3;
    font-weight:600
}
.layout-content .content-section.introduction .feature-intro a:hover {
    text-decoration:underline
}
.layout-content .content-section.introduction .documentation-link {
    text-decoration:none;
    color:#2196f3;
    font-weight:600;
    display:flex;
    align-items:center;
    margin:1rem 0;
    white-space:nowrap
}
.layout-content .content-section.introduction .documentation-link:hover {
    text-decoration:underline
}
.layout-content .content-section.introduction .documentation-link i {
    margin-right:.5rem
}
.layout-content .content-section.implementation {
    background-color:var(--surface-b);
    color:var(--text-color)
}
.layout-content .content-section.implementation+.documentation {
    padding-top:0
}
.layout-content .content-section.implementation input[type=hidden]+h5 {
    margin-top:0
}
.layout-content .content-section.documentation {
    background-color:var(--surface-b);
    color:var(--text-color)
}
.layout-content .content-section.documentation li {
    line-height:1.5
}
.layout-content .content-section.documentation a {
    text-decoration:none;
    color:#2196f3;
    font-weight:600
}
.layout-content .content-section.documentation a:hover {
    text-decoration:underline
}
.layout-content .content-section.documentation .doc-tablewrapper {
    margin:1rem 0;
    overflow:auto
}
.layout-content .content-section.documentation i:not([class~=pi]) {
    background-color:var(--surface-a);
    color:#2196f3;
    font-family:Monaco,courier,monospace;
    font-style:normal;
    font-size:12px;
    padding:2px 4px;
    letter-spacing:.5px;
    border-radius:3px;
    font-weight:600;
    margin:0 2px
}
.layout-content .content-section.documentation .ui-tabs {
    background:rgba(0,0,0,0);
    border:0 none
}
.layout-content .content-section.documentation .ui-tabs .ui-tabs-nav {
    background-color:rgba(0,0,0,0)
}
.layout-content .content-section.documentation .ui-tabs .ui-tabs-nav:before {
    border-bottom:1px solid var(--surface-d) !important
}
.layout-content .content-section.documentation .ui-tabs .ui-tabs-nav li.ui-tabs-header {
    background-color:rgba(0,0,0,0);
    border-bottom-width:1px
}
.layout-content .content-section.documentation .ui-tabs .ui-tabs-nav li.ui-tabs-header a {
    text-decoration:none
}
.layout-content .content-section.documentation .ui-tabs .ui-tabs-nav li.ui-tabs-header.ui-state-hover {
    border-color:rgba(0,0,0,0);
    border-bottom-color:var(--primary-color);
    border-radius:0
}
.layout-content .content-section.documentation .ui-tabs .ui-tabs-nav li.ui-tabs-header.ui-state-hover a {
    color:var(--text-color)
}
.layout-content .content-section.documentation .ui-tabs .ui-tabs-nav li.ui-tabs-header.ui-state-active {
    border-color:rgba(0,0,0,0);
    border-bottom-color:var(--primary-color);
    border-radius:0
}
.layout-content .content-section.documentation .ui-tabs .ui-tabs-nav li.ui-tabs-header.ui-state-active a {
    color:var(--primary-color)
}
.layout-content .content-section.documentation .ui-tabs .ui-tabs-panels {
    background:rgba(0,0,0,0)
}
.layout-content .content-section.documentation .ui-tabs .ui-tabs-panels .ui-tabs-panel {
    padding:2rem 1rem
}
.layout-content .content-section .doc-table {
    border-collapse:collapse;
    width:100%;
    background-color:var(--surface-a)
}
.layout-content .content-section .doc-table th {
    border-bottom:1px solid var(--surface-d);
    padding:1rem;
    text-align:left
}
.layout-content .content-section .doc-table tbody td {
    padding:1rem;
    border-bottom:1px solid var(--surface-d)
}
.layout-content .card {
    background:var(--surface-e);
    padding:2rem;
    box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);
    border-radius:4px;
    margin-bottom:2rem
}
.layout-content .card .card-header {
    display:flex;
    align-items:center;
    justify-content:space-between
}
code[class*=language-],
pre[class*=language-] {
    color:var(--text-color);
    background:0 0;
    font-family:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;
    font-size:1em;
    text-align:left;
    white-space:pre;
    word-spacing:normal;
    word-break:normal;
    word-wrap:normal;
    line-height:1.5;
    -moz-tab-size:4;
    -o-tab-size:4;
    tab-size:4;
    -webkit-hyphens:none;
    -moz-hyphens:none;
    -ms-hyphens:none;
    hyphens:none
}
pre[class*=language-] {
    position:relative;
    margin:.5em 0;
    overflow:visible;
    padding:1px
}
pre[class*=language-]>code {
    position:relative;
    z-index:1;
    border-left:10px solid var(--surface-d) !important;
    background-color:var(--surface-e) !important;
    background-image:linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
    background-size:3em 3em;
    background-origin:content-box;
    background-attachment:local
}
code[class*=language-] {
    max-height:inherit;
    height:inherit;
    padding:0 1em;
    display:block;
    overflow:auto
}
:not(pre)>code[class*=language-],
pre[class*=language-] {
    background-color:#fdfdfd;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    margin-bottom:1em
}
:not(pre)>code[class*=language-] {
    position:relative;
    padding:.2em;
    border-radius:.3em;
    color:#c92c2c;
    border:1px solid rgba(0,0,0,.1);
    display:inline;
    white-space:normal
}
pre[class*=language-]:after,
pre[class*=language-]:before {
    content:"";
    display:block;
    position:absolute;
    bottom:.75em;
    left:.18em;
    width:40%;
    height:20%;
    max-height:13em;
    box-shadow:0 13px 8px #979797;
    -webkit-transform:rotate(-2deg);
    -moz-transform:rotate(-2deg);
    -ms-transform:rotate(-2deg);
    -o-transform:rotate(-2deg);
    transform:rotate(-2deg)
}
pre[class*=language-]:after {
    right:.75em;
    left:auto;
    -webkit-transform:rotate(2deg);
    -moz-transform:rotate(2deg);
    -ms-transform:rotate(2deg);
    -o-transform:rotate(2deg);
    transform:rotate(2deg)
}
.token.block-comment,
.token.cdata,
.token.comment,
.token.doctype,
.token.prolog {
    color:#7d8b99
}
.token.punctuation {
    color:var(--text-color)
}
.token.boolean,
.token.constant,
.token.deleted,
.token.function-name,
.token.number,
.token.property,
.token.symbol,
.token.tag {
    color:#c92c2c
}
.token.attr-name,
.token.builtin,
.token.char,
.token.function,
.token.inserted,
.token.selector,
.token.string {
    color:#2f9c0a
}
.token.entity,
.token.operator,
.token.url,
.token.variable {
    color:#a67f59;
    background:rgba(255,255,255,.5)
}
.token.atrule,
.token.attr-value,
.token.class-name,
.token.keyword {
    color:#1990b8
}
.token.important,
.token.regex {
    color:#e90
}
.language-css .token.string,
.style .token.string {
    color:#a67f59;
    background:rgba(255,255,255,.5)
}
.token.important {
    font-weight:400
}
.token.bold {
    font-weight:700
}
.token.italic {
    font-style:italic
}
.token.entity {
    cursor:help
}
.token.namespace {
    opacity:.7
}
@media screen and (max-width: 767px) {
    pre[class*=language-]:after,
    pre[class*=language-]:before {
        bottom:14px;
        box-shadow:none
    }
}
pre[class*=language-].line-numbers.line-numbers {
    padding-left:0
}
pre[class*=language-].line-numbers.line-numbers code {
    padding-left:3.8em
}
pre[class*=language-].line-numbers.line-numbers .line-numbers-rows {
    left:0
}
pre[class*=language-][data-line] {
    padding-top:0;
    padding-bottom:0;
    padding-left:0
}
pre[data-line] code {
    position:relative;
    padding-left:4em
}
pre .line-highlight {
    margin-top:0
}
pre[class*=language-].line-numbers {
    position:relative;
    padding-left:3.8em;
    counter-reset:linenumber
}
pre[class*=language-].line-numbers>code {
    position:relative;
    white-space:inherit
}
.line-numbers .line-numbers-rows {
    position:absolute;
    pointer-events:none;
    top:0;
    font-size:100%;
    left:-3.8em;
    width:3em;
    letter-spacing:-1px;
    border-right:1px solid var(--surface-d) !important;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}
.line-numbers-rows>span {
    display:block;
    counter-increment:linenumber
}
.line-numbers-rows>span:before {
    content:counter(linenumber);
    color:var(--text-color-secondary);
    display:block;
    padding-right:.8em;
    text-align:right
}
pre[class*=language-]:after,
pre[class*=language-]:before {
    box-shadow:none
}
.layout-news {
    position:fixed;
    top:0;
    left:0;
    z-index:997;
    height:70px;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    background-image:url("/showcase/javax.faces.resource/images/news/topbar-newyear-bg.png.xhtml?ln=showcase"),linear-gradient(180deg, #D2000B 0%, #9B0008 100%);
    background-size:cover;
    background-blend-mode:multiply
}
.layout-news .layout-news-container {
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-weight:bold;
    font-size:20px
}
.layout-news .layout-news-container .layout-news-details {
    display:flex;
    align-items:center;
    z-index:1
}
.layout-news .layout-news-container .layout-news-details .rate {
    color:#f2b837;
    font-size:25px;
    font-weight:bold;
    margin:0 .25rem
}
.layout-news .layout-news-container .layout-news-details .helper-text {
    background-color:#f2b837;
    color:#212121;
    padding:0 .2rem;
    margin-right:.3rem
}
.layout-news .layout-news-container .layout-news-header {
    margin:0;
    background:linear-gradient(180deg, #D8000A 0%, rgba(255, 0, 0, 0) 100%);
    border-radius:4px 4px 0px 0px;
    text-shadow:0px 4px 4.4px rgba(0,0,0,.3);
    font-weight:900
}
.layout-news .layout-news-container img.layouts-news-mockup-image {
    height:70px
}
.layout-news .layout-news-container .layout-news-logo {
    position:absolute;
    left:0
}
.layout-news .layout-news-container .layout-news-button {
    color:#fff;
    font-size:14px;
    padding:.4em .8em .4em 1em;
    font-weight:bold;
    border-radius:3px;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-shrink:0;
    transition:background-color .15s;
    margin-left:1rem;
    position:relative;
    z-index:1;
    background:linear-gradient(180deg, #D8000A 0%, rgba(251, 0, 1, 0.4) 89.06%, rgba(255, 0, 0, 0) 100%);
    border-radius:5px
}
.layout-news .layout-news-container .layout-news-button>i {
    margin-left:.5em;
    font-weight:bold;
    position:relative;
    top:1px
}
.layout-news .layout-news-container .layout-news-button:hover {
    background:linear-gradient(180deg, #EE000B 0%, rgba(255, 0, 0, 0.55) 100%)
}
.layout-news .layout-news-close {
    cursor:pointer;
    color:#fff;
    position:absolute;
    z-index:2;
    right:28px;
    background:linear-gradient(180deg, #D8000A 0%, rgba(255, 0, 0, 0) 100%);
    filter:drop-shadow(0px 12px 12px rgba(0, 0, 0, 0.17));
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    width:34px;
    height:34px
}
.layout-wrapper.layout-news-active .layout-topbar {
    top:70px
}
.layout-wrapper.layout-news-active .layout-sidebar {
    top:140px;
    height:calc(100% - 140px)
}
.layout-wrapper.layout-news-active .layout-content {
    padding-top:140px
}
.layout-wrapper.layout-news-active .layout-config {
    top:140px;
    height:calc(100% - 140px)
}
.layout-footer {
    font-size:1rem;
    padding:2rem;
    background-color:var(--surface-a);
    display:flex;
    align-items:center;
    justify-content:space-between
}
.layout-footer a {
    color:var(--text-color);
    font-weight:600
}
.layout-footer .layout-footer-right a i {
    color:var(--text-secondary-color);
    font-size:1.5rem
}
.layout-config {
    position:fixed;
    padding:0;
    top:0;
    right:0;
    display:block;
    width:550px;
    z-index:998;
    height:100%;
    transition:transform .4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
    transform:translateX(100%);
    backface-visibility:hidden
}
.layout-config.layout-config-active {
    transform:translateX(0)
}
.layout-config.layout-config-active .layout-config-content-wrapper .layout-config-button i {
    transform:rotate(0deg)
}
.layout-config .layout-config-content-wrapper {
    position:relative;
    height:100%;
    box-shadow:0 2px 10px 0 rgba(0,0,0,.24);
    color:var(--text-color);
    background-color:var(--surface-f)
}
.layout-config .layout-config-content-wrapper .layout-config-button {
    display:block;
    position:absolute;
    width:52px;
    height:52px;
    line-height:52px;
    background-color:var(--primary-color);
    text-align:center;
    color:var(--primary-color-text);
    top:270px;
    left:-51px;
    z-index:-1;
    overflow:hidden;
    cursor:pointer;
    border-top-left-radius:3px;
    border-top-right-radius:3px;
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
    animation-name:rubberBand;
    animation-duration:1s;
    animation-iteration-count:3;
    animation-delay:5s;
    box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)
}
.layout-config .layout-config-content-wrapper .layout-config-button i {
    font-size:26px;
    line-height:inherit;
    cursor:pointer;
    transform:rotate(360deg);
    transition:transform 1s
}
.layout-config a {
    color:#2196f3;
    font-weight:600;
    cursor:pointer
}
.layout-config a:hover {
    text-decoration:underline
}
.layout-config .layout-config-content {
    overflow:auto;
    height:100%;
    padding:2rem
}
.layout-config .config-scale {
    display:flex;
    align-items:center;
    margin:1rem 0 2rem 0
}
.layout-config .config-scale .p-button {
    margin-right:.5rem
}
.layout-config .config-scale i {
    margin-right:.5rem;
    font-size:.75rem;
    color:var(--text-color-secondary)
}
.layout-config .config-scale i.scale-active {
    font-size:1.25rem;
    color:#2196f3
}
.layout-config .layout-config-close {
    position:absolute;
    width:25px;
    height:25px;
    line-height:25px;
    text-align:center;
    right:20px;
    top:20px;
    z-index:999;
    background-color:var(--primary-color);
    border-radius:50%;
    transition:background-color .2s,box-shadow .2s,transform .2s
}
.layout-config .layout-config-close i {
    color:var(--primary-color-text);
    line-height:inherit;
    font-size:14px
}
.layout-config .layout-config-close:hover {
    transform:scale(1.1)
}
.layout-config .layout-config-close:focus {
    outline:0 none;
    box-shadow:0 0 0 .2rem #bbdefb
}
.layout-config .grid>div {
    padding:1rem;
    text-align:center
}
.layout-config .grid>div span {
    display:block
}
.layout-config .grid>div button {
    position:relative;
    display:inline-flex;
    justify-content:center
}
.layout-config .free-themes img {
    width:50px;
    border-radius:4px;
    transition:transform .2s
}
.layout-config .free-themes img:hover {
    transform:scale(1.1)
}
.layout-config .free-themes span {
    font-size:.875rem;
    margin-top:.25rem
}
.layout-config .premium-themes img {
    width:100%;
    transition:transform .2s
}
.layout-config .premium-themes img:hover {
    transform:scale(1.1)
}
@keyframes rubberBand {
    from {
        transform:scale3d(1, 1, 1)
    }
    30% {
        transform:scale3d(1.25, 0.75, 1)
    }
    40% {
        transform:scale3d(0.75, 1.25, 1)
    }
    50% {
        transform:scale3d(1.15, 0.85, 1)
    }
    65% {
        transform:scale3d(0.95, 1.05, 1)
    }
    75% {
        transform:scale3d(1.05, 0.95, 1)
    }
    to {
        transform:scale3d(1, 1, 1)
    }
}
.layout-error+.layout-footer {
    display:none
}
.home a {
    text-decoration:none;
    color:#2196f3;
    font-weight:600
}
.home a:hover {
    text-decoration:underline
}
.home p {
    margin-bottom:2rem
}
.home .introduction {
    background-color:var(--surface-a);
    background-image:url("/showcase/javax.faces.resource/images/home/intro-bg.jpg.xhtml?ln=showcase");
    background-repeat:no-repeat;
    background-size:cover;
    padding:115px 30px 135px 50px;
    color:var(--text-color);
    position:relative
}
.home .introduction.introduction-dark {
    background-image:url("/showcase/javax.faces.resource/images/home/intro-bg-dark.jpg.xhtml?ln=showcase");
    color:var(--text-color)
}
.home .introduction.introduction-dark .introduction-promo {
    background:linear-gradient(90deg, rgba(76, 87, 111, 0.4) 0%, transparent 100%)
}
.home .introduction .introduction-promo {
    display:inline-block;
    margin-left:-50px;
    margin-bottom:20px;
    padding:10px 175px 10px 50px;
    font-size:1.5rem;
    background:linear-gradient(90deg, rgba(12, 75, 152, 0.6) 0%, transparent 100%);
    position:relative;
    color:#fff;
    font-weight:700
}
.home .introduction .introduction-title {
    font-weight:400;
    margin-bottom:5px;
    font-size:24px
}
.home .introduction .introduction-subtitle {
    font-weight:700;
    margin-bottom:40px;
    margin-top:0;
    font-size:24px
}
.home .introduction .introduction-devices {
    position:absolute;
    bottom:0;
    right:0;
    width:55%
}
.home .features {
    background-color:var(--surface-b);
    text-align:center;
    padding:2rem
}
.home .features .col-12 {
    padding:1rem
}
.home .features .feature-card {
    background-color:var(--surface-e);
    box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);
    height:100%;
    border-radius:3px
}
.home .features .feature-card .feature-card-detail {
    padding:0 2rem 2rem 2rem
}
.home .features .feature-card p {
    margin-bottom:0
}
.home .features img {
    width:100%
}
.home .features .feature-name {
    font-weight:700;
    font-size:16px;
    margin:1rem 0
}
.home .video {
    background-color:var(--surface-a);
    text-align:center;
    padding:2rem
}
.home .whouses {
    background-color:#34495e;
    color:#eaecee;
    text-align:center;
    padding:2rem
}
.home .whouses img {
    height:30px
}
.home .whouses img.circular {
    height:50px
}
.home .whouses .grid>div {
    padding:2rem .5rem;
    display:flex;
    align-items:center;
    justify-content:center
}
.home .templates {
    background-color:var(--surface-b);
    text-align:center;
    padding:2rem;
    border-bottom:1px solid var(--surface-d)
}
.home .templates img {
    width:100%;
    box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)
}
.home .prime-designer {
    background-color:var(--surface-a);
    color:var(--text-color);
    padding:2rem
}
.home .prime-designer img {
    width:100%;
    margin-bottom:30px
}
.home .prime-designer h4 {
    text-align:center
}
.home .primeblocks {
    color:var(--text-color);
    padding:2rem
}
.home .primeflex {
    background-color:var(--surface-d);
    color:var(--text-color);
    padding:2rem
}
.home .prosupport {
    border-bottom:1px solid var(--surface-d);
    background-color:var(--surface-b);
    padding:2rem;
    color:var(--text-color)
}
.home .prosupport img {
    margin-top:10px
}
.home .prosupport .md-6:last-child {
    text-align:center
}
.home .prosupport .action-button {
    display:inline-block;
    margin-top:1rem
}
@media screen and (max-width: 960px) {
    .layout-wrapper.layout-news-active .layout-content {
        padding-top:180px
    }
    .layout-wrapper.layout-news-active .layout-sidebar {
        top:0;
        height:100%
    }
    .layout-wrapper.layout-news-active .layout-news-button {
        opacity:0;
        position:absolute;
        z-index:1;
        width:100%;
        height:100%;
        margin:0;
        top:0;
        left:0
    }
    .layout-wrapper.layout-news-active .layout-news-logo {
        display:none
    }
    .layout-topbar {
        height:110px;
        flex-wrap:wrap;
        justify-content:space-between;
        padding:0
    }
    .layout-topbar .menu-button {
        display:block
    }
    .layout-topbar .logo img {
        width:150px
    }
    .layout-topbar .app-theme {
        margin-left:0;
        margin-right:23px
    }
    .layout-topbar .topbar-form {
        width:100%
    }
    .layout-topbar .topbar-menu {
        background-color:var(--surface-a);
        width:100%;
        height:40px;
        margin:0;
        border-top:1px solid var(--surface-d)
    }
    .layout-topbar .topbar-menu>li {
        height:40px;
        line-height:40px;
        width:25%
    }
    .layout-topbar .topbar-menu>li>a {
        padding-bottom:0;
        height:40px;
        line-height:38px;
        width:100%;
        font-size:14px;
        min-width:auto
    }
    .layout-topbar .topbar-menu>li.topbar-submenu>ul {
        top:40px
    }
    .layout-sidebar {
        top:0;
        z-index:999;
        height:100%;
        transform:translateX(-100%)
    }
    .layout-sidebar.active {
        transform:translateX(0)
    }
    .layout-content {
        margin-left:0;
        padding-top:110px
    }
    .layout-content .content-section.introduction {
        flex-direction:column
    }
    .layout-content .video-container {
        position:relative;
        width:100%;
        height:0;
        padding-bottom:56.25%
    }
    .layout-content .video-container iframe {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%
    }
    .layout-mask {
        background-color:rgba(0,0,0,.1)
    }
    .layout-mask.layout-mask-active {
        z-index:998;
        width:100%;
        height:100%;
        position:fixed;
        top:0;
        left:0;
        background-color:rgba(0,0,0,.4);
        transition:background-color .2s
    }
    .home .introduction>div {
        width:100%
    }
    .home .features>div {
        width:100%
    }
    .home .whouses>div {
        width:100%
    }
    .home .prosupport>div {
        width:100%
    }
    .home .video iframe {
        width:100% !important
    }
    .layout-config .layout-config-button {
        left:auto;
        right:-52px
    }
    .layout-config.layout-config-active {
        width:100%
    }
    .blocked-scroll {
        overflow:hidden
    }
}
@media screen and (max-width: 640px) {
    .layout-wrapper.layout-news-active .topbar-menu>li.topbar-submenu>ul {
        top:180px
    }
    .layout-topbar .topbar-menu>li.topbar-submenu {
        position:static
    }
    .layout-topbar .topbar-menu>li.topbar-submenu>ul {
        top:110px;
        position:fixed;
        right:auto;
        left:0;
        width:100vw
    }
    .layout-error img {
        width:80%
    }
}
.customer-badge {
    border-radius:2px;
    padding:.25em .5rem;
    text-transform:uppercase;
    font-weight:700;
    font-size:12px;
    letter-spacing:.3px
}
.customer-badge.status-qualified {
    background-color:#c8e6c9;
    color:#256029
}
.customer-badge.status-unqualified {
    background-color:#ffcdd2;
    color:#c63737
}
.customer-badge.status-negotiation {
    background-color:#feedaf;
    color:#8a5340
}
.customer-badge.status-new {
    background-color:#b3e5fc;
    color:#23547b
}
.customer-badge.status-renewal {
    background-color:#eccfff;
    color:#694382
}
.customer-badge.status-proposal {
    background-color:#ffd8b2;
    color:#805b36
}
.product-badge {
    border-radius:2px;
    padding:.25em .5rem;
    text-transform:uppercase;
    font-weight:700;
    font-size:12px;
    letter-spacing:.3px
}
.product-badge.status-instock {
    background:#c8e6c9;
    color:#256029
}
.product-badge.status-outofstock {
    background:#ffcdd2;
    color:#c63737
}
.product-badge.status-lowstock {
    background:#feedaf;
    color:#8a5340
}
.order-badge {
    border-radius:2px;
    padding:.25em .5rem;
    text-transform:uppercase;
    font-weight:700;
    font-size:12px;
    letter-spacing:.3px
}
.order-badge.order-delivered {
    background:#c8e6c9;
    color:#256029
}
.order-badge.order-cancelled {
    background:#ffcdd2;
    color:#c63737
}
.order-badge.order-pending {
    background:#feedaf;
    color:#8a5340
}
.order-badge.order-returned {
    background:#eccfff;
    color:#694382
}
.image-text {
    vertical-align:middle;
    margin-left:.5rem
}
.p-multiselect-representative-option {
    display:inline-block;
    vertical-align:middle
}
.p-multiselect-representative-option img {
    vertical-align:middle;
    width:24px
}
.p-multiselect-representative-option span {
    margin-top:.125rem
}
.p-column-filter {
    width:100%
}
.country-item {
    display:flex;
    align-items:center
}
.country-item img.flag {
    width:18px;
    margin-right:.5rem
}
.image-text {
    vertical-align:middle;
    margin-left:.5rem
}
.p-multiselect-representative-option {
    display:inline-block;
    vertical-align:middle
}
.p-multiselect-representative-option img {
    vertical-align:middle;
    width:24px
}
.p-multiselect-representative-option span {
    margin-top:.125rem
}
.p-column-filter {
    width:100%
}
.country-item {
    display:flex;
    align-items:center
}
.country-item img.flag {
    width:18px;
    margin-right:.5rem
}
.product .product-name {
    font-size:1rem;
    font-weight:700
}
.product .product-description {
    margin:0 0 1rem 0
}
.product .product-category-icon {
    vertical-align:middle;
    margin-right:.5rem
}
.product .product-category {
    font-weight:600;
    vertical-align:middle
}
.product .product-list-item {
    display:-ms-flexbox;
    display:flex;
    -ms-flex-align:center;
    align-items:center;
    padding:1rem
}
.product .product-list-item.border-1 {
    border-bottom:1px solid var(--surface-d)
}
.product .product-list-item img {
    width:150px;
    box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);
    margin-right:2rem
}
.product .product-list-item .product-list-detail {
    flex:1 1 0;
    -ms-flex:1 1 0
}
.product .product-list-item .ui-rating {
    margin:0 0 .5rem 0
}
.product .product-list-item .product-price {
    font-size:1.5rem;
    font-weight:600;
    margin-bottom:.5rem;
    align-self:flex-end
}
.product .product-list-item .product-list-action {
    display:-ms-flexbox;
    display:flex;
    -ms-flex-direction:column;
    flex-direction:column
}
.product .product-list-item .ui-button {
    margin-bottom:.5rem
}
.product .product-grid-item.border-1 {
    border:1px solid var(--surface-d)
}
.product .product-grid-item .product-grid-item-top,
.product .product-grid-item .product-grid-item-bottom {
    display:-ms-flexbox;
    display:flex;
    -ms-flex-align:center;
    align-items:center;
    -ms-flex-pack:justify;
    justify-content:space-between
}
.product .product-grid-item img {
    width:75%;
    box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);
    margin:2rem 0
}
.product .product-grid-item .ui-rating {
    margin:0 0 1rem 0
}
.product .product-grid-item .product-grid-item-content {
    text-align:center
}
.product .product-grid-item .product-price {
    font-size:1.5rem;
    font-weight:600
}
@media screen and (max-width: 576px) {
    .product .product-list-item {
        -ms-flex-direction:column;
        flex-direction:column;
        -ms-flex-align:center;
        align-items:center
    }
    .product .product-list-item img {
        width:75%;
        margin:2rem 0
    }
    .product .product-list-item .product-list-detail {
        text-align:center
    }
    .product .product-list-item .product-price {
        align-self:center
    }
    .product .product-list-item .product-list-action {
        display:-ms-flexbox;
        display:flex;
        -ms-flex-direction:column;
        flex-direction:column
    }
    .product .product-list-item .product-list-action {
        margin-top:2rem;
        -ms-flex-direction:row;
        flex-direction:row;
        -ms-flex-pack:justify;
        justify-content:space-between;
        -ms-flex-align:center;
        align-items:center;
        width:100%
    }
}
.crud-demo .ui-datatable {
    margin-top:1rem
}
.crud-demo .product-image {
    width:100px;
    box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)
}
.crud-demo .ui-dialog .product-image {
    width:250px;
    margin:0 auto 2rem auto;
    display:block
}
.crud-demo .ui-dialog-footer .ui-button {
    min-width:6rem
}
.crud-demo .ui-datatable .ui-column-filter {
    display:none
}
.crud-demo .products-table-header {
    display:-ms-flexbox;
    display:flex;
    -ms-flex-align:center;
    align-items:center;
    -ms-flex-pack:justify;
    justify-content:space-between;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap
}
.crud-demo .edit-button.ui-button {
    margin-right:.5rem
}
.crud-demo .orders-subtable {
    padding:1rem
}
.crud-demo .products-table>.ui-datatable-tablewrapper>table>thead>tr>th:nth-child(1) {
    width:1rem
}
.crud-demo .products-table .ui-rating {
    display:inline-block
}
@media(max-width: 640px) {
    .products-table>.ui-datatable-tablewrapper>table>thead>tr>th:nth-child(2) .ui-column-title,
    .products-table>.ui-datatable-tablewrapper>table>tbody>tr>td:nth-child(2) .ui-column-title {
        display:none !important
    }
    .products-buttonbar {
        -ms-flex-direction:column;
        flex-direction:column
    }
    .products-buttonbar>div:last-child {
        margin-top:.5rem
    }
}
.cascadeselect-item.country-item .flag {
    width:18px;
    height:12px;
    margin-right:.5rem
}
.manymenu-advanced.ui-selectmanymenu .ui-selectlistbox-listcontainer .ui-selectlistbox-list .ui-selectlistbox-item>td:nth-child(2) {
    width:1rem;
    padding:0
}

.whatsapp-icon {
    position: fixed;
    bottom: 20px; /* Ajusta la posición vertical */
    right: 20px; /* Ajusta la posición horizontal */
    width: 80px; /* Ajusta el tamaño de la imagen */
    height: 80px; /* Ajusta el tamaño de la imagen */
    z-index: 1000; /* Asegúrate de que esté por encima de otros elementos */
}