@import "definitions";
.po-page{
    background-color: @color-background;
}

.po-menu-item-grouper-up,
.po-menu-item-grouper-up:hover {
    color: #fff;
}

a:hover{
    color: @color-hover;
}

.po-select-item-selected>.po-select-item {
    background-color: @color-base;
}

.po-menu-item {
    color: @color-linkmenu;
    border-top: 1px solid @color-menu-separator;
}

.po-menu {
    background-color: @color-menu;
}

.po-menu-mobile {
    background-color: #fbfbfb;
    color: @color-base;
}

.po-menu-logo {
    height: 60px;
}

.po-button {
    border: 1px solid @color-base;
    color: @color-base;
}

.po-button:hover {
    border: 1px solid @color-hover;
    color: @color-base;
}

.po-button-primary {
    color: @color-text-button;
    background: @color-base;
}

.po-button-primary:hover {
    color: @color-text-button;
}

.po-field-container-bottom {
    height: 0px !important;
}

.po-page-content {
    width: 100% !important;
    margin-top: 0px !important;
    padding: 0px 16px !important;
    height: ~"calc(100% - 55px)" !important;
}

.po-wrapper .po-page {
    display: inline-block;
    height: 100vh;
}

.po-select-mobile {
    width: 85% !important;
}

.po-select-content {
    margin-top: 0;
}
.po-field-icon,
.po-select-button,
.po-tab-button,
.po-switch-button-on > .po-icon-ok {
    color: @color-base;
}

.po-button-primary:hover{
    background: @color-hover;
}

.po-select-button:hover {
    border: 1px solid @color-base;
    color: @color-base;
}

.po-tab-button-active {
    box-shadow: inset 0 -3px 0 0 @color-highlight;
}

.po-switch-container-on {
    background-color: @color-base;
}

.po-page-content::-webkit-scrollbar-thumb {
    background-color: @color-base;
    border-radius: 10px;
}

.general {
    color: @color-base !important;
}

@media only screen and (min-width: 481px) and (max-width: 960px) {
    .po-menu-mobile {
        display: none !important;
        visibility: visible !important;
    }
}

@media only screen and (min-width: 961px) and (max-width: 1366px) {
    .po-page-content {
        margin-top: 0px !important;
        height: 100vh !important;
    }
    .po-menu-mobile {
        display: block !important;
        background-color: #FAFAFA;
        height: 47px;
        margin-left: 4px;
        z-index: 1 !important;
	}
	.po-visible-lg {
		display: unset;
	}
}

@media only screen and (min-width: 1367px) {
    .po-wrapper .po-page .po-page-content {
        width: calc(~"100vw - 256px") !important;
        height: 100vw !important;
    }
    .po-page-content {
        overflow-y: auto;
	}
	.po-visible-xl {
		display: unset;
	}
}

// STRANGE SIZE ADAPT
@media only screen and (min-width: 1201px) and (max-width: 1502px) {
    .po-menu-mobile {
        display: none !important;
    }
    .po-page-content {
        width: calc(~"100vw - 256px") !important;
    }
}

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    .po-page-content {
        margin-top: 0px !important;
        height: calc(~"100vh - 94px") !important;
    }
}

// datepicker
po-datepicker div po-field-container div div input {
    padding: 10px 15px 8px 4px !important;
}

po-datepicker div po-field-container div div input {
    padding: 10px 15px 8px 4px !important;
}

@media (max-width: 768px) {
    .po-span-datepicker {
        font-size: 20px !important;
        right: 25px !important;
        top: 20px !important;
    }
}

// modal-content
.po-modal[_ngcontent-c5] {
    font-family: 'Nunito Sans', sans-serif;
    position: relative;
    z-index: 100000 !important;
}

.po-modal-content[_ngcontent-c5] {
    height: 100%;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    box-shadow: 0px 4px 16px 0 rgba(7, 9, 9, 0.24);
    max-height: 90%;
    width: 80%;
}

.message-abono[_ngcontent-c2] {
    position: fixed;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
}

.po-modal {
    z-index: 2000 !important;
}

// opcional
.po-opcional {
    display: none !important;
}

// field
.po-field-title {
    .label-overflow & {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 60%;
        display: inline-block;
    }
}

@media(max-width:960px){
    .po-toaster{
        margin-bottom:60px;
    }
}
