/* Fonts */

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

/* General */

body {
    margin: 0;
    padding: 0;
    /* overflow: hidden; */
    font-family: "Poppins", sans-serif;
    background: #222;
    height: 100vh;
    width: 100vw;
    min-height: -webkit-fill-available;
}

html {
    height: -webkit-fill-available;
}

* {
    box-sizing: border-box;
}

:root {
    --lightBlue: #06ADEF;
    --mediumBlue: #0074A7;
    --darkBlue: #2B3A67;
    --orange: #FF9F1C;
    --yellow: #FFE736;
    --grey0: #f1f3f8;
    --grey1: #d6e0f0;
    --grey2: #8d93ab;
    --grey3: #393b44;
}

.BTN {
    cursor: pointer;
}

/* Top Bar */

#topBar {
    width: 100vw;
    height: 8vh;
    background: var(--darkBlue);
    position: fixed;
    top: 5vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-radius: 25px 25px 0 0;
}

#topBar .BTN {
    display: flex;
    align-items: center;
    justify-content: center;
}

#backBTN {
    width: 8vh;
    height: 100%;
    /* background: orange; */
}

#menuLogo {
    width: 40vw;
    height: 100%;
    background: orange;
    background-image: url("/images/Barclays-logo.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

#menuBTN {
    width: 8vh;
    height: 100%;
    background: orange;
}

/* Status Bar */

#statusBar {
    width: 100vw;
    height: 5vh;
    background: black;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
}

#statusBarTime {
    color: white;
    width: 25vw;
    text-align: center;
    font-weight: 500;
}

#statusBarIcons {
    width: 20vw;
    height: 5vh;
    margin-right: 3vw;
    background-image: url("/images/statusBarIcons.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* Slide Up Container */

#slideUpContainer {
    width: 100vw;
    height: 100vh;
    position: absolute;
    overflow: hidden;
    top: 0;
    z-index: 1000;
    pointer-events: none;
}

#slideUpHolder {
    width: 100vw;
    height: 95vh;
    position: relative;
    top: 100vh;
    transition: top 0.5s ease-out;
    background: var(--lightBlue);
}

#slideUpHandle {
    width: 100vw;
    height: 5vh;
    background: var(--grey2);
}

/* Main Body */

#bodyContainer {
    width: 100vw;
    height: 100vh;
    /* margin-top: 5vh; */
    min-height: -webkit-fill-available;
    /* background: orangered; */
    background: #dddddd;
    display: flex;
    flex-direction: column;
    /* justify-content: space-around; */
    border-radius: 25px 25px 0 0;
}

.section-3 {
    height: 31vh;
    width: 100vw;
}

#buttonHolder {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    width: 100vw;
}

#buttonHolder .BTN {
    width: 25vw;
    height: 25vw;
    background: var(--lightBlue);
    z-index: 1;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#buttonHolder #selectedBG {
    position: absolute;
    width: 28vw;
    height: 28vw;
    background: var(--grey2);
    border-radius: 15px;
}

#modeDescHolder {
    display: flex;
    align-items: center;
    justify-content: center;
}

#modeDesc {
    width: 80vw;
    font-size: 4vw;
}

/* 0000 */

#logoHolder0000 {
    margin-left: 20vw;
    width: 60vw;
    height: 60vw;
    background-image: url("/images/Barclays-logo-Icon.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

#logoTextHolder0000 {
    margin-left: 25vw;
    width: 50vw;
    height: 8vh;
    background-image: url("/images/Barclays-logo-Text.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

#loginButtonsHolder0000 {
    width: 100vw;
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10vw;
    padding-bottom: 4vw;
}

#loginButtonsHolder0000 input {
    width: 100%;
    margin-bottom: 3vw;
    height: 5vh;
    border-radius: 25px;
    padding-left: 5vw;
    border: 0;
}

#loginButtonsHolder0000 button {
    width: 100%;
    margin-bottom: 3vw;
    height: 5vh;
    border-radius: 25px;
    padding-left: 5vw;
    background: var(--lightBlue);
    color: white;
    font-size: 4.5vw;
    font-weight: 600;
    border: 0;
}

#registerBTN0000 {
    background: white !important;
    color: var(--lightBlue) !important;
}

#forgotPassBTN0000 {
    color: #555;
    font-size: 4vw;
    text-decoration: underline;
    margin: 0;
}

/* 0001 */

#welcomeText0001 {
    font-size: 8vw;
    width: 100vw;
    text-align: center;
    margin-bottom: 10vh;
    margin-top: 22vh;
}

#accountSelectionTitle0001 {
    font-size: 6vw;
    font-weight: 500;
    width: 100vw;
    text-align: center;
}

#accountSelectionHolder0001 {
    width: 100vw;
    padding: 0 2.5vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 20vh;
}

.accountOption0001 {
    width: 25vw;
}

