@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600&display=swap');

/* font-family: 'Poppins', sans-serif; */


:root {
    /* Font size variables */
    --base-font-size: 16;
    --font-device-val: 1.1;

    /* font-sizes 1.1 */
    --font-5pt: calc(1rem * ((5 * var(--font-device-val)) / var(--base-font-size)));
    --font-5-5pt: calc(1rem * ((5.5 * var(--font-device-val)) / var(--base-font-size)));
    --font-6pt: calc(1rem * ((6 * var(--font-device-val)) / var(--base-font-size)));
    --font-7pt: calc(1rem * ((7 * var(--font-device-val)) / var(--base-font-size)));
    --font-8pt: calc(1rem * ((8 * var(--font-device-val)) / var(--base-font-size)));
    --font-9pt: calc(1rem * ((9 * var(--font-device-val)) / var(--base-font-size)));
    --font-10pt: calc(1rem * ((10 * var(--font-device-val)) / var(--base-font-size)));
    --font-11pt: calc(1rem * ((11 * var(--font-device-val)) / var(--base-font-size)));
    --font-12pt: calc(1rem * ((12 * var(--font-device-val)) / var(--base-font-size)));
    --font-13pt: calc(1rem * ((13 * var(--font-device-val)) / var(--base-font-size)));
    --font-14pt: calc(1rem * ((14 * var(--font-device-val)) / var(--base-font-size)));
    --font-15pt: calc(1rem * ((15 * var(--font-device-val)) / var(--base-font-size)));
    --font-16pt: calc(1rem * ((16 * var(--font-device-val)) / var(--base-font-size)));
    --font-18pt: calc(1rem * ((18 * var(--font-device-val)) / var(--base-font-size)));
    --font-19pt: calc(1rem * ((19 * var(--font-device-val)) / var(--base-font-size)));
    --font-20pt: calc(1rem * ((20 * var(--font-device-val)) / var(--base-font-size)));
    --font-21pt: calc(1rem * ((21 * var(--font-device-val)) / var(--base-font-size)));
    --font-22pt: calc(1rem * ((22 * var(--font-device-val)) / var(--base-font-size)));
    --font-24pt: calc(1rem * ((24 * var(--font-device-val)) / var(--base-font-size)));
    --font-25pt: calc(1rem * ((25 * var(--font-device-val)) / var(--base-font-size)));
    --font-26pt: calc(1rem * ((26 * var(--font-device-val)) / var(--base-font-size)));
    --font-28pt: calc(1rem * ((28 * var(--font-device-val)) / var(--base-font-size)));
    --font-32pt: calc(1rem * ((32 * var(--font-device-val)) / var(--base-font-size)));
    --font-36pt: calc(1rem * ((36 * var(--font-device-val)) / var(--base-font-size)));
    --font-41pt: calc(1rem * ((41 * var(--font-device-val)) / var(--base-font-size)));
    --font-46pt: calc(1rem * ((46 * var(--font-device-val)) / var(--base-font-size)));
    --font-52pt: calc(1rem * ((52 * var(--font-device-val)) / var(--base-font-size)));
    --font-60pt: calc(1rem * ((60 * var(--font-device-val)) / var(--base-font-size)));
    --font-65pt: calc(1rem * ((65 * var(--font-device-val)) / var(--base-font-size)));
    --font-70pt: calc(1rem * ((70 * var(--font-device-val)) / var(--base-font-size)));
    --font-75pt: calc(1rem * ((75 * var(--font-device-val)) / var(--base-font-size)));
    --font-80pt: calc(1rem * ((80 * var(--font-device-val)) / var(--base-font-size)));
    --font-90pt: calc(1rem * ((90 * var(--font-device-val)) / var(--base-font-size)));
    --font-92pt: calc(1rem * ((92 * var(--font-device-val)) / var(--base-font-size)));
    --font-95pt: calc(1rem * ((95 * var(--font-device-val)) / var(--base-font-size)));
    --font-107pt: calc(1rem * ((107 * var(--font-device-val)) / var(--base-font-size)));

    font-family: 'Poppins', sans-serif;
    --ion-font-family: 'Poppins', sans-serif !important;

    /* color variables */
    --cancel-bg-color: #ffe2e2;
    --cancel-color: #6f0a0a;
}

