/* 
spa.shell.css
shell styles
*/

/*
.spa-shell-main-nav {
	position: relative;
}

.spa-shell-main-content {  
	position: relative;
	width: 100%;
}
*/
 
 
 .spa-shell-main-content {/* temp hack to undo what is in spa.shell.css*/
	
	/*overflow-y: hidden;*/
}

.spa-main-toolbar {
	display: block;
	width: 100%;
	background: #e1e1e1;
	background: #dbe2ef;
	background: #fff;
	
	background:none;
	
	min-height: 113px; /* room for 3 toolbar rows*/ 
	/*padding:10px;*/
	
}


.spa-main-toolbar .btn-group {
	/*border: 1px solid #ced4da;
	border-radius: .25rem;*/
	
}

.spa-main-toolbar .input-group-text {

/*	
	border-right: 1px dashed #3f72af;
	border-radius: 0;
*/	
}

.spa-main-toolbar .btn-sm, .spa-main-toolbar .btn {
	font-size: .8125rem;
}

.spa-main-toolbar .btn-dark {

	color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
	background:none;	
	border:none;

}

.spa-main-toolbar i.fas {
	color: #3a0088; /* dark purple */	
	font-size: 16px;
	
}

.spa-main-toolbar .btn-dark:hover {
	background: #3f72af;
	/*border-radius: .25rem;*/
	color: #fff;
	
	
}

#main_toolbar .btn-group {
	border: 1px solid #e1e1e1;
	border-radius:6px;
	margin: 5px 0px;
	/*background-color:#f1f1f1;*/
	background: transparent;
	/*height: 40px;*/
	border:0px;
	
	
}

#main_toolbar .btn-group .btn-group {
	border: none;
	height:auto;
}

#main_toolbar .btn-group .input-group-text {
	font-size: .8125rem;
	border:none;
	background:none;
	font-weight: bold;
	/*color: #3f72af;*/
	color: #3a0088; /* dark purple */	
	width: 100px;
	border-right: 1px solid #ccc;
	border-radius: 0px;
	box-shadow: 1px 0px #f1f1f1;
	
}

#main_toolbar .btn-group button:hover {
	/*color: #fff;*/
	background-color: #3a0088; /* dark purple */	
	
	background-color: #e1e1e1;
	color: #000;
	
}

#main_toolbar .btn-group button:hover i.fas {
	/*color: #fff;*/
}

.NOTUSED.spa-main-form {  
	/*background-color: #434343;
    background-image:linear-gradient(#434343, #282828);*/	
	background: #f1f1f1;
	/*min-height: 100%;
	min-width: 100%;*/
	
	/*height: 100%;*/
	/*width: 100%;*/
	width:70%;
	height: 100%;
	
		
	/*border: 1px solid blue;*/
	position: relative;
	overflow-x: auto;
	overflow-y: auto;
	display:inline-block;	
}

.NOTUSED.spa-main-properties-container {
	width: 30%;
	height:100%;
	display:inline-block;
	overflow-x: auto;
	overflow-y: auto;
}


.spa-grid .page_root {
	background:
        linear-gradient(-90deg, rgba(0, 0, 0, .03) 1px, transparent 1px),
        linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
        linear-gradient(-90deg, rgba(0, 0, 0, .03) 1px, transparent 1px),
        linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
        linear-gradient(transparent 3px, transparent 3px, transparent 78px, transparent 78px),
        linear-gradient(-90deg, transparent 1px, transparent 1px),
        linear-gradient(-90deg, transparent 3px, transparent 3px, transparent 78px, transparent 78px),
        linear-gradient(transparent 1px, transparent 1px), transparent;
    background-size:
        10px 10px,
        10px 10px,
        10px 10px,
        10px 10px,
        10px 10px,
        10px 10px,
        10px 10px,
        10px 10px;
	/*background-color: #f9f9f9;*/
	background-color: #fff;
	
}

.spa-grid-overlay {
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	opacity: .5;
	background-color: #000;
	/*z-index:-1;*/
	display:none;
}

.spa-grid.disabled {
	/*background-color: #292929;*/
}

