/*----------*----------*----------*----------*---------- Fonts */

@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;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*----------*----------*----------*----------*---------- Reset */
*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: inherit;
}


/*----------*----------*----------*----------*---------- General Styles */
:root {
    /* 62.5% of 16px browser font size is 10px */
    --font-size: 62.5%;
    /*----------*----------*----------* Website Theme */
    /*----------*----------*----------* Website Theme */

    --bg-color-brand: #BE1428;
    /*---------------*** Background  ****** -----*/
    --bg-color-primary: #FFFFFF;
    --bg-color-primary-m: #FFFFFF80; /* With 50% opacity */

    --bg-color-secondary: #0c0909; /* we will be using for the modal background */

    --bg-color-tertiary: #ECEBEB;
    --bg-color-footer: #444444;
    --bg-color-footer-50: #44444480;
    --bg-color-footer-90: #444444E7;
    --bg-color-lightgray: #F6F6F6;
    --bg-color-gray: #ECEBEB;
    --bg-color-profile-menu: #F4F4F6;
    --bg-color-green: #E2FBE7;
    /*------------*** Border **** ------------*/
    --border-color: #D5D5D5;
    --border-color-green: #ACE5B7;
    --border-color-menu: #DDCECE;
    /*-----------*** buttons *** ------------*/
    --btn-border-color-neutral: #C2C0C0;
    --btn-color-blue-filter: #1492E6;
    --btn-color-green: #24AE4C;
    --btn-color-orange: #CB8202;
    --btn-color-red: #C90B0B;
    --btn-color-black: #333333;
    --btn-color-blue: #329CE2;
    /*------------**** Card *** -------------*/
    /*------------**** Accordion *** -------------*/
    --accordion-color-header: #F2F2F2;
    /*----------------**** Text Color **** ------*/
    --text-color-title: #575555;
    --text-color-content: #444444;
    --text-color-card-title: #555555;
    --text-color-card-subtitle: #333333;
    --text-color-green: #179430;
    --text-color-orange: #CB8202;
    --text-color-white: #FFFFFF;
    --text-color-white-50: #FFFFFF80; /* With 50% opacity */
    --text-color-section-title: #A80B1D;
    --text-color-lightgray: #F2F2F2;
    --text-color-pebble: #777777;
    /*----------------**** Hyper link **** ------*/
    --border-link-card-color: #A4767C;
    --link-color-red: #C42E2E;
    --icon-color-green: #1FBB3E;
    --icon-color-black: #444444;
    /*----------*----------*----------* Padding */
    /* 
        --------------------- Sizing Nature
        d     = dynamic
        st    = static

        --------------------- Sizing

        l     = large
        m     = medium
        s     = small
        xs    = extra small
        c     = customized

          
        --------------------- Orientation
        v  = vertical   (top & bottom)
        h  = horizontal (right & left)
  */
    /* Dynamic */
    --padding-d-l-v: calc(2rem + 12vh);
    --padding-d-l-h: calc(2rem + 12vw);
    --padding-d-mc-v: calc(1rem + 4vh);
    --padding-d-mc-h: calc(1rem + 4vw);
    --padding-d-m-v: calc(1rem + 3vh);
    --padding-d-m-h: calc(1rem + 3vw);
    --padding-d-s-h: calc(1rem + 1vw);
    --padding-d-s-v: calc(1rem + 1vh);
    --padding-d-xs-h: calc(0.3rem + 1vw);
    --padding-d-xs-v: calc(0.2rem + 1vh);
    /* Static */
    --padding-st-xxl-h: 6.5rem; /*Used only for the header*/
    --padding-st-xl-h: 5rem;
    --padding-st-xl-v: 3rem;
    --padding-st-l-h: 3rem;
    --padding-st-l-v: 1.8rem;
    --padding-st-m-h: 2.5rem;
    --padding-st-m-v: 1.5rem;
    --padding-st-s-h: 1.0rem;
    --padding-st-s-v: 1.0rem;
    --padding-st-xs-v: 0.5rem;
    --padding-st-xs-h: 0.5rem;
    --padding-st-xxs-v: 0.3rem;
    --padding-st-xxs-h: 0.3rem;
    /*----------*----------*----------* Typography */
    /* 
      --------------------- Sizing Nature
      d     = dynamic
      st    = static
      
      --------------------- Sizing
      xl    = extra large
      l     = large
      m     = medium
      s     = small
      xs    = extra small
      c     = customized
      
      --------------------- Family
      font-family: 'Poppins', sans-serif;
      
*/
    font-family: 'Poppins', sans-serif;
    /* Dynmaic */
    --font-size-d-lc: calc(3rem + 3.5vw);
    --font-size-d-l: calc(2rem + 3vw);
    --font-size-d-mc: calc(2rem + 2.5vw);
    --font-size-d-m: calc(1rem + 2vw);
    --font-size-d-sc: calc(1rem + 1.2vw);
    --font-size-d-s: calc(1rem + 1vw);
    --font-size-d-xsc: calc(1rem + 0.5vw);
    --font-size-d-xs: calc(0.8rem + 0.5vw);
    /* Static */
    --font-size-st-xl: 4rem;
    --font-size-st-lc: 3.4rem;
    --font-size-st-l: 3rem;
    --font-size-st-mc: 2.5rem;
    --font-size-st-m: 2rem;
    --font-size-st-sc: 1.8rem;
    --font-size-st-s: 1.4rem;
    --font-size-st-xsc: 1rem;
    --font-size-st-xs: 0.8rem;
    /* Components Font Sizes */



    --fs-st-xlc: 2.4rem;
    --fs-st-xl: 2.2rem;
    --fs-st-lgc: 1.9rem;
    --fs-st-lg: 1.8rem;
    --fs-st-mdc: 1.7rem;
    --fs-st-md: 1.6rem;
    --fs-st-smc: 1.5rem;
    --fs-st-sm: 1.4rem;
    --fs-st-xsc: 1.3rem;
    --fs-st-xs: 1.2rem;
    /* Family */
    /* Width */
    /*--------------------- Sizing Nature
    d     = dynamic
    st    = static
    
    --------------------- Sizing
    xl    = extra large
    l     = large
    m     = medium
    s     = small
    xs    = extra small
    c     = customized
    
    */
    /* Dynamic */

    --w-d-xs: calc(3rem + 3vw);
    --w-d-xsc: calc(3.5rem + 3.5vw);
    --w-d-sm: calc(5rem + 5vw);
    --w-d-smc: calc(7rem + 7vw);
    --w-d-md: calc(10rem + 10vw);
    --w-d-mdc: calc(12rem + 12vw);
    --w-d-lg: calc(14rem + 14vw);
    --w-d-lgc: calc(20rem + 20vw);
    /* Static */

    --w-st-xxs: 0.5rem;
    --w-st-xxsc: 1rem;
    --w-st-xs: 2rem;
    --w-st-xsc: 2.5rem;
    --w-st-sm: 4rem;
    --w-st-smc: 5rem;
    --w-st-md: 8rem;
    --w-st-mdc: 10rem;
    --w-st-lg: 20rem;
    --w-st-lgc: 25rem;
    --w-st-main-container-max: 80rem;
    --w-st-main-container-min: 37rem;
    --w-st-component-mobile: 35rem;
    /************ Font Weight **********/
    --font-weight-normal: 400;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;
    --font-family: 'Poppins', sans-serif;
}

