1  @import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
  2  
  3  html, body {
  4      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  5  }
  6  
  7  a {
  8      color: #0366d6;
  9  }
 10  
 11  .btn-primary {
 12    color: #fff;
 13    background-color: #1b6ec2;
 14    border-color: #1861ac;
 15  }
 16  
 17  app {
 18      position: relative;
 19      display: flex;
 20      flex-direction: column;
 21  }
 22  
 23  .top-row {
 24      height: 3.5rem;
 25      display: flex;
 26      align-items: center;
 27  }
 28  
 29  .main {
 30      flex: 1;
 31  }
 32  
 33  .main .top-row {
 34      background-color: #f7f7f7;
 35      border-bottom: 1px solid #d6d5d5;
 36      justify-content: flex-end;
 37  }
 38  
 39  .main .top-row > a {
 40      margin-left: 1.5rem;
 41  }
 42  
 43  .sidebar {
 44      background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
 45  }
 46  
 47  .sidebar .top-row {
 48      background-color: rgba(0,0,0,0.4);
 49  }
 50  
 51  .sidebar .navbar-brand {
 52      font-size: 1.1rem;
 53  }
 54  
 55  .sidebar .oi {
 56      width: 2rem;
 57      font-size: 1.1rem;
 58      vertical-align: text-top;
 59      top: -2px;
 60  }
 61  
 62  .nav-item {
 63      font-size: 0.9rem;
 64      padding-bottom: 0.5rem;
 65  }
 66  
 67  .nav-item:first-of-type {
 68      padding-top: 1rem;
 69  }
 70  
 71  .nav-item:last-of-type {
 72      padding-bottom: 1rem;
 73  }
 74  
 75  .nav-item a {
 76      color: #d7d7d7;
 77      border-radius: 4px;
 78      height: 3rem;
 79      display: flex;
 80      align-items: center;
 81      line-height: 3rem;
 82  }
 83  
 84  .nav-item a.active {
 85      background-color: rgba(255,255,255,0.25);
 86      color: white;
 87  }
 88  
 89  .nav-item a:hover {
 90      background-color: rgba(255,255,255,0.1);
 91      color: white;
 92  }
 93  
 94  .content {
 95      padding-top: 1.1rem;
 96  }
 97  
 98  .navbar-toggler {
 99      background-color: rgba(255, 255, 255, 0.1);
100  }
101  
102  .valid.modified:not([type=checkbox]) {
103      outline: 1px solid #26b050;
104  }
105  
106  .invalid {
107      outline: 1px solid red;
108  }
109  
110  .validation-message {
111      color: red;
112  }
113  
114  @media (max-width: 767.98px) {
115      .main .top-row {
116          display: none;
117      }
118  }
119  
120  @media (min-width: 768px) {
121      app {
122          flex-direction: row;
123      }
124  
125      .sidebar {
126          width: 250px;
127          height: 100vh;
128          position: sticky;
129          top: 0;
130      }
131  
132      .main .top-row {
133          position: sticky;
134          top: 0;
135      }
136  
137      .main > div {
138          padding-left: 2rem !important;
139          padding-right: 1.5rem !important;
140      }
141  
142      .navbar-toggler {
143          display: none;
144      }
145  
146      .sidebar .collapse {
147          /* Never collapse the sidebar for wide screens */
148          display: block;
149      }
150  }