:root{
    --add25: #CFDDF1;
    --add50: #9AB8DF;
    --add75: #6898CE;
    --add100: #0077BB;
    --rklight: #00BFFF;
    --rkdark: #080A82;
    --light-blue-50: #f0f9ff;
    --light-blue-100: #e0f1fe;
    --light-blue-200: #b9e4fe;
    --light-blue-300: #7cd0fd;
    --light-blue-400: #36b9fa;
    --light-blue-500: #0ca1eb;
    --dark-blue-600: #0077bb;
    --dark-blue-700: #0165a3;
    --dark-blue-800: #065686;
    --dark-blue-900: #0b486f;
    --dark-blue-950: #072d4a;
}
@font-face {
    font-family: 'Avenir Regular';
    src: url('fonts/AvenirNextLTPro-Regular.eot');
    src: url('fonts/AvenirNextLTPro-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/AvenirNextLTPro-Regular.woff') format('woff'),
        url('fonts/AvenirNextLTPro-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir Bold';
    src: url('fonts/AvenirNextLTPro-Bold.eot');
    src: url('fonts/AvenirNextLTPro-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/AvenirNextLTPro-Bold.woff') format('woff'),
        url('fonts/AvenirNextLTPro-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir Medium';
    src: url('fonts/AvenirNextLTPro-MediumCn.eot');
    src: url('fonts/AvenirNextLTPro-MediumCn.eot?#iefix') format('embedded-opentype'),
        url('fonts/AvenirNextLTPro-MediumCn.woff') format('woff'),
        url('fonts/AvenirNextLTPro-MediumCn.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
body{
  font-family: 'Avenir Regular', Arial, Helvetica, sans-serif;  
}
.app-bar {
    background-color: white;
    color: #0077BB;
    border-bottom: solid 1px #9AB8DF;
}
.app-bar-element:hover {
    background-color: white !important;
}
h3.title{
    color: var(--add100);
    margin-left: 10px; 
}