/* used for now for pages.js */
/*
.tab_container {

}
.tab_header_container {
	width: 100%;
	height: 50px;
	background-color: #ccc;
	position: relative;
}
.tab_header {
	height: 90%;
	width: 100px;
	background-color: blue;
	border-radius: 5px 5px 0 0;
	bottom: 0;
	position: absolute;
	
}
.tab_content_container {

}

.tab_body_child_container {
	display:none;
}
.tab_body_child_container {
	display:none;
}

.tab_body_child_container.tab_active {
	display:block;
}

.tab_content {
	z-index: 0;
}
*/
div.spa-grid {
	cursor: pointer;
}

div.spa-grid.active {
	cursor: crosshair;
} 

.pages-sidebar  {
	overflow-y: auto;
	
}

.pages-sidebar li {
/*	
	display:inline-block;
	border:1px solid #ccc;
	margin: 5px;
	
	width: 50px;
	text-align: center;
	height: 50px;
*/	
}

.pages-sidebar li span {
	cursor: pointer;
}

div.pages-sidebar-top {
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px dashed #ccc;
}

.spa-shell-main-nav .pages-sidebar li {
	padding: 0;
}

li.pages-sidebar-element {
	/*background: none;*/
	/*background: #313131;*/
	/*background: #3a0088;*/ /*dark purple*/
	/*background: seagreen;*/
	/*background: #919191;*/
	/*color: #f1f1f1;*/
	padding: .75rem .25rem;
	background: none;
	border: none;
	color: #313131;
	color: #930077;
	color: #3a0088;
	cursor: pointer;
}

li.pages-sidebar-element:hover {
	background-color: #e1e1e1;
}

li.pages-sidebar-element i {
	font-size: 1rem; /* 16 */
	color: #313131;
	color: #930077;
	color: #3a0088;
	margin-right: .25rem;
	
}

li.pages-sidebar-element.active, li.pages-sidebar-element.active:hover {
	/*background-color: red;*/
}

div.pages-canvas-element {
	background-color: white;
	background-color: #f1f1f1;
	position: absolute;

	width: 300px;
	height: 300px;

	cursor: pointer;
	z-index: 0;
	/*opacity: .99;*/
	
	border: 1px solid #ccc;
}


div.pages-sidebar-container {
	position:sticky;
    /* following 2 copied from bootstrap website*/
	/*top: 4rem;
    height: calc(100vh - 4rem);
	*/
	max-height: calc(100vh - 9rem);
    /*overflow-y: auto;*/
	/*margin-right: -15px;
    margin-left: -15px;*/
	
	background-color: #f1f1f1;
	background-color: #fff;
	background: transparent;
	
	/*border-top: 1px solid #e1e1e1;*/
	/*border-right: 1px solid #e1e1e1;*/
	
	/*background-color: #313131;*/
	
	/*height: calc(100vh - 60px);*/
}

div#page_builder_table_select_field_container {
	/* 1-15-20 	THIS IS A TEMPORARY HACK FOR THE DATA_FIELDS LEFT SIDEBAR */
	/*height: 400px;*/
	overflow-y: auto;
}

div.table_select_field_container {
/*	
	max-height: calc(100vh - 9rem);
    overflow-y: auto;
	*/
}

div.page_root {
	font-size: .875rem;/* 14px */
	
}

/* div.properties_container */
div#row-main {
	font-size: .875rem;/* 14px */
	font-size: .75rem; /* 12px */
	font-size: .8125rem; /* 13px */
	
	
}

div.spa-grid.active div.pages-canvas-element {
	cursor: crosshair; /* keep crosshair if grid is active, which means new element can be created*/
} 
div.pages-canvas-element[data-type='form'] {
	background:transparent;
}

div.pages-canvas-element[data-type='group'] {
	background:transparent;
	background-color: #000;
	opacity: .2;
}


div.pages-canvas-element[data-type='form'] div.pages-canvas-element-content-container{
/*	
	background-color: #000;
	opacity: .2;
*/	
}