html {
    font-size: var(--font-size);
}

body {
    background-color: var(--bg-color-primary);
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
}



/*----------*----------*----------*----------*---------- Overall Layout */

.page-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    align-items: center;
}

.main {
    padding: var(--padding-st-s-h) var(--padding-st-s-v) var(--padding-st-xl-h) var(--padding-st-s-v);
    flex-grow: 1;
    max-width: var(--w-st-main-container-max);
    min-width: var(--w-st-main-container-min);
    width: 100%;
}
.api-default-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.api-default-page-text {
    font-size: 2.5rem;
    color: var(--text-color-pebble);
}

.overall-layout {
    grid-column: container-start / container-end;
}


/*----------*----------*----------* Section Title */
.page__title {
    font-size: var(--fs-st-xl);
    color: var(--text-color-title);
    font-weight: var(--font-weight-semi-bold);
}

/*----------*----------*----------* Section Para */
.section__para {
    font-size: var(--fs-st-lg);
    color: var(--text-color-content);
}

.pointer {
    cursor: pointer;
}
/*---------------- SVG Icons---------------- */
/*-------------------------------------- Size ---------------------------- */
.svg-icon-lg, .svg-icon-lg svg {
    width: 11rem;
    height: 11rem;
}

.svg-icon-md, .svg-icon-md svg {
    width: 4rem;
    height: 4rem;
}

.svg-icon-sm, .svg-icon-sm svg {
    width: 3rem;
    height: 3rem;
}

.svg-icon-md-sm svg {
    width: 3.5rem;
    height: 3.5rem;
}

/*-------------------------------------- Fill & Stroke ---------------------------- */

