/* 
	global.css

	use this file for app-wide settings
	include the :root shown below
*/

:root {
	--tcare-primary: #391A52;
	--tcare-secondary: #FE4672;
	--tcare-third: #b9e4f2;			
	--tcare-fourth: #d6f9ea;
	/*
	--tcare-primary: #123456;
	--tcare-secondary: #a4653e;
	*/

	/* Madison named colors */
	--tcare-dark-purple: #391A52;
	--tcare-ruby: #FE4672;
	--tcare-lavendar: #D494FB;
	--tcare-mint: #D6F9EA;

	--tcare-aqua: #B9E4F2;
	--tcare-cream: #FEF9F1;
	--tcare-purple: #611C73;
	--tcare-dull-purple: #887392;
	--tcare-light-purple: #F1EFF1;
	--tcare-purple-60: #A075A5;
	--tcare-periwinkle: #B6CAFF;

	--tcare-white: #ffffff;
	--tcare-gray: #aaaaaa;
	--tcare-light-gray: #dddddd;
	--tcare-dark-gray: #888888;
	--tcare-black: #000000;
	--tcare-disabled: #aaaaaa;
	--tcare-border: #aaaaaa;
	--tcare-label: #444444;

	--tcare-field-label: #111111;
	--tcare-field-value: #391A52;
	--tcare-field-bg-readonly: #E9E5EA;
	--tcare-form-bg: #F9F7FA;
	--tcare-field-diff: #EAC8F6;
	--tcare-left-bg: #F9F7FA;
	--tcare-right-bg: #F6E5F3;

	/* 6/29 TaxonomyMenu colors */
	--tcare-lavendar: #D494FB;
	--tcare-purple-1: #D494FB;
	--tcare-purple-2: #823295;
	--tcare-purple-3: #611C73;
	--tcare-purple-4: #391A52;

	--tcare-error: #cc0000;
	--tcare-warning: #ff5522;
	--tcare-success: #00aa00;
	--tcare-selected: red;

	/* more as needed */

	--menu-0: #C4D3FC;
	--menu-1: #D3DDF9;
	--menu-2: #E1E6F7;
	--menu-3: #F0F0F4;
	--menu-4: #C4D3FC;
	
}

html, body {
	position: relative;
	width: 100%;
	font-size: 16px;
}

body {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	/* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; */
	/* background-color: var(--tcare-mint); */
	font-family: 'Manrope';
}

.App {
	position: relative;
	/* width: 100%; */
	/* height: 100%; */
}

.primary {
	color: var(--tcare-primary);
}

.secondary {
	color: var(--tcare-secondary);
}

/************************************   PAGE RELATED   *********************************/

/* the BaseLayoutPage in the app - there is only one */
/* contains the Header and the page content */
/* need to make these absolute for overlay transitions */
/* will never have a height even when filled with content */
.base-layout-page {
    position: absolute;
    top: 0px;
    width: 100%;
}

/* this should start beneath Header if using one */
/* this is set in the BaselayoutPage */
.page-content-container {
    position: absolute;
    width: 100%;
    /* border: 2px solid red; */
}

/* viewable area of the "Pages"  */
.page-content {
    position: absolute;
    top: 0px;
	left: 0px;
	right: 0px;
    width: 96%;
    max-width: 1300px;
    margin: 0px auto;
	z-index: 0;
    /* border: 2px solid green; */
}

/************************************   FORM RELATED   *********************************/
/*
.field-pair {
	min-height: 1.5em;
	margin-bottom: 5px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}

.field-pair .label {
	width: 180px;
	min-height: 1.5em;
	font-size: .9em;
	text-align: left;
	display: flex;
	color: var(--tcare-label);
}

.field-pair .value {
	width: calc(100% - 180px);
	min-height: 1.5em;
	font-size: 1em;
	text-align: left;
	padding: 2px;
}

.field-input {
	width: calc(100% - 16px);
	font-size: 1em;
	padding: 8px;
	background-color: rgba(255, 255, 255, .5);
	border: 1px solid gray;
	border-radius: 5px;
	outline-color: var(--tcare-primary);
}

.field-input.disabled {
	background-color: rgba(0, 0, 0, .1);
}
*/

