:root{
    --primary-color: #01004C;
    --secondary-color: #FFD902;
    --primary-alt-color: #1E1D3F;
    --button-highlight-color: #3955a7;
    --button-outline-color: #01004C;
    --default-font-family: 'Roboto','Helvetica','Arial',sans-serif;
    --alternate-font-family: 'Roboto','Helvetica','Arial',sans-serif;
    --banner-image: url(../images/student-view-results/banner-braincoins.svg);
    /*--banner-b-image: url(../images/student-take-assessment/banner1-braincoins.svg);*/
    --banner-b-image: url(../images/student-view-results/banner-braincoins.svg);
    --banner-c-image: url(../images/login/card-bg-braincoins.svg);
    --accent-color: var(--secondary-color);
    --logout-icon: url(../images/student-landing/logout_icon_braincoins.svg);
    --header-dialog-image: url(../images/login/braincoinsHeader.svg);
}
html,
body{
    font-family: var(--default-font-family);
}
.header{
    & .header-coin{
        width: 10ch;
        max-width: 25vw;
        transform: translateY(30%);
        margin: -2ch 2ch -1ch -2ch;
        display: block;
    }
    & .header-coin-logo{
        width: 32ch;
        width: 220px;
        max-width: 40vw;
        display: block;
        position:absolute;
        top:0%;
    }
    & .header-coin-logo-assessment{
        /* width: 32ch; */
        width: 880px;
        max-height: 200px;
        max-width: 40vw;
        display: block;
        position:absolute;
        top:4%;
    }
}

/* .header-logo{ */
/*     background-image: url(../images/student-take-assessment/logo.png); */
/*     background-repeat: no-repeat; */
/*     background-position-y: 50%; */
/*     background-position-x: 80%; */
/* } */

.login-page,
.login-type{
    & .header-coin-logo{
        width: 32ch;
        width: 220px;
        max-width: 40vw;
        display: block;
        position:relative;
    }
}

body.master-page-login,
body.master-page-slim{
    & .header-logo{
        background-image: url(../../css/images/BrainRocket_Coin_Logo.svg);
        background-repeat: no-repeat;
        transform: unset;
        margin-left: 65%;
        margin-top: -25%;
        transform: scale(0.7);
        filter: unset;
    }

    & .header-logo-rocket {
        background-image: url(../images/rocket_v2.svg);
        background-size: contain;
        background-repeat: no-repeat;
        width: 55px;
        float: right;
        transform: scale(1.3) translateX(-8ch) translateY(-10%) rotate(45deg);
        filter: drop-shadow(3px 5px 10px #ffd900E0);
    }
}

h3.assessments-card-title ,
h3.card-title ,
.header-page-description label{    
    text-transform: none;
    font-size: 5vmin !important;
    padding: 1ch 0;
    width: fit-content !important;
}

.header-page-description{
    display: flex;
    align-items: center;
    grid-column: 1;
    grid-row: 1;
    & img{
        display: block;
        width: 9ch;
        height: auto;
    }
}

/* BrainRocket logo lockup shown in place of the text wordmark (braincoins site).
   Higher specificity than the generic `.header-page-description img { width:9ch }`
   above so it sizes to the header; sits above the navy header graphic. */
.header-page-description img.header-wordmark-logo {
    width: clamp(170px, 26vw, 300px);
    height: auto;
    margin: 6px 0 0 2px;
    position: relative;
    z-index: 5;
}

/* The logo lockup already includes the coin, so hide the separate coin graphic in
   the header wave on the BrainRocket slim pages (this file only loads on braincoins,
   so Dolphin is unaffected). */
body.master-page-slim .header-logo-image { display: none; }

/* Mobile: keep the "BrainRocket.Club" wordmark fully visible in the upper-left.
   general_assessment.css declares `.header label { font-size: 1.5em !important }`,
   which loads after this file and has the same specificity, so it was winning and
   sizing the title at ~48px — too big to fit, hence the clipping. Beat it with a
   higher-specificity selector (.header .header-page-description label) and clamp the
   size so the wordmark always fits on phones. Desktop is left at its 1.5em. */
@media (max-width: 768px) {
    .header .header-page-description label {
        font-size: clamp(16px, 6vw, 30px) !important;
        white-space: nowrap;
        padding: 0.4ch 0;
    }
}

body.login-type  .site-logo,
body.login-page  .site-logo{
    visibility: hidden;
}

.content-frame-wave,
.content-frame-wave.card,
.container .card{
  background-image: var(--banner-c-image);
}
span.go-to-btn{
    /* padding: 0 0 0 3ch; */
    padding: 0 2ch;
    min-width: 20ch;
    text-align: center;
}
span.goto-icon{
    background-image: url('../images/student-landing/goto_icon_braincoins.svg');
    background-image: url('../images/student-landing/goto_icon_circle_braincoins.svg');
    margin-right: 0.5ch;
    margin-left: 6.5ch;
}
.btn:hover{
    color: white;
}

.logout-icon {
    background-image:url('../images/student-landing/logout_icon_braincoins.svg');
}

.button-logout:after{
    background: url(../images/student-landing/logout_icon_braincoins.svg);
    background-repeat:round;
}
.header-rocket{
    transform: rotate(45deg); 
}