/* laoding fonts
--------------------------------------------------------- */
@font-face {
	font-family: 'Roboto';
	src:  url('/assets/fonts/Roboto-Regular.ttf');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Raleway';
	src:  url('/assets/fonts/Raleway-Regular.ttf');
	font-weight: normal;
	font-style: normal;
}

/* default colors
--------------------------------------------------------- */
:root {
	/* default */
	--initialColor: rgb(102,153,204);
	--bs-heading-color: rgb(102,153,204);
	--mcBckgrnd: rgb(245,245,245);
	--mcBlockContBckgrnd: rgb(255,255,255);
	/* btn defaults */
	--btnPrimaryClr: rgb(255,255,255);
	--primaryBckgrnd: rgb(102,153,204);
	--primaryActvBckgrnd: rgb(74,110,150);
	--primaryBrdr: rgb(102,153,204);

	--initialColor-rgb: 102,153,204;
	--mcBckgrnd-rgb: 245,245,245;
};

html, body { height: 100%; }
body { background-color: var(--mcBckgrnd); }
body * { font-family: 'Raleway', sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: 'Roboto', sans-serif !important; color: var(--initialColor) !important; }


/* file icons
--------------------------------------------------------- */
.file-icon { display: inline-block; margin: 0 0.3rem 0 0; padding: 0; background-color: transparent; }
.file-icon:before { font-family: FontAwesome; font-weight: normal; font-style: normal; font-size: inherit; color: inherit; }


/* setup
--------------------------------------------------------- */
.loginLogo { display: block; margin: 0 0 1rem; padding: 0; text-align: center; }
.loginLogo img { width: 90px; height: auto; margin: 0 0 0.5rem; }
h1 { margin: 0 0 1.5rem; height: 3rem; line-height: 3rem; font-size: 1.5rem; }

.middle--center { display: flex; align-items: top; justify-content: center; padding: 10% 0 0; margin: 0; height: 100%; background-color: var(--mcBckgrnd); }
.block-content { position: relative; display: block; margin: 0; padding: 1.5rem 1.5rem 1.5rem 8rem; background-color: var(--mcBlockContBckgrnd); 
	box-shadow: 0 .35rem 0.8rem rgba(0,0,0,.15) !important; box-sizing: border-box; overflow: hidden; }
.block-content p:last-child { margin-bottom: 0; }

.block-content .alertbox { position: absolute; top: 0; left: 1.5rem; display: inline-block; margin: 0; padding: 0; 
	font-size: 6rem; color: var(--initialColor); text-align: left; }
.block-content .alertbox .file-icon { margin: 0; line-height: 1; }
.block-content .alertbox .file-icon.initial:before { content: '\f013'; }

.block-content .alertbox .file-icon.notAllowed { font-size: 5.5rem; }
.block-content .alertbox .file-icon.notAllowed:before { content: '\f071'; }
.colorOrange { color: rgb(240,135,27); }


.btn-primary { color: var(--btnPrimaryClr); background-color: var(--primaryBckgrnd); border-color: var(--btnPrimaryBrdr); }
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, 
.show > .btn-primary.dropdown-toggle, .btn-primary:hover, .btn-primary.focus, 
.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, 
.show > .btn-primary.dropdown-toggle:focus { color: var(--btnPrimaryClr); 
	background-color: var(--primaryActvBckgrnd); border-color: var(--primaryActvBckgrnd); }

[class^='btn']:not(:disabled):not(.disabled).active, [class^='btn']:not(:disabled):not(.disabled):active, 
.show > [class^='btn'].dropdown-toggle, [class^='btn']:hover, [class^='btn'].focus, 
[class^='btn']:not(:disabled):not(.disabled).active:focus, [class^='btn']:not(:disabled):not(.disabled):active:focus, 
.show > [class^='btn'].dropdown-toggle:focus { box-shadow: none; outline: none; }
.btn-group-sm > .btn, .btn-sm { --bs-btn-padding-y: 0.5rem; --bs-btn-padding-x: 1.25rem; --bs-btn-border-radius: 0; }


/* form
--------------------------------------------------------- */
.form-control:focus, .form-control, .btn { border-radius: 0px; outline: 0; box-shadow: none; }
.form-control:focus { border-color: var(--primaryBrdr); }