#nAccount0001 {
    width: 25vw;
    height: 25vw;
    border-radius: 30vw;
    background: var(--lightBlue);
    background-image: url("/images/accOpt-normal.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 23vw;
}

#sAccount0001 {
    width: 25vw;
    height: 25vw;
    border-radius: 30vw;
    background: var(--lightBlue);
    background-image: url("/images/accOpt-simplified.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16vw;
}

#kAccount0001 {
    width: 25vw;
    height: 25vw;
    border-radius: 30vw;
    background: var(--lightBlue);
    background-image: url("/images/accOpt-kids.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 23vw;
}

.accountTitle0001 {
    font-size: 4vw;
    text-align: center;
}

#bottomLogo0001 {
    width: 60vw;
    height: 10vh;
    position: fixed;
    left: 20vw;
    bottom: 2vh;
    background-image: url(/images/Barclays-logo-Both.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* 0002 */

.title0002 {
    font-size: 6vw;
    margin: 0;
    margin-left: 5vw;
}

#contentHider0002 {
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: #dddddd;
    opacity: 0;
    transition: opacity 1s;
    pointer-events: none;
}

#walletSpacer0002 {
    width: 90vw;
    height: 65vw;
    margin-left: 5vw;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#walletHolder0002 {
    width: 90vw;
    height: 50vw;
    background: linear-gradient(90deg, rgba(0,72,255,1) 0%, rgba(0,174,239,1) 100%);
    margin-left: 5vw;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 0;
}

#walletDetailsHolder0002 {
    width: 100vw;
    position: absolute;
    top: 6vh;
    transition: top 0.5s;
    z-index: 100;
}

#walletButtonHolder0002 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    width: 80vw;
    margin-left: 10vw;
}

.walletButton0002 {
    width: 15vw;
    height: 15vw;
    background: var(--lightBlue);
    border-radius: 10vw;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: margin-top 0.25s;
    background-size: 10vw;
    background-position: center;
    background-repeat: no-repeat;
}

#walletLogoBar0002 {
    width: 90vw;
    height: 15vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#barclaysLogo0002 {
    width: 11vw;
    height: 11vw;
    margin: 2vw;
    background-image: url("/images/Barclays-logo-Icon-white.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

#visaLogo0002 {
    width: 18vw;
    height: 13vw;
    margin: 5vw;
    background-image: url("/images/Visa_logo.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

#walletBalance0002 {
    font-size: 8vw;
    font-weight: 600;
    color: white;
    margin: 0;
    margin-top: 2vh;
}

#walletBalance0002::before {
    content: "£";
}

#walletDetails0002 {
    width: 40vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 3.5vw;
    font-weight: 500;
    color: white;
}

#cardNo0002::before {
    content: "...";
}

#expDate0002::before {
    content: "EXP. ";
}

#actionsTitle0002 {
    width: 100vw;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    padding-right: 5vw;
}

.titleBTN0002 {
    color: var(--lightBlue);
    margin: 0;
    font-size: 3.5vw;
    font-weight: 500;
}

#transactionsTitle0002 {
    width: 100vw;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    padding-right: 5vw;
}

#actionsHolder0002 {
    width: 100vw;
    max-height: 30vh;
    padding-left: 2.5vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.action0002 {
    width: 25vw;
    height: 25vw;
    border-radius: 25px;
    background: var(--lightBlue);
    margin-left: 5vw;
    margin-bottom: 2.5vw;
}

#qa-transfer0002 {
    background-image: url("/images/qa-transferIcon.svg");
    background-position: center;
    background-size: 20vw;
    background-repeat: no-repeat;
}

#qa-request0002 {
    background-image: url("/images/qa-requestIcon.svg");
    background-position: center;
    background-size: 20vw;
    background-repeat: no-repeat;
}

#qa-withdraw0002 {
    background-image: url("/images/qa-withdrawIcon.svg");
    background-position: center;
    background-size: 20vw;
    background-repeat: no-repeat;
}

#qa-spendCap0002 {
    background-image: url("/images/qa-spendCapIcon.svg");
    background-position: center;
    background-size: 20vw;
    background-repeat: no-repeat;
}

#qa-exchange0002 {
    background-image: url("/images/qa-exchangeIcon.svg");
    background-position: center;
    background-size: 20vw;
    background-repeat: no-repeat;
}

#qa-savings0002 {
    background-image: url("/images/qa-savingsIcon.svg");
    background-position: center;
    background-size: 20vw;
    background-repeat: no-repeat;
}

#transactionsHolder0002 {
    width: 90vw;
    height: 27vh;
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 25px;
    margin: 0 5vw;
    overflow-x: hidden;
    overflow-y: scroll;
}

.transaction0002 {
    width: 90vw;
    height: 10vw;
    /* background: var(--lightBlue); */
    padding: 0 7vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: #ddd solid 0.2vh;
}

