@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display:wght@400;700&family=Roboto:wght@300&display=swap');

:root{
    --block: 20px;
    --font-para: 'Noto Sans Display', sans-serif;
    --colour-font: #c6d4de;
    --colour-bg: #2a2438;
    --colour-top-bar-bg: #141010;
    --colour-button: #5c5470; 
    /* --colour-button: #3c3747; */
    --border-rad: 10px;
}

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


/*
    Buttons
*/
.button{
    background-color: var(--colour-button);
    height: calc(3 * var(--block));
    width:100%;
    font-size: calc(1.5 * var(--block));
    font-family: var(--font-para);
    color: var(--colour-font);
    border-radius: var(--border-rad);
    margin-top: var(--block);
}

.button--confirm{
    background-color: #61b390;
}

.button--greyed-out{
    background-color: #352f44;
    color: var(--colour-button);
}

.button--clicked{
    background-color: #5c5470;
}



/*
    Dropdown menu
*/
.dropdown{
    width:100%;
    height: calc(3 * var(--block));
    text-align: center;
    font-family: var(--font-para);
    font-size: var(--block);
    border-radius: var(--border-rad);
    background-color: var(--colour-font);
}




/*
    Everything goes in here.
*/
#appContainer{
    
    background-color: var(--colour-bg);
    max-width: calc( 40 * var(--block) );
    margin: 0 auto;
}



/*
    Main content container
    Tiny top padding prevents contained elements within
    forcing the main container down due to 
    their margins collapsing outside the main container.
*/
#main{
    padding: 0.01px var(--block);
}




/*
    Top-bar
*/
.top-bar{
    height: calc( 4 * var(--block));
    background-color: var(--colour-top-bar-bg);
    border-bottom: 1px solid #c0bdc9;
}




/*
    info-bar
*/
.info-bar{
    display: flex;
    height: calc(3 * var(--block));
    background-color: var(--colour-bg);
}
.info-bar__cell{
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
}
.info-bar__cell--right{
    margin-left: auto;
    flex-grow: 0;
}
.info-bar__button{
    width: calc(3 * var(--block));
    height: calc(3 * var(--block));
    background-color: var(--colour-top-bar-bg);
    background-image: url(./Images/hamburger.png);
    background-position: center;
    background-repeat: no-repeat;
}

.info-bar__para{
    font-family: var(--font-para);
    font-weight: 400;
    /* font-size: var(--block); */
    font-size: calc(1.2 * var(--block));
    color: var(--colour-font);
}




/*
    Vertical-Selector
*/
.vertical-selector{
    display: flex;
}
.vertical-selector__cell{
    width: calc(4 * var(--block));
    height: calc(4 * var(--block));
}
.vertical-selector__cell--center{
    flex-grow: 1;
}
.vertical-selector__center__para{
    line-height: 0;
    margin-top: calc(2 * var(--block));
    font-family: var(--font-para);
    font-weight: 700;
    color: var(--colour-font);
    font-size: calc( 1.5 * var(--block) );
    text-align: center;
}
.vertical-selector__cell--right{
    margin-left: auto;
}
.vertical-selector__button{
    width: calc(4 * var(--block));
    height: 100%;
    background-color: var(--colour-font);
    background-image: url(./Images/arrow.png);
    background-position: center;
    background-repeat: no-repeat;
}
.vertical-selector__button--right-button{
    transform: rotate(180deg);
}



/*
    Info-button
*/
.info-button__container{
    width:100%;
    transition-property: all;
    transition-duration: 1s;
}
.info-button{
    border-radius: 5px;
    _background-color: var(--colour-button);
    background-color: #3c3747;
    width: 100%;
    border: 1px solid var(--colour-bg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition-property: all;
    transition-duration: 10s;
}
.info-button__top-row, .info-button__bottom-row{
    display:flex;
    flex-direction: row;
}
.info-button .cell-left{
    margin-right: auto;
}
.info-button .cell-right{
    margin-left:auto;
}
.info-button p{
    font-family: var(--font-para);
    font-weight: 400;
    font-size: var(--block);
    color: var(--colour-font);
}
.info-button__middle-row p{
    font-size: calc(1.5 * var(--block));
    line-height: calc(1.5 * var(--block));
    text-align: center;
    width:98%;
    overflow: hidden;
    height: calc( 1.8 * var(--block) );
}


/*
 stops-container
 This holds all the infoButtons of the current trip and must be: 
    100VH - .top-bar height - .info-bar height
which is 100VH - 7 blocks. 
*/
.stops-container{
    height: calc( 100vh - (7 * var(--block)) );
    max-height: calc( 100vh - (7 * var(--block)) );
    overflow: hidden;
    display: flex;
}
.stops-container__column{
    width: 100%;
}


/*
    multi-column
*/
.multi-column__container{
    margin:  var(--block) 0 calc(2 * var(--block)) 0;
}
.multi-column__row{
    display: flex;
    align-items: center;
    margin: var(--block) 0;
    text-align: center;
}
.multi-column__row > .heading{
    background-color: #352f44;
    height: calc(3 * var(--block));
}
.multi-column__row > .heading > p{
    font-family: var(--font-para);
    font-weight: 700;
    font-size: var(--block);
    color: var(--colour-font); 
}
.multi-column__row > .cell{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-para);
    font-weight: 400;
    font-size: var(--block);
    color: var(--colour-font);
    text-align: center;
    overflow: hidden;
}
.multi-column__row > .double{
    width: 50%;
}
.multi-column__row > .triple{
    width: 33.33%;
}






/*
    numerical entry box
*/
.num-entry{
    width: calc(4 * var(--block));
    height: calc(3 * var(--block));
    background-color: var(--colour-top-bar-bg);
    border: 1px solid var(--colour-button);
    font-family: var(--font-para);
    font-weight: 400;
    font-size: var(--block);
    color: var(--colour-font);
    text-align: center;
}



/*
    numerical display box
*/
.num-display{
    width: calc(4 * var(--block));
    height: calc(3 * var(--block));
    background-color: #352f44;
    border: 1px solid var(--colour-button);
    font-family: var(--font-para);
    font-weight: 700;
    font-size: calc(1.2 * var(--block));
    color: var(--colour-font);
    display: flex;
    align-items: center;
    justify-content: center;
}



/*
    Text
*/
.para{
    font-family: var(--font-para);
    font-weight: 400;
    font-size: var(--block);
    line-height: calc( 2 * var(--block) );
    color: var(--colour-font);
    margin: var(--block) 0 calc(2 * var(--block)) 0;
}

span.para--attention{
    color: #f77;
    background-color: var(--colour-bg);
    font-size: calc( 1 * var(--block));
}

h1.main-heading{
    margin: calc( 2 * var(--block) ) 0;
    font-size: calc( 1.5 * var(--block) );
    font-weight: 700;
}

h2.sub-heading{
    margin: calc( 2 * var(--block) ) 0 var(--block) 0;
    font-weight: 700;
    line-height: var(--block);
}

.logo{
    color: #5c5470;
    font-family: 'Roboto', sans-serif;
    font-size: calc( 2 * var(--block));
    padding: var(--block);
    line-height: calc( 2 * var(--block));
}