1  @import "src/resources/styles/vars";
 2  
 3  .headerContainer {
 4    margin-bottom: $space-big;
 5    background-color: darken($primary-color, 10);
 6    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
 7    0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
 8    color: $primary-font-color;
 9  }
10  
11  .headerTitle {
12    font-weight: bold;
13    margin: 0;
14  
15    display: flex;
16    flex-direction: row;
17    justify-content: space-between;
18  }
19  
20  .header {
21    width: 100%;
22    background-color: $primary-color;
23    height: 56px;
24    display: flex;
25    flex-direction: row;
26    align-items: center;
27    justify-content: space-between;
28    padding-left: $space-small;
29    padding-right: $space-small;
30    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.15),
31    0px 4px 5px 0px rgba(0, 0, 0, 0.1), 0px 1px 10px 0px rgba(0, 0, 0, 0.08);
32    margin-bottom: $space-small;
33  }
34  
35  .subHeader {
36    height: 1.7rem;
37    margin: 0;
38    white-space: nowrap;
39  
40    display: flex;
41    flex-direction: row;
42    justify-content: space-evenly;
43  
44    overflow: scroll;
45  
46    li {
47      list-style-type: none;
48      margin: 0 $space;
49      height: 100%;
50    }
51  
52    @media (min-width: $breakpoint-mobile) {
53      justify-content: center;
54    }
55  }
56  
57  .selectedSubHeaderItem {
58    border-bottom: 3px solid white;
59  }