div.breadcrumb_container_row {
	/*margin-bottom: .5rem;*/
	padding-bottom: .5rem;
	/*border-bottom: 1px solid #e1e1e1;
}

div.form_element_container {
	/*margin:10px;*/
	/*width: 100%;*/
}

div.form_element_container textarea {
	width:100%;
}

div.form_element_container[data-element_type="form"] {
	width:100%;
	height:100%; /* HEIGHT 100% DOESN'T WORK IF THERE IS SOMETHING ELSE ALREADY IN THE ACTIVE COLUMN*/
}

div.form_element_container[data-element_type="page_container"] {
	width:100%;
	height:100%;
	
}

div.form_element_container[data-element_type="table"], div.form_element_container[data-element_type="graph_container"],  div.form_element_container[data-element_type="calendar_container"], div.form_element_container[data-element_type="kanban_container"]{
	width:100%;
	height:100%;
	
}

div.form_element_container[data-element_type="table"].ui-draggable-dragging, div.form_element_container[data-element_type="graph_container"].ui-draggable-dragging, div.form_element_container[data-element_type="calendar_container"].ui-draggable-dragging, div.form_element_container[data-element_type="kanban_container"].ui-draggable-dragging {
	max-width:200px;
	max-height:100px;
	
}

div#drag_carrot {/* normal horizontal line*/
	border:1px solid #000;
	height:2px;
	opacity: 0.7;
}

div#drag_carrot.vertical_carrot {/*vertical line for an inline column*/
	border:1px solid #000;
	height:40px;
	width:2px;
	opacity: 0.7;
	display:inline-block;	
}

div.pages-canvas-element[data-element_type='form'] div.pages-canvas-element-content-container div.form_element_container {/* QUICK CLASS HACK */
	display:block;
}

div.pages-canvas-element[data-element_type='form'] div.pages-canvas-element-content-container div.form_element_container.active {/* QUICK CLASS HACK */
	border: 1px solid purple;
}

div.pages-canvas-element[data-element_type='column'] {
	width: 5px;
	background: #999;
	border:0px;
}

div.pages-canvas-element[data-element_type='row'] {
	height: 5px;
	background: #999;
	border:0px;
}

div.pages-canvas-element[data-element_type='table'] {
	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:
        50px 15px,
        50px 15px,
        50px 15px,
        50px 15px,
        50px 15px,
        50px 15px,
        50px 15px,
        50px 15px;
	background-color: #fff;
	
}

div.pages-canvas-element.tab_container {
	width: 800px;
	height: 400px;
	background-color: #000;
}

div.pages-canvas-element.active {
	border: 1px solid red;	
	/*border: 5px solid transparent;*/
	cursor: move;
	/*opacity: 1;*/
}

div.pages-canvas-element-content-container {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position:relative;
	z-index: -1; /* put behind the blue square resizer spans */
}


/* FOLLOWING GROUP HACKS!!!!!!!!!!!!!!! */
div.pages-canvas-element-content-container span {
	display:inline-block !important;
	width: auto !important;
	height: auto !important;
	background-color: #fff !important;
	position: relative !important;
}

div.pages-canvas-element span {
	display: none;
	position: absolute;
	background-color: blue;
	width: 10px;
	height: 10px;
}

div.pages-canvas-element.active span {
	display: block;
}

div.pages-canvas-element span.pages-canvas-element-top-left {
	top: -5px;
	left: -5px;
	cursor: nw-resize;
}
div.pages-canvas-element span.pages-canvas-element-top-right {
	top: -5px;
	right: -5px;
	cursor: ne-resize;
}
div.pages-canvas-element span.pages-canvas-element-top-middle {
	top: -5px;
	left: 50%;
	margin-left: -5px;  /* half the box width */
	cursor: n-resize;
}
div.pages-canvas-element span.pages-canvas-element-left {
	left: -5px;
	top: 50%;
	margin-top: -5px;
	cursor: w-resize;
}
div.pages-canvas-element span.pages-canvas-element-right {
	right: -5px;
	top: 50%;
	margin-top: -5px;
	cursor: e-resize;	
}
div.pages-canvas-element span.pages-canvas-element-bottom-left {
	bottom: -5px;
	left: -5px;
	cursor: sw-resize;
}
div.pages-canvas-element span.pages-canvas-element-bottom-right {
	bottom: -5px;
	right: -5px;
	cursor: se-resize;
}
div.pages-canvas-element span.pages-canvas-element-bottom-middle {
	bottom: -5px;
	left: 50%;
	margin-left: -5px;  /* half the box width */
	cursor: s-resize;
}