.transactionName0002 {
    font-size: 3.5vw;
    margin: 0;
    font-weight: 600;
}

.transactionDate0002 {
    font-size: 2.5vw;
    margin: 0;
    font-weight: 500;
}

.transactionAmount0002 {
    font-size: 4vw;
    margin: 0;
    font-weight: 600;
}

#tabBarHolder0002 {
    width: 90vw;
    height: 8vh;
    margin-left: 5vw;
    /* background: var(--lightBlue); */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

#contactsBTN0002 {
    width: 8vw;
    height: 8vw;
    background-image: url("/images/contactsIcon.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

#analyticsBTN0002 {
    width: 8vw;
    height: 8vw;
    background-image: url("/images/analyticsIcon.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

#settingsBTN0002 {
    width: 8vw;
    height: 8vw;
    background-image: url("/images/settingsIcon.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}


/* 0003 */

#walletDetailsHolder0003 {
    width: 100vw;
    position: absolute;
    top: 6vh;
    transition: top 0.5s;
    z-index: 100;
}

#walletHolder0003 {
    width: 90vw;
    height: 50vw;
    background: var(--lightBlue);
    margin-left: 5vw;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content: center;
    position: absolute;
    top: 0;
    background-image: url("/images/kidsCardCorner.svg");
    background-position: right;
    background-repeat: no-repeat;
}

#walletDetails0003 {
    width: 40vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 3.5vw;
    font-weight: 500;
    color: white;
}

#walletBalance0003 {
    margin: 0;
    font-size: 7vw;
    font-weight: 500;
    background: var(--mediumBlue);
    padding: 0 1vw;
    border-radius: 5vw;
}

#walletBalance0003::before {
    content: "£";
}

#walletDetails0003 p {
    margin: 0;
    font-size: 3.5vw;
}

#walletOptions0003 {
    width: 90vw;
    margin-left: 5vw;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.option-1-0003 {
    width: 47.5%;
    height: 40%;
    background: var(--orange);
    border-radius: 25px;
}

.option-2-0003 {
    width: 100%;
    height: 40%;
    background: var(--lightBlue);
    border-radius: 25px;
}

#spent0003 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#spent0003 h1 {
    font-size: 9vw;
    margin: 0;
}

#spent0003 h1::before {
    content: "£";
}

#spent0003 p {
    margin: 0;
    font-size: 3.5vw;
    font-weight: 600;
}

#allowance0003 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#allowance0003 h1 {
    font-size: 9vw;
    margin: 0;
}

#allowance0003 h1::before {
    content: "£";
}

#allowance0003 p {
    margin: 0;
    font-size: 3.5vw;
    font-weight: 600;
}

#savings0003 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 5vw;
    overflow: hidden;
}

#savingsIcon0003 {
    width: 20vh;
    height: 20vh;
    margin-left: -10vh;
    border-radius: 20vh;
    background: var(--darkBlue);
    background-image: url("/images/kids-savingsIcon.svg");
    background-size: 8vh;
    background-position-x: 10vh;
    background-position-y: 6.25vh;
    background-repeat: no-repeat;
}

#savings0003 h1 {
    font-size: 8vw;
    color: white;
    font-weight: 500;
    background: var(--mediumBlue);
    margin: 0;
    padding: 0 1vh;
    border-radius: 20vh;
}


#barryHolder0003 {
    width: 90vw;
    height: 25vh;
    display: flex;
    flex-direction: row;
    background: white;
    border-radius: 25px;
    margin: 2.5vw 5vw;
    padding: 0 5vw;
    overflow: hidden;
}

.barryOption0003 {
    width: 40vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.barryOption0003 p {
    font-size: 4vw;
    font-weight: 600;
    margin: 0;
    margin-top: 1vw;
}

.optionIcon0003 {
    height: 16vh;
    width: 90%;
    background: var(--yellow);
    background-position: center;
    background-size: 25vw;
    background-repeat: no-repeat;
    border-radius: 25px;
}

#lessonIcon0003 {
    background-image: url("/images/lessonIcon.svg");
}

#challengesIcon0003 {
    background-image: url("/images/challengesIcon.svg");
}

/* 0004 */

.section-3 {
    height: 40vh;
    width: 100vw;
}

.section-5 {
    height: 60vh;
    width: 100vw;
}

.title0004 {
    font-size: 8vw;
    margin: 0;
    margin-left: 5vw;
}

#contentHider0004 {
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: #dddddd;
    opacity: 0;
    transition: opacity 1s;
    pointer-events: none;
}

#walletSpacer0004 {
    width: 90vw;
    height: 50vw;
    margin-left: 5vw;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#walletHolder0004 {
    width: 90vw;
    height: 50vw;
    background: linear-gradient(90deg, rgba(0,72,255,1) 0%, rgba(0,174,239,1) 100%);
    margin-left: 5vw;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 0;
}

