: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: whitesmoke; }
        span{ font-size: 0.8em;}
    }
}

h3.title{
    color: var(--add100);
    margin-left: 10px; 
}
.btn-dark-blue{ background-color: var(--rkdark); color: #FFF; }
.btn-dark-blue:hover{ background-color: #393A9B; color:#FFF; }
.btn-light-blue{ background-color: var(--rklight); color: #FFF; }
.btn-light-blue:hover{ background-color: #32CBFF; color:#FFF; }
.cm-dialog .modal-header{ background-color: #080A82 !important; }
.btn-outline-dark-blue {
	color: var(--rkdark);
	border: 1px solid var(--rkdark);
	background-color: white;
	&:hover {
		background-color: var(--rkdark);
		color: white;
	}
}
.btn-outline-light-blue {
	color: var(--rklight);
	border: 1px solid var(--rklight);
	background-color: white;
	&:hover {
		background-color: var(--rklight);
		color: white;
	}
}
.bg-light .modal-title{ color: gray; }
.small-message{
    --_bgColor: #E5EEF1;
    --_color: #00597C;
    display: none;
    max-width: 350px;
    background-color: var(--_bgColor);
    border: 1px solid var(--_color);
    color: black;
    min-height: 50px;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    position: fixed;
    bottom: 50px;
    right: 50px;
    display: grid;
    grid-template-columns: 35px 1fr;
    align-items: center;
    column-gap: 5px;

    i{ color: var(--_color); }
    .title{ text-align: left; font-family: "GothamBold"; }
    .message{ color: slategray; }
    span{ font-family: system-ui, 'Open Sans', sans-serif; font-weight: bold; }
    
    &.bg-done{ --_bgColor:#E8F5E9; --_color:#2E7D32; }
    &.bg-information{ --_bgColor:#E5F8FF; --_color:#00BFFF; }
    &.bg-warn{ --_bgColor:#FFFDE7; --_color:#F57F17; }
    &.bg-error{ --_bgColor:#FBE9E7; --_color:#BF360C; }
}