/* import custom  CSS */
:deep(.dp__pointer) { 
    height: 34px !important; 
    margin-bottom: 2px !important;
}
:deep(.dp__input_icon_pad) {
    padding-inline-start: 41.2px !important;
}
:deep(.dp__input) { padding: 0px 0px 2px 0px !important; }
:root {
    /* Default EG colors and color states */
    --eg-primary-1: rgb(255, 255, 255);
    --eg-primary-2: #333;
    --eg-secondary-1: #090;
    --eg-secondary-2: rgb(2, 116, 2);

    --eg-bg-header-1: #383c44;
    --eg-bg-header-2: #1A1D20;

    --eg-input-disabled-bg: lightgray;
    --eg-input-checked-disabled-bg: #7fcc7f;
    --eg-hover: lightgray;

    --eg-error: red;

    /* Font variables */
    --eg-font-size: 14px;
    --eg-font-color: #333;
    --eg-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Liberation Sans, sans-serif,
        Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    --eg-text-monospace: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;

    --eg-font-size-mute: 1rem;
    --eg-font-color-mute: rgb(205, 206, 207);
}
/*****************  PLATFORM STYLES *****************/
/** DESKTOP */
#platform-desktop .addin-content { padding: 1% 1% 1% 0%; }
/** Collasped box header button */
#platform-desktop .btn-collaspe-trigger {
    border-right: 1px solid lightgray !important;
    border-left: 1px solid lightgray !important;
}
#platform-desktop footer { margin-bottom: 5px !important; }
#platform-desktop .footer-menu { 
    border-right: 1px solid lightgray !important;
    border-left: 1px solid lightgray !important;
}
/** Override card styling */
#platform-desktop .card { 
    border-right: 1px solid lightgray !important;
    border-left: 1px solid lightgray !important;
}
/** ONLINE (OWA) */
#platform-online .addin-content { padding: 0%; }
/** Collasped box header button */
#platform-online .btn-collaspe-trigger {
    border-left: none !important;
    border-right: none !important;
}
#platform-online .footer-menu { 
    border-right: none !important;
    border-left: none !important;
}
/** Override card styling */
#platform-online .card { 
    border-left: none !important;
    border-right: none !important;
}
/*****************  GENERAL STYLES *****************/
html, body {
    font-size: var(--eg-font-size) !important;
    font-family: var(--eg-font-family) !important;
    color: var(--eg-font-color);
}
p { margin: 0%; }
.fs-small { font-size: 12px !important; }
.fs-default { font-size: var(--eg-font-size) !important; }
/* Icon styling */
i { font-size: 16px !important; }
i.disabled { 
    color: var(--eg-input-disabled-bg) !important; 
    cursor: no-drop; 
    pointer-events: none !important;
}
.fa-spin { margin-right: 5px !important; }
/* Text styleling */
.text-success { color: var(--eg-secondary-1) !important; }
.text-danger { color: var(--eg-error) !important; }
/* Background styling */
.bg-success { background-color: var(--eg-secondary-1) !important; }
.bg-light {
    background-color: white;
    border: 1px solid lightgray;
}
/* Cursor styling */
.cursor-pointer { cursor: pointer; }
/* Badge styling */
.badge {
    font-weight: 500 !important;
}
.badge i { font-size: var(--eg-font-size) !important; }
.badge.disabled {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    filter: brightness(0.9) saturate(0.8) !important;
}
/** Padding (match bootstrap) */
.pr-1 { padding-right: .25rem; }
.pr-2 { padding-right: .5rem; }
.pr-3 { padding-right: .1rem; }
.pr-4 { padding-right: .5rem; }
/** Override vuepic default styles (Datepicker) **/
.dp__active_date,
.dp__overlay_cell_active,
.dp__action_select {
    background-color: var(--eg-secondary-1) !important;
    border-color: var(--eg-secondary-1) !important;
    color: white !important;
}
.dp__today, .dp__action_button:hover { border-color: var(--eg-secondary-1) !important; }
.dp__icon:hover { color: var(--eg-secondary-1) !important; }

#app > .addin-content { padding: 0%;
}

    /* Apply additional padding for screens larger than 345px */
@media (min-width: 346px) {
#app > .addin-content { padding: 1% 1% 1% 0%;
}
}