.font-7pt {
    font-size: var(--font-7pt);
}

.font-5pt {
    font-size: var(--font-5pt);
}

.font-5-5pt {
    font-size: var(--font-5-5pt);
}

.font-8pt {
    font-size: var(--font-8pt);
}

.font-9pt {
    font-size: var(--font-9pt);
}

.font-10pt {
    font-size: var(--font-10pt);
}

.font-11pt {
    font-size: var(--font-11pt);
}

.font-12pt {
    font-size: var(--font-12pt);
}

.font-13pt {
    font-size: var(--font-13pt);
}

.font-14pt {
    font-size: var(--font-14pt);
}

.font-15pt {
    font-size: var(--font-15pt);
}

.font-16pt {
    font-size: var(--font-16pt);
}

.font-18pt {
    font-size: var(--font-18pt);
}

.font-19pt {
    font-size: var(--font-19pt);
}

.font-20pt {
    font-size: var(--font-20pt);
}

.font-21pt {
    font-size: var(--font-21pt);
}

.font-22pt {
    font-size: var(--font-22pt);
}

.font-24pt {
    font-size: var(--font-24pt);
}

.font-25pt {
    font-size: var(--font-25pt);
}

.font-26pt {
    font-size: var(--font-26pt);
}

.font-28pt {
    font-size: var(--font-28pt);
}

.font-30pt {
    font-size: var(--font-30pt);
}

.font-32pt {
    font-size: var(--font-32pt);
}

.font-36pt {
    font-size: var(--font-36pt);
}

.font-41pt {
    font-size: var(--font-41pt);
}

.font-46pt {
    font-size: var(--font-46pt);
}

.font-52pt {
    font-size: var(--font-52pt);
}

.font-60pt {
    font-size: var(--font-60pt);
}

.font-65pt {
    font-size: var(--font-65pt);
}

.font-70pt {
    font-size: var(--font-70pt);
}

.font-75pt {
    font-size: var(--font-75pt);
}

.font-80pt {
    font-size: var(--font-80pt);
}

.font-90pt {
    font-size: var(--font-90pt);
}

.font-92pt {
    font-size: var(--font-92pt);
}

.font-95pt {
    font-size: var(--font-95pt);
}

.font-107pt {
    font-size: var(--font-107pt);
}

.icon-btn {
    height: 3rem;
    width: 3rem;
}

ion-toggle {
    padding-inline: 0;
}

.p-relative {
    position: relative;
}

.bg-none {
    --background: transparent;
}

ion-card {
    box-shadow: 0px 4px 30px rgba(95, 94, 231, .07) !important;
}

.inner-content {
    padding: 15px 15px;
}

ion-card-header ion-card-title,
.card-heading {
    font-size: var(--font-15pt);
    color: var(--card-title) !important;
    font-weight: 500;
}

.fw100 {
    font-weight: 100;
}

.fw200 {
    font-weight: 200;
}

.fw300 {
    font-weight: 300;
}

.fw400 {
    font-weight: 400;
}

.fw500 {
    font-weight: 500;
}

.fw600 {
    font-weight: 600;
}

.fw700 {
    font-weight: 700;
}

.fw900 {
    font-weight: 900;
}

/* Mobile devices (576px and down) */
@media only screen and (max-width: 576px) {}

/* Ipad devices (768px and up) */
@media only screen and (min-width: 576px) and (max-width: 768px) {}

/* Ipad devices (768px and up) */
@media only screen and (min-width: 768px) and (max-width: 992px) {}