.svg-icon-red svg path {
    fill: var(--btn-color-red);
    stroke: var(--btn-color-red);
}

.svg-icon-black svg path {
    fill: var(--icon-color-black);
    stroke: var(--icon-color-black);
}
/*----------*----------*----------* Buttons */
.btn {
    border-radius: 0.6rem;
    font-weight: var(--font-weight-semi-bold);
    background-color: var(--bg-color-primary);
    font-size: var(--fs-st-md);
    text-align: center;
    cursor: pointer;
    border: 1px solid var(--btn-border-color-neutral);
}

/* Sizing */
.btn-sm {
    font-size: var(--fs-st-smc);
    width: 13rem;
    font-weight: var(--font-weight-semi-bold);
    border-width: 2px;
    padding: 0.2rem;
}

.btn-md {
    width: 15rem;
    font-weight: var(--font-weight-semi-bold);
    border-width: 2px;
    padding: 0.6rem
}

.btn-lg {
    font-size: var(--fs-st-mdc);
    width: 18rem;
    font-weight: var(--font-weight-semi-bold);
    border-width: 2px;
    padding: 0.6rem;
}



/* Color */


.btn-green {
    color: var(--btn-color-green);
    border-color: var(--btn-color-green);
}

.btn-red {
    color: var(--btn-color-red);
    border-color: var(--btn-color-red);
}

.btn-orange {
    color: var(--btn-color-orange);
    border-color: var(--btn-color-orange);
}

.btn-black {
    color: var(--btn-color-black);
    border-color: var(--btn-color-black);
}

.text-green {
    color: var(--text-color-green);
}

.text-orange {
    color: var(--text-color-orange);
}

.no-display {
    display: none;
}

/*----------*----------*----------*----------*---------- Header */



.header {
    background-color: var(--bg-color-brand);
    display: grid;
    grid-template-columns: [header-start] repeat(7, minmax(min-content,1fr)) [header-end];
    grid-template-rows: repeat(2, minmax(min-content, 1fr));
    justify-content: center;
    justify-items: center;
    padding: var(--padding-st-l-v) var(--padding-st-xxl-h);
    height: 9rem;
    width: 100%;
    min-width: var(--w-st-component-mobile); 
}

.header__logo {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    justify-self: start;
}

    .header__logo img {
        object-fit: cover;
    }

.header__mobile-logo {
    grid-column: 4 / 5;
    display: none;
}

    .header__mobile-logo img {
        object-fit: cover;
    }

.header__user {
    grid-column: 6 / -1; 
    grid-row: 1 / 3;
    justify-self: end;
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: center;
    font-size: var(--font-size-st-m);
    color: var(--bg-color-primary);
}

.header__user--initials {
    position: relative;
    /* Center the content */
    align-items: center;
    display: flex;
    justify-content: center;
    cursor: pointer;
    /* Colors */
    background-color: var(--bg-color-primary);
    color: var(--bg-color-brand);
    /* Rounded border */
    border-radius: 50%;
    height: 5rem;
    width: 5rem;
}

.header__user-profile-icon {
    cursor: pointer;
    display: none;
    position: relative;
}

    .header__user-profile-icon i {
        color: var(--text-color-white);
        font-size: var(--font-size-st-mc);
    }

.header__profile-menu--items {
    position: absolute;
    display: flex;
    gap: 2rem;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    padding-top: 3rem;
    padding-bottom: 6rem;
    font-size: var(--font-size-st-sc);
    color: var(--text-color-content);
    background-color: var(--bg-color-profile-menu);
    border: 1px solid var(--border-color-menu);
    width: 35rem;
    right: 0;
    z-index: 2;
}