/******************  FORM SIDEBAR **********************/
/* JUST TEMPORARY*/
.pages-sidebar .select_table_field_container li {
	display:block;
	

}

/************** FORM **************************/
div.pages-canvas-element label {
	/*display: block;*/
}

/*************** DATA TABLES **************************/

div#property_form_container label {
	display: block;
}

div.tab_header_container {
	/*margin-bottom:20px;*/ /* this is a quick hack to fix the tabs being too tall - removed 2-20-20*/
	margin-bottom: 10px;
}

div.main_panel {
	width: 80%;
	display:inline-block;
	float:left;
}
div.help_panel {
	background-color: #f1f1f1;
	width: 20%;
	display:inline-block;	
	height:100%;
	height: 500px;
}
div.pages-sidebar div.table_select_container li {
	border: 0;
	width: 100%;
	text-align: left;
	height: auto;
}

.hidden {
	display:none;
}

.triangle, .down_triangle, .up_triangle, .right_triangle {	
	/*border-top-color: #AAAAAA;*/
	/*border-color: #C0C0C0 transparent transparent;   */
	border-color: #444 transparent transparent; 
	border-style: solid dashed dashed;
	border-width: 5px 5px 0;
	padding: 0px;
	display: inline-block;
	font-size: 0px;
	width: 0;
	height: 0;
	/*left: 0px;*/
	line-height: 0;
	padding-top: 1px;
	position: relative;
	/*top: -1px;*/
	/*z-index: 999;*/

}
.up_triangle {
	border-color: transparent transparent #444;
	border-style: dashed dashed solid;
	border-width: 0px 5px 5px;
}
.right_triangle {
	border-color: transparent transparent transparent #444;
	border-style: dashed dashed dashed solid;
	border-width: 5px 0px 5px 5px;
}

div.form_message_container {	
	position: absolute;	
	padding: 2px 10px;	
	border-radius: 4px;   
}
div.form_message_container[data-message_type='error'] {
	color: #fff;
	background-color: #f44336; /* red */ 
	
	/* following is bootstrap 
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;	
	*/	
}
div.form_message_container[data-message_type='warning'] {
	color: #000;
	background-color: #ffeb3b; /* yellow */ 
}
div.form_message_container[data-message_type='tip'] {
	color: #fff;
	background-color: #2196F3; /* blue */ 
}
div.form_message_container[data-message_type='success'] {
	color: #fff;
	background-color: #4CAF50; /* green */ 
}

/*div.form_error_container .triangle {*/
	div.form_message_container .triangle {
	padding:0;	
	padding-top: 1px; /* USE THIS???*/
	position: absolute;
	border-color: transparent;
}

div.form_message_container[data-position='top'] .triangle { /* down triangle*/
	bottom:-5px; /* matches triangle size*/
	left:5px;
}
div.form_message_container[data-position='bottom'] .triangle {/* up triangle */
	border-style: dashed dashed solid;
	border-width: 0px 5px 5px;	
	top:-5px; /* matches triangle size*/
	left:5px;
}
div.form_message_container[data-position='left'] .triangle {/* right triangle */
	border-style: dashed dashed dashed solid;
	border-width: 5px 0px 5px 5px;	
	top:5px; 
	right:-5px; /* matches triangle size*/
}
div.form_message_container[data-position='right'] .triangle {/* left triangle */
	border-style: dashed solid dashed dashed;
	border-width: 5px 5px 5px 0px;
	top:5px; 
	left:-5px; /* matches triangle size*/
}
/* following 3 sections from bookstrap */
/* already have a close somwhere else in css */
.close_x {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
}