.card-custom {
    display: flex;
    align-items: stretch !important;
    flex-direction: column;
    height: 100%;
    border-radius: 0.3rem;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

.content-ltr {
    --background: var(--artical-background-page);
}


.sidebar ion-content {
    --background: var(--ion-color-secondary);
}

.sideMenu .menuItem ion-label {
    font-size: var(--font-12pt);
    color: var(--ion-color-secondary-text);
    text-transform: capitalize;
    font-weight: 500;
}

.sideMenu .menuItem ion-icon {
    font-size: var(--font-16pt);
    color: var(--ion-color-secondary-text);
}

.sideMenu ion-item:hover {
    --background-hover: var(--ion-color-primary);
    --background-hover-opacity: 0.06;
}

.sideMenu ion-item:hover ion-label {
    color: var(--white);
}

.sidebar ion-toolbar {
    --background: var(--ion-color-primary);
}

.sidebar ion-toolbar ion-title {
    padding: 1.2rem 0rem 0;
    line-height: 0;
}


.chartBoard {
    padding-inline: 0.7rem;
    padding-block: 0.7rem;
}

.cancelled-row {
    --background-color: var(--cancel-bg-color) !important;
    background-color: var(--cancel-bg-color) !important;
    color: var(--cancel-color) !important;
}

.cancelled-row-highlited {
    --background-color: var(--cancel-color) !important;
    background-color: var(--cancel-color) !important;
    color: var(--white) !important;
}

ion-list.nav-list ion-item.selected {
    color: var(--white) !important;
    border-bottom: 3px solid var(--ion-color-secondary-text);
}

ion-list ion-item.selected {
    /* background-color: #1866f0 !important;
    --background-color: #1866f0 !important;
    --ion-item-background: #1866f0 !important; */
    /* border-bottom: 2px solid #8ff6ff !important; */
}


ion-list.nav-list ion-item {
    color: rgb(229, 218, 218) !important;
    background-color: var(--ion-color-primary) !important;
    --background-color: var(--ion-color-primary) !important;
    --ion-item-background: var(--ion-color-primary) !important;
}

/* .sideMenu ion-list:has(.selected) {
    border-top: 2px solid #8ff6ff !important;
} */

.ag-cell-value:has(.Un-scheduled) {
    color: var(--white);
    background-color: #666666 !important;
    --background-color: #666666 !important;
}

.ag-cell-value:has(.scheduled) {
    background-color: #92ff92 !important;
    --background-color: #92ff92 !important;
}



.nav-list {
    padding: 0;
}

.d-flex {
    display: flex;
}

.d-col {
    flex-direction: column;
}

.ag-root-wrapper {
    border: transparent !important;
}

ion-button {
    --padding-end: 10px;
    --padding-start: 10px;
    --box-shadow: none;
    /* color: var(--white); */
}

ion-select {
    --padding-end: 10px;
    --padding-start: 10px;
    --box-shadow: none;
    --padding-start: 0;
}

.ag-cell-value:has(.dispatch-yellow),
.dispatch-yellow {
    color: black;
    background: yellow;
}

.dispatch-red {
    background: var(--ion-color-danger);
    color: var(--white);
}

.deactivated-row {
    color: var(--white) !important;
    background-color: var(--ion-color-danger) !important;
}

/* .dropDownButton on-fab-list {
    display: contents;
} */

ion-header.page-title-header {
    box-shadow: none;
    border: 1px solid var(--artical-color-border);
}

ion-header.page-title-header ion-toolbar {
    padding-top: var(--ion-safe-area-top, 0);
    border-bottom: 2px solid var(--ion-color-primary);
    max-width: max-content;
    margin: auto;
    --background: transparent;
}

ion-header.page-title-header ion-toolbar ion-title {
    color: var(--ion-color-primary);
    font-size: 14px;
}

ion-header.page-title-header .heading-row {
    justify-content: center;
}

ion-header.page-title-header .heading-row ion-button {
    justify-content: center;
    --box-shadow: none;
    margin: 0;
    min-height: 56px;
    background: transparent;
    --background: transparent;
    color: var(--grey-txt);
    font-size: 14px;
    --padding-start: 12px;
    --padding-end: 12px;
}

ion-header.page-title-header .heading-row ion-button.selected {
    border-bottom: 2px solid var(--ion-color-primary);
    color: var(--ion-color-primary);
}


.labelTxt {
    font-size: var(--font-14pt);
    font-weight: 600;
    color: var(--black-color);
}

.label-text-wrapper {
    font-size: var(--font-14pt);
    color: var(--ion-label-color) !important;
    font-weight: 500 !important;
}

.alert-button-inner {
    justify-content: center !important;
}