/**
 * @PO Custom
 **/

/*------------------------------------*\
  PO BUTTON
\*------------------------------------*/
.po-button {
    font-size: 1rem;
    height: auto;
    outline: none;
    line-height: 25px;
    border: none;
    letter-spacing: 0.1rem;
    min-width: 100%;

    font-family: var(--font-family-theme);
    font-weight: var(--font-family-theme);
}

.po-button-modal-first-action {
    width: 100%;
    padding-right: 28px;
}

.po-modal-footer-align-right .po-button {
    width: 100%;
}

.po-modal-footer .po-button {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.po-button:enabled:active {
    outline-color: var(--color-white);
    border: none solid var(--color-primary);
}

.po-button:hover {
    border: none solid var(--color-primary);
}

.po-button-primary {
    box-shadow: none;
}

.po-button-danger {
    border: none solid var(--color-secondary);
    box-shadow: none;
}

.po-button:disabled {
    border: none solid var(--color-disabled);
}

.po-button[p-kind=tertiary] {
    padding: 0;
    border: none;
}

po-button[p-kind=tertiary], .po-button[p-kind=tertiary]:hover {
    border: none;
    background-color: transparent !important;
    color: var(--color-primary) !important;
}

.po-button[p-icon=po-icon-close] {
    padding: 0;
    border: none;
}

po-button[p-icon=po-icon-close], .po-button[p-icon=po-icon-close]:hover {
    border: none;
    background-color: transparent !important;
    color: transparent !important;
}

/*------------------------------------*\
  PO CLICKABLE
\*------------------------------------*/
#fnx-navbar-principal .po-clickable {
    cursor: default !important;
}

/*------------------------------------*\
  PO ICON
\*------------------------------------*/
po-navbar .po-menu-mobile,
po-navbar ~ .po-wrapper .po-menu-mobile {
    background-color: transparent;
    color: var(--color-white);
}

/*------------------------------------*\
  PO INPUT
\*------------------------------------*/
.po-input {
    border: none;
    box-shadow: none;
    border: 1.5px solid var(--color-gray);
    background: none;
}

.po-input:disabled {
    border: none;
    box-shadow: none;
    border: 1.5px solid var(--color-gray);
    color: var(--color-gray) !important;
    background-color: var(--color-white);
}

.po-input:focus {
    outline: none !important;
    border: 1.5px solid var(--color-gray);
}

.po-input:hover {
    background: none;
    border: 1.5px solid var(--color-gray);
}

po-input.ng-valid .po-input {
    border: none !important;
    border-bottom: 1.5px solid var(--color-primary) !important;
    color: var(--color-black);
}

po-input.ng-valid .po-input:focus {
    border: none !important;
    border-bottom: 1.5px solid var(--color-primary) !important;
    color: var(--color-black);
}

po-input.ng-invalid.ng-dirty .po-input {
    border: none !important;
    border-bottom: 1.5px solid var(--color-primary) !important;
    color: var(--color-black);
}

po-input.ng-valid .po-input:disabled {
    background-color: var(--color-white) !important;
    border-bottom: 1.5px solid var(--color-gray) !important;
}

/*------------------------------------*\
  PO NAVBAR
\*------------------------------------*/
.po-navbar-item-link,
.po-navbar-item-link:hover {
    color: var(--color-white);
}

#fnx-navbar-principal .po-navbar-items-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

/*------------------------------------*\
  PO PAGE
\*------------------------------------*/
.po-page-content {
    background-color: var(--color-gray-light);
    overflow-y: none;
    padding: 32px;
    display: flex;
    justify-content: center;
}

/*------------------------------------*\
  PO TOASTER
\*------------------------------------*/
.po-toaster-button-close po-icon {
    color: var(--color-primary);
    background: transparent !important;
    padding-left: 0.4rem;
}

.po-toaster-button-close po-icon:hover {
    color: var(--color-primary-dark-20);
    background: transparent !important;
    padding-left: 0.4rem;
}

.po-toaster-close {
    padding-right: 0rem;
    background: transparent !important;
}

/*------------------------------------*\
  PO WRAPPER
\*------------------------------------*/
.po-wrapper,
.po-wrapper-menu-panel {
    background-color: var(--color-gray-light);
}

/*------------------------------------*\
  MEDIA QUERIES
\*------------------------------------*/
@media screen and (max-width: 1366px) {
    .po-toaster .po-button:not(.po-button-sm) {
        margin-top: 0;
        margin-bottom: 0;
    }
}


/*------------------------------------*\
  PO MODAL
\*------------------------------------*/
body .po-modal.po-modal {
    height: 100%;
    left: 0;
    min-height: 100%;
    overflow-y: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000
}

body .po-modal .po-modal-container.po-modal-container {
    display: table;
    height: 100%;
    table-layout: fixed;
    width: 100%
}