/************************************   ELEMENTS   *********************************/

h3 {
	color: var(--tcare-primary);
	font-weight: normal;
}

.ellipsis {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;	
}

/*********************************   SERVICE FIELD GROUPS   ******************************/

.field-group {
	width: 100%;
	margin-bottom: 20px;
}

.field-group .expand-area {
	user-select: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}

.field-group .expand-row {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.field-group .fields-area {
	padding-top: 20px;
}

:global(.field-group .expand-area svg) { fill: var(--tcare-primary); width: 24px; }
:global(.field-group .expand-area svg:hover) { fill: var(--tcare-secondary); }


.field-group .title {
	margin-left: 5px;
	font-size: 16px;
	font-weight: bold;
}

.sfield-group .diff-count {
	font-size: .8em;
	color: var(--tcare-secondary);
}


/*********************************   DATA FIELDS   ******************************/

.data-field {
	margin: 3px 0px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	/* border: 1px solid black; */
}

.data-field .label {
	width: 100px;
	color: var(--tcare-field-label);
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 400;
	font-size: 12px;
	line-height: 14px;
	/* border: 1px solid red; */
}

.data-field .value {
	width: calc(100% - 150px);		/* 100px label + 50px icons */
	min-height: 30px;
	color: var(--tcare-field-value);
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	/* line-height: 16px; */
	display: flex;
	/* border: 1px solid green; */
}

/* TAXONOMY FIELDS HAVE LONGER LABELS (per Lindsey) */

.data-field .tax-label {
	width: 180px;
}

.data-field .tax-value {
	width: calc(100% - 230px);		/* 180px label + 50px icons */
}

.data-field .icons {
	display: flex;
	width: 50px;
	margin-left: 5px;
}

/* arrow, pencil and clear icons */
.data-field .icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
}

.data-field .icon svg {
	fill: var(--tcare-purple) !important;
	width: 24px;
	height: 24px;
	outline: none;
}

.data-field .icons .icon svg:hover {
	fill: var(--tcare-secondary) !important;
}


/* HTML INPUT ELEMENT */
.data-field input {
	width: calc(100% - 20px);            				/* of the value container minus padding */
	padding: 5px 5px 5px 15px;

	color: var(--tcare-field-value);
	background-color: var(--tcare-field-bg-readonly);

	font-family: 'Manrope';
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 16px;

	border: none;
	border-radius: 4px;
}


/* TAXONOMIES FAKE INPUT */
.data-field .fake-input {
	width: calc(100% - 20px);            				/* of the value container minus padding */
	padding: 5px 5px 5px 15px;

	font-size: 14px;
	color: var(--tcare-field-value);
	border: none;
	border-radius: 4px;
	/* border: 1px solid black; */
}

/* HTML DROPDOWN SELECT */
.data-field select {
	height: 36px !important;         					/* for Safari ? */
	width: 100%;										/* special for select elements */
	padding: 5px 5px 5px 15px;

	font-size: 1em;
	color: var(--tcare-field-value);
	border: none;
	border-radius: 4px;
}


.tcare-form {
	width: 95%;
	padding: 2% 1% 0% 4%;
	min-width: 1000px;
	background-color: var(--tcare-form-bg);
	border-radius: 15px;
	/* border: 1px solid red; */
}


:global(.mdc-button) {
	text-transform: none;
	border-radius: 18px;
	overflow: hidden;
}





/*********************************   MEDIA QUERIES   ******************************/

@media screen and (max-width: 600px) {
	/*
	.field-pair {
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 10px;
	}
	.field-pair .label {
		width: 100%;
		margin-bottom: 5px;
	}
	.field-pair .value {
		width: 100%;
	}
	*/
	.page-content {
		width: 96%;
		margin-left: 2%;
	}	
}

@media screen and (min-width: 601px) and (max-width: 800px) {
	/*
	.field-pair {
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 10px;
	}
	.field-pair .label {
		width: 100%;
		margin-bottom: 5px;
	}
	.field-pair .value {
		width: 100%;
	}
	*/
	.page-content {
		width: 96%;
		margin-left: 2%;
	}	
}

@media screen and (min-width: 801px) and (max-width: 1300px) {
}

@media screen and (min-width: 1201px) {
}