/* Boost Community Common CSS */

/* ****************************************************** */
/* FONTS */
/* ****************************************************** */

@font-face {
    font-family: 'NotoSans';
    src: url("./Boost_NotoSansFont");
}

/* ****************************************************** */
/* COLORS */
/* ****************************************************** */
/*
	Michelin Blue	:	#28509b
	White			:	#ffffff
	Not White		:	#f2f5f7
	Better Gray		:	#f0f0f0
	Baseboard Gray	:	#e3e3e3
	Darker Gray		:	#dadada
	New Text Grey	:	#4f4f4f
	Submit Blue		:	#66b9ff
	Kind Blue		:	#e8f0ff
	Page Section-
		-BG Blue	:	#d2e2ff
	Alert Red		:	#f44336
*/


.michelin-blue { color: #28509b; }
.white { color: #ffffff; }
.not-white { color: #f2f5f7; }
.better-gray { color: #f0f0f0; }
.baseboard-gray { color: #e3e3e3; }
.darker-gray { color: #dadada; }
.new-text-gray { color: #4f4f4f; }
.submit-blue { color: #66b9ff; }
.kind-blue { color: #e8f0ff; }
.page-section-blue { color: #d2e2ff; }
.alert-red { color: #f44336; }

.michelin-blue-bg { background-color: #28509b; }
.white-bg { background-color: #ffffff; }
.not-white-bg { background-color: #f2f5f7; }
.better-gray-bg { background-color: #f0f0f0; }
.baseboard-gray-bg { background-color: #e3e3e3; }
.darker-gray-bg { background-color: #dadada; }
.new-text-gray-bg { background-color: #4f4f4f; }
.submit-blue-bg { background-color: #66b9ff; }
.kind-blue-bg { background-color: #e8f0ff; }
.page-section-blue-bg { background-color: #d2e2ff; }
.alert-red-bg { background-color: #f44336; }



/* ****************************************************** */
/* PADDING CLASSES */

.no-padding { padding: 0; }
.no-padding-top { padding-top: 0; }
.no-padding-right { padding-right: 0; }
.no-padding-bottom { padding-bottom: 0; }
.no-padding-left { padding-left: 0; }

.padding, .padding-16 { padding: 16px }
.padding-top, .padding-top-16 { padding-top: 16px }
.padding-right, .padding-right-16 { padding-right: 16px }
.padding-bottom, .padding-bottom-16 { padding-bottom: 16px }
.padding-left, .padding-left-16 { padding-left: 16px }
.padding-vert, .padding-vert-16 { padding-top: 16px; padding-bottom: 16px }
.padding-horz, .padding-horz-16 { padding-left: 16px; padding-right: 16px }

.padding-8 { padding: 8px }
.padding-top-8 { padding-top: 8px }
.padding-right-8 { padding-right: 8px }
.padding-bottom-8 { padding-bottom: 8px }
.padding-left-8 { padding-left: 8px }
.padding-vert-8 { padding-top: 8px; padding-bottom: 8px }
.padding-horz-8 { padding-left: 8px; padding-right: 8px }

.padding-24 { padding: 24px }
.padding-top-24 { padding-top: 24px }
.padding-right-24 { padding-right: 24px }
.padding-bottom-24 { padding-bottom: 24px }
.padding-left-24 { padding-left: 24px }
.padding-vert-24 { padding-top: 24px; padding-bottom: 24px }
.padding-horz-24 { padding-left: 24px; padding-right: 24px }

.padding-36 { padding: 36px }
.padding-top-36 { padding-top: 36px }
.padding-right-36 { padding-right: 36px }
.padding-bottom-36 { padding-bottom: 36px }
.padding-left-36 { padding-left: 36px }
.padding-vert-36 { padding-top: 36px; padding-bottom: 36px }
.padding-horz-36 { padding-left: 36px; padding-right: 36px }
/* ****************************************************** */


/* ****************************************************** */
/* MARGIN CLASSES */

.no-margin { margin: 0; }
.no-margin-top { margin-top: 0; }
.no-margin-right { margin-right: 0; }
.no-margin-bottom { margin-bottom: 0; }
.no-margin-left { margin-left: 0; }

.no-margin-i { margin: 0 !important; }
.no-margin-top-i { margin-top: 0 !important; }
.no-margin-right-i { margin-right: 0 !important; }
.no-margin-bottom-i { margin-bottom: 0 !important; }
.no-margin-left-i { margin-left: 0 !important; }

.margin, .margin-16 { margin: 16px }
.margin-top, .margin-top-16 { margin-top: 16px }
.margin-right, .margin-right-16 { margin-right: 16px }
.margin-bottom, .margin-bottom-16 { margin-bottom: 16px }
.margin-left, .margin-left-16 { margin-left: 16px }
.margin-vert, .margin-vert-16 { margin-top: 16px; margin-bottom: 16px }
.margin-horz, .margin-horz-16 { margin-left: 16px; margin-right: 16px }

.margin-8 { margin: 8px }
.margin-top-8 { margin-top: 8px }
.margin-right-8 { margin-right: 8px }
.margin-bottom-8 { margin-bottom: 8px }
.margin-left-8 { margin-left: 8px }
.margin-vert-8 { margin-top: 8px; margin-bottom: 8px }
.margin-horz-8 { margin-left: 8px; margin-right: 8px }

.margin-24 { margin: 24px }
.margin-top-24 { margin-top: 24px }
.margin-right-24 { margin-right: 24px }
.margin-bottom-24 { margin-bottom: 24px }
.margin-left-24 { margin-left: 24px }
.margin-vert-24 { margin-top: 24px; margin-bottom: 24px }
.margin-horz-24 { margin-left: 24px; margin-right: 24px }

.margin-36 { margin: 36px }
.margin-top-36 { margin-top: 36px }
.margin-right-36 { margin-right: 36px }
.margin-bottom-36 { margin-bottom: 36px }
.margin-left-36 { margin-left: 36px }
.margin-vert-36 { margin-top: 36px; margin-bottom: 36px }
.margin-horz-36 { margin-left: 36px; margin-right: 36px }

.margin-auto { margin: auto; }
.margin-top-auto { margin-top: auto; }
.margin-right-auto { margin-right: auto; }
.margin-bottom-auto { margin-bottom: auto; }
.margin-left-auto { margin-left: auto; }
/* ****************************************************** */


.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.text-lowercase { text-transform: lowercase; }
.text-uppercase { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; }

.width-100p { width: 100%; }
.width-50p { width: 50%; }
.width-auto { width: auto; }


.vertical-center-items {
	display: inline-flex;
	align-items: center;
}

a.no-underline {
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
	/*
		Should not be used for styling.
		Use Material Components Typography styles:
		mdc-typography
		mdc-typography--display4
		mdc-typography--display3
		mdc-typography--display2
		mdc-typography--display1
		mdc-typography--headline
		mdc-typography--title
		mdc-typography--subheading2
		mdc-typography--subheading1
		mdc-typography--body2
		mdc-typography--body1
		mdc-typography--caption
		mdc-typography--button

		https://material.io/components/web/catalog/typography/
	*/
}

.pointer:hover {
	cursor: pointer;
}


/* ********************************************************** */
/* FLOATING LABEL                                             */
/* ********************************************************** */

/* FLOATING LABEL is a generic version of the MDC floating label */

label.floating-label,
.mdc-floating-label {
	text-transform: uppercase;
	font-size: 14px;
	color: #28509B !important;
}

.mdc-floating-label.mdc-floating-label--float-above {
	font-size: 13px;
}

label.floating-label {
	font-size: 12px;	/* mimics the floating-label float above class */
	display: block;
}

label.floating-label.small {
	font-size: 10px;
	min-height: 13px;
	display: flex;
	align-items: center;
}

label.floating-label.is-required:after {
	/* Add an asterisk after the label when required is true */
	content: "*";
	color: #f44336;
}

.title-text {
    font-size: 30px;
    line-height: 30px;
    color: #4f4f4f;
    font-weight: 300;
    text-transform: uppercase;
}

.subtitle-text {
    font-size: 13px;
}

.title-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: center;
}

.left-container,
.right-container {
	flex: 0 1 auto;
}

.center-container {
	flex: 1 0 auto;
}

.title {
	font-size: 30px;
	font-weight: 300;
	text-transform: uppercase;
	padding-right: 20px;		/* title has right padding to keep title-line for hitting it */
}

.title-line {
	height: 1px;
	/* line color is defined as a separate class in the markup */
}

.svg-container {
    float: left;
    margin-right: 16px;
}

.align-title-subtitle {
	display: block;
}

.subtitle-text-style {
	text-transform: uppercase;
	font-size: 10px;
	line-height: 13px;
	color: #28509b;
}

/* Fix for upload dialog on model */
.footerCmps {
	display: block;
}