body .po-modal .po-modal-overlay.po-modal-overlay {
    display: block;
    height: calc(100% + 1px);
    overflow-y: auto;
    position: fixed;
    width: 100%;
    background: #2c3739;
    opacity: 0.7;
}

body .po-modal .po-modal-vertical-align.po-modal-vertical-align {
    display: table-cell;
    text-align: center;
    vertical-align: middle
}

body .po-modal .po-modal-content.po-modal-content {
    background-color: var(--color-modal-background-color-content,var(--background));
    border: solid;
    border-radius: var(--border-radius);
    border-width: var(--border-width);
    border-color: var(--border-color);
    box-shadow: var(--shadow-modal-content,var(--shadow));
    display: inline-block;
    margin: 0 auto;
    position: relative;
    text-align: left
}

body .po-modal .po-modal-content.po-modal-content.po-modal-auto {
    max-width: 90%
}

body .po-modal .po-modal-sm.po-modal-sm {
    width: 40%
}

body .po-modal .po-modal-md.po-modal-md {
    width: 50%
}

body .po-modal .po-modal-lg.po-modal-lg {
    width: 60%
}

body .po-modal .po-modal-xl.po-modal-xl {
    width: 70%
}

body .po-modal .po-modal-auto.po-modal-auto {
    width: auto;
    max-width: 70%
}

body .po-modal .po-modal-header.po-modal-header {
    font-family: var(--font-family),sans-serif;
    font-size: 24px;
    line-height: 32px;
    max-width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid #dadedf;
    display: flex;
    justify-content: space-between
}

body .po-modal .po-modal-header.po-modal-header .po-icon.po-icon-close:before {
    font-size: 2rem
}

body .po-modal .po-modal-header.po-modal-header .po-button {
    padding: 0;
    margin: 0
}

body .po-modal .po-modal-title.po-modal-title {
    color: var(--color-neutral);
    display: flex;
    align-items: center;
    padding-right: var(--spacing-md)
}

body .po-modal .po-modal-title.po-modal-title po-icon {
    line-height: 0;
    padding-right: var(--spacing-xs)
}

body .po-modal .po-modal-auto.po-modal-auto .po-modal-title {
    max-width: 100%
}

body .po-modal .po-modal-body.po-modal-body {
    font-family: var(--font-family),sans-serif;
    font-size: 14px;
    line-height: 24px;
    color: var(--color-neutral-dark-60);
    overflow-x: auto;
    overflow-y: auto;
    text-align: left;
    max-height: calc(80vh - 101px);
    padding: var(--spacing-md) var(--spacing-2xl) var(--spacing-2xl) var(--spacing-md)
}

body .po-modal .po-modal-auto.po-modal-auto .po-modal-body {
    max-width: none
}

body .po-modal .po-modal-footer.po-modal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    overflow: auto;
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border-top: 1px solid #dadedf
}

body .po-modal .po-modal-footer-align-right.po-modal-footer-align-right .po-button {
    margin-left: 12px
}

body .po-modal .po-modal-footer-basic.po-modal-footer-basic {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 1rem
}

body .po-modal .po-modal-footer-basic.po-modal-footer-basic .po-button {
    margin-left: 0
}

@media screen and (max-width: 480px) {
    body .po-modal .po-modal-content.po-modal-content,
    body .po-modal .po-modal-lg.po-modal-lg,
    body .po-modal .po-modal-md.po-modal-md,
    body .po-modal .po-modal-sm.po-modal-sm,
    body .po-modal .po-modal-xl.po-modal-xl {
        width:90%
    }

    body .po-modal .po-modal-auto.po-modal-auto {
        width: 90%;
        max-width: none
    }
}

@media screen and (min-width: 481px) and (max-width:960px) {
    body .po-modal .po-modal-content.po-modal-content {
        width:80%
    }

    body .po-modal .po-modal-footer.po-modal-footer {
        float: right
    }

    body .po-modal .po-modal-footer-default.po-modal-footer-default {
        float: left
    }

    body .po-modal .po-modal-lg.po-modal-lg,
    body .po-modal .po-modal-md.po-modal-md,
    body .po-modal .po-modal-sm.po-modal-sm,
    body .po-modal .po-modal-xl.po-modal-xl {
        width: 80%
    }

    body .po-modal .po-modal-auto.po-modal-auto {
        width: auto;
        max-width: 80%
    }
}

@media (min-width: 961px) {
    body .po-modal .po-modal-sm.po-modal-sm {
        width:40%
    }

    body .po-modal .po-modal-md.po-modal-md {
        width: 50%
    }

    body .po-modal .po-modal-lg.po-modal-lg {
        width: 60%
    }

    body .po-modal .po-modal-xl.po-modal-xl {
        width: 70%
    }

    body .po-modal .po-modal-auto.po-modal-auto {
        width: auto;
        max-width: 70%
    }
}