input[required], select[required], div.required {border-left:3px solid orange;}
input.is-invalid-input, select.is-invalid-input {border-left:3px solid red !important;}

div.field.required > label > div.input-group > input{border-left:3px solid orange;}


#content > form{border:0;margin:0;}
#content.disabled ul#content-tabs, #content.disabled #tabsContent {display:none;}
/* #content.disabled {opacity:0.3;cursor:not-allowed !important; pointer-events: none;}  */

/* CART ITEMS */
ul#content-tabs > li.tabs-title i {font-size:1.5rem;position:absolute;margin-top:-5px;margin-left:5px;}

#tabsContent {height:500px; overflow:scroll}

#tabsSpecification {height:500px; overflow:scroll; border:0;}


form i.fi-shopping-cart {float:right; clear:left; color:lightgreen; font-size:1.5rem;margin-left:5px;cursor:pointer;margin-top:-.4rem;}
#shoppingCart div.cart-item {clear:both; border-top:1px dotted silver;padding-top:.5rem;}
#shoppingCart div.cart-item:first-child {border-top:0;}
#shoppingCart div.cart-item > div.cart-item {margin-left:10px;}
#shoppingCart li.cart-item i.fi-magnifying-glass {float:right !important; margin-right:20px; font-size:1.3rem;}
#mainForm li.cart-item {;margin-right:30px;}
#mainForm li.cart-item.exclude {background-color:silver;}
#mainForm li.cart-item.include {background-color:green;color:white;}

.include i.fi-shopping-cart, i.fi-shopping-cart.include ,.include+i.fi-shopping-cart {color:green} /* ,.include+i.fi-shopping-cart */
.exclude i.fi-shopping-cart, i.fi-shopping-cart.exclude,.exclude+i.fi-shopping-cart {color:red} /* ,.exclude+i.fi-shopping-cart */