.spa-main-form-grid {
	/*
	position: absolute;
    right: 0;
    top: 0;
	*/
	display: inline-block;
	border: 1px solid red;
	height: 100%;
	width: 100%;
	
	
	
	background:
        linear-gradient(-90deg, rgba(0, 0, 0, .03) 1px, transparent 1px),
        linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
        linear-gradient(-90deg, rgba(0, 0, 0, .03) 1px, transparent 1px),
        linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
        linear-gradient(transparent 3px, transparent 3px, transparent 78px, transparent 78px),
        linear-gradient(-90deg, transparent 1px, transparent 1px),
        linear-gradient(-90deg, transparent 3px, transparent 3px, transparent 78px, transparent 78px),
        linear-gradient(transparent 1px, transparent 1px), transparent;
    background-size:
        10px 10px,
        10px 10px,
        10px 10px,
        10px 10px,
        10px 10px,
        10px 10px,
        10px 10px,
        10px 10px;
		background-color: #f1f1f1;
}

.spa-main-form-grid_not_used {
	/*background: pink;*/
	padding: 10px;
/*	
	 background-color: transparent;
    background-image:       linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent);
  height:100%;
  background-size:50px 50px;
  */
  /*
  background-color: #fff;
background-size: 100% 1.2em;
background-image: -webkit-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
                  -webkit-linear-gradient(#eee .05em, transparent .05em);
background-image: -moz-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
                  -moz-linear-gradient(#eee .05em, transparent .05em);
background-image: -ms-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
                  -ms-linear-gradient(#eee .05em, transparent .05em);
background-image: -o-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
                  -o-linear-gradient(#eee .05em, transparent .05em);
background-image: linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
                  linear-gradient(#eee .05em, transparent .05em);
				  
				  */
	/*
  -o-text-overflow: clip;
  text-overflow: clip;
  background: -webkit-linear-gradient(90deg, #FFFFFF 2px, rgba(0,0,0,0) 2px), -webkit-linear-gradient(0deg, #FFFFFF 2px, rgba(0,0,0,0) 2px), -webkit-linear-gradient(90deg, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px), -webkit-linear-gradient(0deg, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px), rgb(34, 102, 153);
  background: -moz-linear-gradient(0deg, #FFFFFF 2px, rgba(0,0,0,0) 2px), -moz-linear-gradient(90deg, #FFFFFF 2px, rgba(0,0,0,0) 2px), -moz-linear-gradient(0deg, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px), -moz-linear-gradient(90deg, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px), rgb(34, 102, 153);
  */
  /*background: linear-gradient(0deg, #FFFFFF 2px, rgba(0,0,0,0) 2px), linear-gradient(90deg, #FFFFFF 2px, rgba(0,0,0,0) 2px), linear-gradient(0deg, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px), linear-gradient(90deg, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px), rgb(34, 102, 153);*/
  
  background: linear-gradient(0deg, #FFFFFF 2px, rgba(0,0,0,0) 2px), linear-gradient(90deg, #FFFFFF 2px, rgba(0,0,0,0) 2px), linear-gradient(0deg, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px), linear-gradient(90deg, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px), #f1f1f1;
  
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
  /*-webkit-background-origin: padding-box;*/
  background-origin: padding-box;
  /*-webkit-background-clip: border-box;*/
  background-clip: border-box;
  /*-webkit-background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;*/
  /*background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;*/
  background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;

/*
	 background:
        linear-gradient(-90deg, rgba(0, 0, 0, .03) 1px, transparent 1px),
        linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
        linear-gradient(-90deg, rgba(0, 0, 0, .03) 1px, transparent 1px),
        linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
        linear-gradient(transparent 3px, transparent 3px, transparent 78px, transparent 78px),
        linear-gradient(-90deg, transparent 1px, transparent 1px),
        linear-gradient(-90deg, transparent 3px, transparent 3px, transparent 78px, transparent 78px),
        linear-gradient(transparent 1px, transparent 1px), transparent;
    background-size:
        10px 10px,
        10px 10px,
        10px 10px,
        10px 10px,
        10px 10px,
        10px 10px,
        10px 10px,
        10px 10px;			  
		*/		  
}

/* following added 3-12-18 to make grid work with bootstrap rows and cols */

.spa-grid {
	/*height:100%;*/
	/*height: 300px;*/
	position:sticky;
	min-height:300px;
	height: 650px; /* hack for testing on regular monitor */
	
	height:400px;
	
	/*height: calc(100vh - 20rem);*/ /* 20 rem is just approx hack for now*/
    overflow-y: scroll;
	overflow-x: scroll;
}

.spa-grid .page_root {
	height:100%;
	/*height: auto;*/
}

.spa-grid .row {
	position:relative;/* need this for drag and drop to change row heights*/
	height:100%;
	/* min-height: 300px */
	/*height:300px;*/ /* this is the default row height*/
	margin:0px;	
	/*border: 0px dashed red;*/
	/*height: calc(100vh - 20rem); *//* 20 rem is just approx hack for now*/
}

.spa-grid .row.auto_height {
	height:auto;
	min-height:100px;
}


.spa-grid .row .row {
	/*height:auto;*/
}
.spa-grid .row.active {
	/*border: 0px solid red;*/
	background: rgba(0, 255, 0, 0.1); /* green */
	
}

.spa-grid .form-group.row {
	min-height:0; /* need this for bootstrap LABELS that are left/right of the field*/
}


.spa-grid .col {
	/*height:100%;	*/
	height: auto; /* 11-25-19 not sure this will work*/
	padding:0px;
	border: 1px dashed blue;
	/*margin: 1px;*/
}

.spa-grid .col .col {/* this doesn't work yet - but need to work on it so cols (and rows) always have only 1 border width if there are nested cols*/
	border-left: none;
	border-top:none;
}

.spa-grid .col.active {	
	/*border: 1px solid blue;*/
	background: rgba(0, 0, 255, 0.1); /* blue */
	/*background-color: blue;
	opacity:.1;*/
}


.spa-grid .form_container {
	height: 100%;
	border: 1px dashed red;
	background: rgba(255, 0, 0, 0.1);/* red */
	background: rgba(0, 0, 255, 0.05);/* blue */
}

.spa-grid .form_container.active {
	/*border: 1px solid red;*/
	/*background-color: red;
	opacity: .1;*/
	background: rgba(255, 0, 0, 0.2);/* red */
}


.spa-grid .col.active, .spa-grid .col.active:hover {
	/*background-color: red;*/
	/*opacity: .2;*/
}

.spa-grid .col.active_element, .spa-grid .col.active_element:hover {
	/*border: 1px dashed #000;*/
/*	
	outline:1px dashed #000;
	outline-offset: -15px;
*/	
	/*background-color: blue;*/
	/*opacity: .1;*/
	/*background: rgba(0, 0, 255, 0.1);*/ /* note: background makes opacity but does not affect child elements */
/*  margin-left: 15px;*/ /* to match the padding of the bootstrap col*/
/*	margin-right: 15px;*//* to match the padding of the bootstrap col*/
}

 .spa-grid .col:hover {
	/*background-color: red;*/
	/*opacity: .1;*/
	
	/*border: 1px dashed #000;*/
	/*background: rgba(255, 0, 0, 0.1);*/
}

.spa-grid .tab_container {
	height: 100%;
}

.spa-grid .tab_container .tab_body_container {
	height: 100%;
}
.spa-grid .tab_container .tab_body_child_container {
	height: 100%;
}

.spa-grid .tab_container .row {
	
}

.spa-grid .element_active { 
	/* 7-29-19 changed to element_active because bootstap uses .active for tabs*/
	border: 2px dashed #000 !important; /* temp use of important to override col borders top and left that are 0px above*/
	
}

.spa-grid .col.element_active { 
	/* 7-29-19 changed to element_active because bootstap uses .active for tabs*/
	border: 2px dashed blue !important; /* temp use of important to override col borders top and left that are 0px above*/	
}

.spa-grid .row.element_active { 
	/* 7-29-19 changed to element_active because bootstap uses .active for tabs*/
	border: 2px dashed orange !important; /* temp use of important to override col borders top and left that are 0px above*/	
}


.spa-main-form input, .spa-form select, .spa-form textarea {
	display:inline-block;
	/*border: 1px solid red;*/
}
.spa-main-form label {
	display: inline-block;
	/*border: 1px solid blue;*/
}

.spa-main-form-field {
	display: inline-block;
	padding: 10px; /* needs to match the grid */
	margin: 10px; /* needs to match the grid */
	border: 1px solid #999;
	float: left;
	clear: both;
	
}

.spa-main-form-properties {
	position: absolute;
	right: 0;
	top: 0;
	height: 400px;
	width: 200px;
	background: pink;
}

.col.col_inline .form_element_container {/* this is for setting cols to be inline (not using bootstrap's own inline functionality*/
	display: inline-block;
}

.col.col_inline .col.col_block .form_element_container {/* need this so that nested cols of col-inline are block and dont inherit inline*/
	display: block;
}

#container_login {
	max-width: 500px;
	border: 1px solid #e1e1e1;
	border-radius: .25rem;
	margin:auto;
	margin-top: 10rem;
	padding: 1rem;
	background-color: #f1f1f1;
}