#walletDetailsHolder0004 {
    width: 100vw;
    position: absolute;
    top: 6vh;
    transition: top 0.5s;
    z-index: 100;
}

#walletButtonHolder0004 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    width: 80vw;
    margin-left: 10vw;
}

.walletButton0004 {
    width: 15vw;
    height: 15vw;
    background: var(--lightBlue);
    border-radius: 10vw;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: margin-top 0.25s;
    background-size: 10vw;
    background-position: center;
    background-repeat: no-repeat;
}

#walletLogoBar0004 {
    width: 90vw;
    height: 15vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#barclaysLogo0004 {
    width: 11vw;
    height: 11vw;
    margin: 2vw;
    background-image: url("/images/Barclays-logo-Icon-white.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

#visaLogo0004 {
    width: 18vw;
    height: 13vw;
    margin: 5vw;
    background-image: url("/images/Visa_logo.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

#walletBalance0004 {
    font-size: 8vw;
    font-weight: 600;
    color: white;
    margin: 0;
    margin-top: 2vh;
}

#walletBalance0004::before {
    content: "£";
}

#walletDetails0004 {
    width: 40vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 3.5vw;
    font-weight: 500;
    color: white;
}

#cardNo0004::before {
    content: "...";
}

#expDate0004::before {
    content: "EXP. ";
}

#actionsTitle0004 {
    width: 100vw;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    padding-right: 5vw;
}

.titleBTN0004 {
    color: var(--lightBlue);
    margin: 0;
    font-size: 3.5vw;
    font-weight: 500;
}

#actionsHolder0004 {
    width: 100vw;
    max-height: 50vh;
    padding-left: 2.5vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.action0004 {
    width: 43.75vw;
    height: 35vw;
    border-radius: 25px;
    background: var(--lightBlue);
    margin-left: 2.5vw;
    margin-bottom: 2.5vw;
}

#qa-transfer0004 {
    background-image: url("/images/qa-transferIcon.svg");
    background-position: center;
    background-size: 25vw;
    background-repeat: no-repeat;
}

#qa-request0004 {
    background-image: url("/images/qa-requestIcon.svg");
    background-position: center;
    background-size: 25vw;
    background-repeat: no-repeat;
}

#qa-withdraw0004 {
    background-image: url("/images/qa-withdrawIcon.svg");
    background-position: center;
    background-size: 25vw;
    background-repeat: no-repeat;
}

#qa-spendCap0004 {
    background-image: url("/images/qa-spendCapIcon.svg");
    background-position: center;
    background-size: 25vw;
    background-repeat: no-repeat;
}

#qa-exchange0004 {
    background-image: url("/images/qa-exchangeIcon.svg");
    background-position: center;
    background-size: 25vw;
    background-repeat: no-repeat;
}

#qa-savings0004 {
    background-image: url("/images/qa-savingsIcon.svg");
    background-position: center;
    background-size: 27vw;
    background-repeat: no-repeat;
}

#transactionsHolder0004 {
    width: 90vw;
    height: 27vh;
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 25px;
    margin: 0 5vw;
    overflow-x: hidden;
    overflow-y: scroll;
}

.transaction0004 {
    width: 90vw;
    height: 10vw;
    /* background: var(--lightBlue); */
    padding: 0 7vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: #ddd solid 0.2vh;
}

.transactionName0004 {
    font-size: 3.5vw;
    margin: 0;
    font-weight: 600;
}

.transactionDate0004 {
    font-size: 2.5vw;
    margin: 0;
    font-weight: 500;
}

.transactionAmount0004 {
    font-size: 4vw;
    margin: 0;
    font-weight: 600;
}

#tabBarHolder0004 {
    width: 90vw;
    height: 8vh;
    margin-left: 5vw;
    /* background: var(--lightBlue); */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

#contactsBTN0004 {
    width: 16vw;
    height: 16vw;
    padding: 2vw;
    border-radius: 8vw;
    background-color: var(--orange);
    background-image: url("/images/contactsIcon.svg");
    background-position: center;
    background-size: 9vw;
    background-repeat: no-repeat;
}

#analyticsBTN0004 {
    width: 16vw;
    height: 16vw;
    padding: 2vw;
    border-radius: 8vw;
    background-color: var(--orange);
    background-image: url("/images/analyticsIcon.svg");
    background-position: center;
    background-size: 9vw;
    background-repeat: no-repeat;
}

#settingsBTN0004 {
    width: 16vw;
    height: 16vw;
    padding: 2vw;
    border-radius: 8vw;
    background-color: var(--orange);
    background-image: url("/images/settingsIcon.svg");
    background-position: center;
    background-size: 9vw;
    background-repeat: no-repeat;
}