a.close_x {
	text-decoration: none !important;
    font-size: 18px !important;
    line-height: 1.2;	
}

.form_message_container a.close_x {
	position: relative;
    top: -2px;
    right: -21px;
    color: inherit;
}

div.form_message_container[data-message_type='error'][data-position='top'] .triangle {/* down triangle*/
	border-top-color: #f44336; /* red */ 
}
div.form_message_container[data-message_type='warning'][data-position='top'] .triangle {/* down triangle*/
	border-top-color: #ffeb3b; /* yellow */ 
}
div.form_message_container[data-message_type='tip'][data-position='top'] .triangle {/* down triangle*/
	border-top-color: #2196F3; /* blue */ 
}
div.form_message_container[data-message_type='success'][data-position='top'] .triangle {/* down triangle*/
	border-top-color: #4CAF50; /* green */  
}
div.form_message_container[data-message_type='error'][data-position='bottom'] .triangle {/* up triangle*/
	border-bottom-color: #f44336; /* red */ 
}
div.form_message_container[data-message_type='warning'][data-position='bottom'] .triangle {/* up triangle*/
	border-bottom-color: #ffeb3b; /* yellow */ 
}
div.form_message_container[data-message_type='tip'][data-position='bottom'] .triangle {/* up triangle*/
	border-bottom-color: #2196F3; /* blue */ 
}
div.form_message_container[data-message_type='success'][data-position='bottom'] .triangle {/* up triangle*/
	border-bottom-color: #4CAF50; /* green */  
}
div.form_message_container[data-message_type='error'][data-position='left'] .triangle {/* right triangle*/
	border-left-color: #f44336; /* red */ 
}
div.form_message_container[data-message_type='warning'][data-position='left'] .triangle {/* right triangle*/
	border-left-color: #ffeb3b; /* yellow */ 
}
div.form_message_container[data-message_type='tip'][data-position='left'] .triangle {/* right triangle*/
	border-left-color: #2196F3; /* blue */ 
}
div.form_message_container[data-message_type='success'][data-position='left'] .triangle {/* right triangle*/
	border-left-color: #4CAF50; /* green */  
}
div.form_message_container[data-message_type='error'][data-position='right'] .triangle {/* left triangle*/
	border-right-color: #f44336; /* red */ 
}
div.form_message_container[data-message_type='warning'][data-position='right'] .triangle {/* left triangle*/
	border-right-color: #ffeb3b; /* yellow */ 
}
div.form_message_container[data-message_type='tip'][data-position='right'] .triangle {/* left triangle*/
	border-right-color: #2196F3; /* blue */ 
}
div.form_message_container[data-message_type='success'][data-position='right'] .triangle {/* left triangle*/
	border-right-color: #4CAF50; /* green */ 
}

.highlight {/*taken from bootstrap */

/*    
	padding: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    background-color: #f7f7f9;
	
    padding: 1.5rem;
    margin-right: 0;
    margin-left: 0;
    border-width: .2rem;

    position: relative;
    padding: 1rem;
    margin: 1rem -15px 0;
*/	
    border: solid #f7f7f9;
    border-width: 3px;
	margin: 5px;
	padding: 15px;
	/*background-color: #f7f7f9;*/
	
}

#waasio-main .table td, .table th {
	padding: .25rem;
	position: relative; /* need this for error containers/toolips in editable tables*/
}

#waasio-main .table th a {
	font-weight: normal;
	text-decoration: none;
}


li.table_field.draggable.ui-draggable-dragging { 
	background: red; 
	width:100px;
} 

/* FOLLOWING FOR EMAIL CLIENT FUNCTIONALITY */
table#email_table tr.active_email {
	/* NOTE, THIS IS THE SCHEMA FOR ALERT PRIMARY IN BOOTSTRAP */
	color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff;
	
}