.header__profile-menu--items__item {
    display: flex;
    gap: 2rem;
    font-size: var(--font-size-st-m);
    font-weight: var(--font-weight-semi-bold);
    border-right: 1.5rem solid var(--bg-color-profile-menu);
    width: 100%;
    text-align: center;
    justify-content: end;
    align-items: center;
    transition: all ease-out 0.3s;
    padding-right: 3rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

    .header__profile-menu--items__item:hover {
        border-right: 1.5rem solid var(--bg-color-brand);
        background-color: var(--bg-color-primary);
        cursor: pointer;
    }



.header__logo {
    font-size: var(--font-size-st-m);
}












/*--------------------------------------------------------------- Footer */

.footer {
    /*grid-row: 9 / -1;*/
    background-color: var(--bg-color-footer);
    color: var(--text-color-white);
    /*position:absolute;*/
    width: 100%;
}

.footer__items {
    font-size: var(--fs-st-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: var(--padding-st-s-v) var(--padding-st-s-h);
    background-color: var(--bg-color-footer);
}

.footer__items--item a {
    color: var(--text-color-white);
}

    .footer__items--item a:hover {
        text-decoration: underline;
    }

.footer__items--item__codes {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: var(--fs-st-xs);
}

.footer__items--item__links {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: var(--fs-st-sm);
}

.footer__items--item__codes li {
    padding-right: var(--padding-st-s-h);
    border-right: 1px solid var(--text-color-white);
}

    .footer__items--item__codes li:last-child {
        border-right: none;
    }

.footer__items--item__links--link {
    padding-right: var(--padding-st-s-h);
    border-right: 1px solid var(--text-color-white);
}

    .footer__items--item__links--link:last-child {
        border-right: none;
    }

.footer__items--item__social-media {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

    .footer__items--item__social-media i {
        font-size: var(--font-size-st-m);
        color: var(--text-color-white);
        background-color: var(--bg-color-footer);
        position: relative;
    }

        .footer__items--item__social-media i::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--bg-color-footer-50);
            z-index: 1;
            transition: all 0.25s ease-in-out;
        }

        .footer__items--item__social-media i:hover::after {
            z-index: -1;
        }

    .footer__items--item__social-media i {
        font-size: var(--font-size-st-m);
    }

.footer__items--item__imgs {
    display: flex;
    gap: 4rem;
    justify-content: center;
    align-items: center;
}

.footer__items--item__SAGO {
    display: none;
    position: relative;
}

    .footer__items--item__SAGO::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--bg-color-footer-50);
        z-index: 1;
        transition: all 0.25s ease-in-out;
    }

    .footer__items--item__SAGO:hover::after {
        z-index: -1;
    }

    .footer__items--item__SAGO img {
        max-width: 100%;
        height: auto;
        object-fit: cover;
    }

.footer__items--item__SA img {
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}

.footer__items--item__SA {
    position: relative;
}

    .footer__items--item__SA::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--bg-color-footer-50);
        z-index: 1;
        transition: all 0.25s ease-in-out;
    }

    .footer__items--item__SA:hover::after {
        z-index: -1;
    }









/*----------*----------*----------*----------*----------General Utility Classes  */
/*--------------------------------- Padding  */


.padding-st-h-03 {
    padding: 0 var(--padding-st-xxs-h);
}

.padding-st-v-03 {
    padding: var(--padding-st-xxs-v) 0;
}


.padding-st-h-05 {
    padding: 0 var(--padding-st-xs-h);
}

.padding-st-v-05 {
    padding: var(--padding-st-xs-v) 0;
}


/*--------------------------------- Width */

/* Dynamic */
.w-d-xs {
    width: var(--w-d-xs);
}

.w-d-xsc {
    width: var(--w-d-xsc);
}

.w-d-sm {
    width: var(--w-d-sm);
}

.w-d-smc {
    width: var(--w-d-smc);
}


.w-d-md {
    width: var(--w-d-md);
}

.w-d-mdc {
    width: var(--w-d-mdc);
}

.w-d-lg {
    width: var(--w-d-lg);
}

.w-d-lgc {
    width: var(--w-d-lgc);
}

/* Static */
.w-st-xs {
    width: var(--w-st-xs);
}


.w-st-xsc {
    width: var(--w-st-xsc);
}

.w-st-sm {
    width: var(--w-st-sm);
}

.w-st-smc {
    width: var(--w-st-smc);
}

.w-st-md {
    width: var(--w-st-md);
}

.w-st-mdc {
    width: var(--w-st-mdc);
}

.w-st-lg {
    width: var(--w-st-lg);
}

.w-st-lgc {
    width: var(--w-st-lgc);
}

.link {
    color: var(--link-color-red);
    text-decoration: underline;
}

.free-call {
    color: inherit;
}

    .free-call:hover {
        text-decoration: underline;
    }

.icon-green {
    color: var(--icon-color-green);
}


.account-container .dashboard-card.small {
    height: auto;
    min-height: 40rem;
}

.account-history .e-listview {
    border: 0;
}

.account-history .e-listview:not(.e-list-template) .e-list-item {
    padding-top: 1.3rem;
    padding-bottom: 1.7rem;
    height: auto;
}

.account-history .e-list-item.e-focused {
    background: var(--bg-color-primary) !important;
    color: var(--text-color-card-subtitle) !important;
}

@media (max-width: 900px) {
    .account-container .card.account-balance .dashboard-card {
        width: 100%;
    }
}

.staff.cards .dashboard-card {
    width: 100%;
}