a.icon {font-size:1.5rem;float:right;margin-top:-5px;margin-left:20px;color:#2199e8;cursor:pointer;}

#searchResults i.fi-shopping-cart {display:none !important}
#searchResults i.fi-arrow-up {cursor:pointer; margin-left:5px; margin-right:5px;}
#searchResults i.fi-arrow-up.dropdown {position:relative;float:right}
#searchResults i.fi-arrow-up.dropdown.member {color:orange}
#searchResults i.fi-arrow-up.dropdown.part {color:blue}

#makePackageDropdown {max-width:400px;}

#mainForm div.field-wrapper {clear:both;border-left:1px solid transparent;}
#mainForm div.field-wrapper.exclude {background-color:silver;}
#mainForm div.field-wrapper.exclude input {display:none;}
#mainForm div.field-wrapper.exclude .chosen-container {display:none;}

/* #mainForm > div.field-wrapper.children > label {font-weight:bold;font-size:1.2rem;} */
/* #mainForm > div.field-wrapper.children > div.field-wrapper.children > label {font-size:1.1rem;} */

#mainForm > div.field-wrapper div.field-wrapper  {border-left:3px solid transparent !important}
#mainForm > div.field-wrapper div.field-wrapper:hover  {border-left:3px solid #00FF00 !important}

#mainForm > div.field-wrapper > div.field-wrapper div.field-wrapper {border-left:1px dotted silver; padding-left:10px;}
#mainForm > div.field-wrapper > div.field-wrapper div.field-wrapper.field {border-left:1px solid transparent;}


div.package {border-top:1px dotted silver; padding-top:.5rem;}
.has-tip {border-bottom:0;}

.infoBox {margin:5%; 
	padding:25px; 
	border-radius:10px;
	background-color:#FCF3CF; 
	font-style:italic; 
	font-size:.9rem;}


label >  i.fi-magnifying-glass {font-size:1.1rem; cursor:pointer; color:lightblue}
i.fi-marker {color:green; cursor:pointer;}
i.fi-marker.large {font-size: 1.1rem;}

.attention {
  animation: blinker 0.5s linear infinite alternate; color:orange;
}
@keyframes blinker { to { opacity: 0; } }

.small {font-size:.5em;}



#dataSpecification {clear:both;overflow:scroll;}

div.dropdown-pane {background-color:#EEE; min-width:400px;font-size:.8rem;}

.infoLabel {font-weight:bold;}

div.callout.footer {background-color:#2199e8;color:white}
div.callout.footer a:link {color:lightblue}
div.callout.footer a:visited {color:lightblue}
div.callout.footer a:hover {color:navy}

div.parental {padding-left:15px;}

.chosen-container {width:inherit !important}

li.depth0 {padding-left:0px !important;}
li.depth1 {padding-left:15px !important;}
li.depth2 {padding-left:30px !important;}
li.depth3 {padding-left:45px !important;}
li.depth4 {padding-left:60px !important;}
li.depth5 {padding-left:75px !important;}
li.depth6 {padding-left:90px !important;}
li.depth7 {padding-left:105px !important;}
li.depth8 {padding-left:120px !important;}
li.depth9 {padding-left:135px !important;}
li.depth10 {padding-left:150px !important;}
li.depthReset {padding-left:0px !important;}

select.units {width:auto;cursor:pointer} 

div.model.depth1 {margin-top:10px; margin-bottom:20px; border-top:2px solid grey; padding-top:10px; border-left:0px !important;}
div.model.depth1 > label {}


div#modalEntity {}
div#modalEntityHeader {color:white;background-color:gray;padding:10px;margin:0;}
div#modalEntityContentContainer {max-height:500px;width:100%;overflow:scroll;padding:10px;}
div#modalEntityContent {white-space: pre-wrap}


div.input-group {margin-bottom:.3rem !important;} 
/* div.input-group-field {min-height:2.2rem !important;} */
div.input-group-field {height:auto} 
div.field-wrapper.required > div.input-group > div.chosen-container > a.chosen-single {border-left:3px solid orange}
div.field-wrapper.required > span.info {background-color:orange}

.chosen-container {display:inherit;} /*solves issue of multiple select lists overflowing a few lines, obscuring underlying next form field */
.chosen-container .chosen-drop {top:inherit;} /* solves mysterious gap issue between search box and list */

#mainForm div.tabs-panel {padding:5px} /* fields that have tabs */
#mainForm div.tabs-panel > div.field-wrapper > i.fi-shopping-cart {display:none}

.helper-text {font-style:italic;font-size:.8em;}

a.input-group-label {font-size:.9em;}

#package-tabs .tabs-title > a {padding:.5rem;font-size:.9rem;}

.tabs-title>a { padding: .75rem 1.5rem; font-size:.9rem; } /* Foundation tabs are big for tablet/mobile touch but this is only a PC app for now so made them smaller padding. */

#displayContext {position:absolute;z-index:1500;color:black;}

i.fi-shopping-cart.option {position:absolute;right:10px;margin-top:-30px;} 
i.fi-info {cursor:pointer;}r

li.group-result {display:none;}

.tooltip {
    max-width: 300px !important;
}


#formEntityLabel {
 	padding:.5rem;
 	margin:0px 0 0 0;
 	font-size:1.1rem;
 	height:2.4375rem;
 	background-color:#2199e8; 
 	color:white;
	text-transform: capitalize;
	overflow-x:scroll;
}

#tabsSpecification {
	padding-top:10px;
	border-left:1px solid #e6e6e6;
	border-right:1px solid #e6e6e6;
	border-bottom:1px solid #e6e6e6
}

#selectResource { 	
	/*background-color:#2199e8; color:white; */
 	margin-bottom:0;
 }
span.medium {font-size:0.8rem}
label {text-transform: capitalize;}

/* hack to put definition into first field label area */
#mainForm > div.field-wrapper > i {} 
#mainForm > div.field-wrapper > label {
	padding-top:5px; 
	padding-bottom:10px;
	margin-bottom:10px;
	/* border-bottom:1px solid silver; */
	min-height:2rem;
	text-transform:inherit !important;
}

i.fi-info.blue {color:#2199e8;font-size: 1.2rem}
i.fi-calendar  {color:#2199e8;font-size: 1.5rem;cursor:pointer;}
i.fi-x  {color:white;background-color:#2199e8;cursor:pointer;width:auto;}
.icon.disabled {color:silver;cursor:not-allowed; pointer-events: none;}

/* Quick fix until GEEM made foundation 6.4 compatible */
.grid-x div.cell label {line-height:1 !important; margin:0 !important;}
.grid-x div.cell input,.grid-x div.cell textarea {font-size:0.9rem;height:inherit;}

.grid-x > .small-2 {float:left;clear:both;padding-right:10px;}
.grid-x > .small-3 {float:left;clear:both;padding-right:10px;}
.grid-x > .small-1 {float:right;}
.grid-x > .small-4 {float:right;}
.grid-x > .small-8 {float:right;}
.grid-x > .small-9 {float:right;}
.grid-x > .small-10 {float:right;}

/* TO DO: make styling nicer for main ontology optgroup */

ul.disabled li a {opacity:0.3;}