/**
 *
 * InspireSoft Confidential
 *
 *
 *
 * (C) COPYRIGHT Inpiresoft Ltd. 2015
 *
 * The source code for this program is not published or otherwise
 * divested of its trade secrets.
 *
 */

/**
 * @author Ivan Milic
 * @author Ivan Dilber
 * @date 23 Jul 2015
 *
 */

.toolbar {
	position: absolute;
	left: 20%;
}

.actionmenu {
	position: absolute;
	left: 5%;
}

.footer {
	position: fixed;
	bottom: 5px;
}

i-sc-table, i-sc-th, i-sc-td {
	border: 1px solid black;
}

i-sc-tr {

}

.i-cell {
	padding-left: 10px;
}

.sys-section {
	padding: 5px;
}

.sys-section:not(:first-child) > h4 {
	margin-top: -12px;
}

.sys-section:last-child {
    margin-bottom: 10px;
}

.sys-section > table > caption {
	border-bottom: 1px solid #ddd;
}

.sys-table {
	overflow-x: inherit !important;
}

.sys-table>table {
	background-color: transparent !important;
}

.activerow {
    background-color: #e7f5fb !important;
    border-top: 1px solid #b2e5fb !important;
	border-bottom: 1px solid #b2e5fb !important;
}

.activerow.tr-expanded {
    border-bottom: 1px solid #fff !important;
}

.sys-textbox {
	width: auto;
	height: 38px;
	margin-bottom: 15px;
    line-height: 14px;
}

.sys-textbox:last-child { margin-bottom: 0; }

.sys-textbox:required {
	/*box-shadow: 1px 1px 7px rgba(200, 0, 0, 0.85); */

}

.sys-textbox .messages {
    font-size: 10px;
    line-height: 14px;
    margin-left: 10px;
}

.sys-textbox .messages > div { color: #f00; }

.sys-checkbox {
	width: auto;
	height: 38px;
    margin-bottom: 15px;
	padding-top: 18px;
    line-height: 20px;
}

.sys-checkbox:last-child { margin-bottom: 0; }

.form-control {
	width: auto;
}

.i-tablecolumn {
	border-top: 0px !important;
}

.i-collapse-icon {
	/* background-color: #f5f5f5; */

}

.sys-sectioncol-col-1, .sys-designmode-col-1 {
	width: 100%;
}

.sys-sectioncol-col-2, .sys-designmode-col-2 {
	width: 50%;
}

.sys-sectioncol-col-3, .sys-designmode-col-3 {
	width: 33.3%;
}

.sys-sectioncol-col-4, .sys-designmode-col-4 {
	width: 25%;
}

.sys-sectioncol-col-5, .sys-designmode-col-5 {
	width: 20%;
}

.sys-designmodechild .sys-sectioncol-col-1, .sys-designmodechild .sys-sectioncol-col-2,
.sys-designmodechild .sys-sectioncol-col-3, .sys-designmodechild .sys-sectioncol-col-4,
.sys-designmodechild .sys-sectioncol-col-5 {
	width: 100%;
}

.sys-designmodechild .sys-sectioncol,
.sys-designmodechild .sys-sectioncol > div,
.sys-designmodechild .sys-sectioncol > div > div[dnd-list] {
    height: 100%;
    width: 100%;
}

@media only screen and (max-width: 480px) {
    .sys-designmodechild .sys-sectioncol-col-1, .sys-designmodechild .sys-sectioncol-col-2,
    .sys-designmodechild .sys-sectioncol-col-3, .sys-designmodechild .sys-sectioncol-col-4,
    .sys-designmodechild .sys-sectioncol-col-5 {
        width: 100%;
    }
}

.sys-sectioncol {
	position: relative;
	border-top: 0px !important;
	display: inline-block;
	vertical-align: top;
	padding: 5px;
    font-size: 12px; /* because we've set size 0 on rows */
}

.sys-sectionrow {
	position: relative;
	padding: 5px;
    font-size: 0; /* kill whitespace between sections (which are inline-blocks) */
}


.i-details-cell .table {
	background-color: transparent;
}

.i-label-required:after {
	/*content:"*";*/
	/*	color:red;*/
	/*	font-size: 20px;*/

}

/*
.ng-invalid-required {
	box-shadow: 1px 1px 7px rgba(200, 0, 0, 0.85);
}

.ng-invalid-required td>label:after {
	content: "*";
	color: red;
	font-size: 20px;
}
*/
.notification {
	position: fixed;
	top: 20%;
	width: 100%;
	line-height: 0.5;
	text-align: center;
	vertical-align: middle;
}

.spacer5 {
	height: 5px;
	width: 100%;
	font-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
}

.spacer10 {
	height: 10px;
	width: 100%;
	font-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
}

.spacer15 {
	height: 15px;
	width: 100%;
	font-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
}

.spacer20 {
	height: 20px;
	width: 100%;
	font-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
}

.spacer25 {
	height: 25px;
	width: 100%;
	font-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
}

.spacer30 {
	height: 30px;
	width: 100%;
	font-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
}

.spacer35 {
	height: 35px;
	width: 100%;
	font-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
}

.spacer40 {
	height: 40px;
	width: 100%;
	font-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
}

.spacer45 {
	height: 45px;
	width: 100%;
	font-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
}

.spacer50 {
	height: 50px;
	width: 100%;
	font-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
}

.spacer100 {
	height: 100px;
	width: 100%;
	font-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
}

.spacer200 {
	height: 200px;
	width: 100%;
	font-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
}

.rTable {
	display: table;
}

.rTableRow {
	display: table-row;
}

.rTableHeading {
	display: table-header-group;
}

.rTableBody {
	display: table-row-group;
}

.rTableFoot {
	display: table-footer-group;
}

.rTableCell, .rTableHead {
	display: table-cell;
}


/**
 * For the correct positioning of the placeholder element, the dnd-list and
 * it's children must have position: relative
 */
div[dnd-list],
div[dnd-list] > .sys-designmodechild {
	position: relative;
}

/**
 * The dnd-lists's child elements currently MUST have
 * position: relative. Otherwise we can not determine
 * whether the mouse pointer is in the upper or lower
 * half of the element we are dragging over. In other
 * browsers we can use event.offsetY for this.
 */
div[dnd-list] > .sys-designmodechild {
	background-color: #fff;
	border: 1px solid #ddd;
	/*border-top-right-radius: 4px;
	border-top-left-radius: 4px;*/
	display:block;
	padding: 10px 5px 5px;
	/*margin-bottom: -1px;*/
}

div[dnd-list] > .sys-designmodechild:hover {
	background-color: #ffffe5;
	border-color: #aaa;
    cursor: move;
}

/**
 * Reduce opacity of elements during the drag operation. This allows the user
 * to see where he is dropping his element, even if the element is huge. The
 * .dndDragging class is automatically set during the drag operation.
 */
div[dnd-list] > .dndDragging {
	opacity: 0.7;
}

/**
 * The dndDraggingSource class will be applied to
 * the source element of a drag operation. It makes
 * sense to hide it to give the user the feeling
 * that he's actually moving it.
 */
div[dnd-list] > .dndDraggingSource {
	/*
    opacity: 0.3;
    background-color: #ccc;
    */
    display: none !important;
}

/**
 * The dnd-list should always have a min-height,
 * otherwise you can't drop to it once it's empty
 */
div[dnd-list] {
    min-width: 80px;
	min-height: 42px;
	margin: 0px;
	padding-left: 0px;
    background-color: #e5e5e5;
}

/**
 * An element with .dndPlaceholder class will be
 * added to the dnd-list while the user is dragging
 * over it.
 */
div[dnd-list] > .dndPlaceholder {
	display: block;
	background-color: #CCFFCC;
	min-width: 40px;
    min-height: 42px;
	position: relative;
}

.dndPlaceholder {
    list-style: none;
	height: 20px;
}

/**
 * Show selected elements in green
 */
div[dnd-list] > .sys-designmodechild .selected, div[dnd-list] > .sys-designmodechild.selected {
    background-color: #dff0d8;
    color: #3c763d;
}

.sys-sectionrow > div > div[dnd-list],
.sys-sectioncol > div > div[dnd-list],
.sys-section > div > div[dnd-list],
.sys-tabledetails > div > div[dnd-list] {
    min-height: 84px;
}

.sys-sectionrow > div > div[dnd-list].designmode-horiz-list {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.sys-sectionrow > div > div[dnd-list] > .sys-designmodechild,
.sys-sectionrow > div > div[dnd-list] > .dndPlaceholder {
	display: table-cell;
	vertical-align: top;
}

.sys-sectionrow > div > div[dnd-list] > .dndPlaceholder {
    width: 50%; /* we have to hard-code some width to make it visible */
}

.sys-button[data-btn-position="left"] {
	float: right;
}
.sys-button[data-btn-position="right"] {
	float: right;
}

.sys-designmode-btn-left {
    float: left;
}

.sys-designmode-btn-right {
    float: right;
}

.sys-designmode-image { display: inline-block; }

.save-design{
	position: fixed;
	left: 50%;
	top:0px;
	z-index: 2000;
}

/*
.center-modal {
    position: fixed;
    top: 10%;
    left: 18.5%;
    z-index: 1050;
    margin-left: -10%;
}
*/

.trashcan > img {
	width:100%;
	background-color:#ffffff;
}

.sys-textarea {
	width: auto;
	margin-bottom: 20px;
    line-height: 20px;
}

.sys-textarea:last-child { margin-bottom: 0; }

.ace_editor { height: 600px; }

#paper-holder {
			   /*left: 165px;*/
			  /* height: 400px;*/
			   position: relative;
			  /* border: 1px solid #DDD;*/
			  border-top: 4px solid #0175b5;
   				 width: 100%;
    			display: inline-block;
    			top: 15px;
    			-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
			    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
			        border-radius: 4px;
			        margin-bottom: 30px;
			}
			
			#paper-holder > .paper-scroller{
				padding-top: 0px !important;
			}
			
			#paper-holder > .paper-scroller > .paper{
				width: 100%;
			}
			
			/* FREETRANSFORM */

			.free-transform {
			    padding: 0 2px 2px 0;
			    margin: -1px 0 0 -1px;
			}
			
			.free-transform > div,
			.free-transform > div:hover,
			.free-transform.in-operation > div {
			    background: #3498db;
			    background-color: #3498db !important;
			}
			
			.free-transform .resize.n,
			.free-transform .resize.s,
			.free-transform .resize.e,
			.free-transform .resize.w,
			.free-transform > .rotate {
			    display: none;
			}
			
			.free-transform .resize {
			    width: 12px !important;
			    height: 12px !important;
			}
			
			/* HALO */

			.halo {
			    padding: 5px;
			    margin-top: -5px;
			}
			
			.halo .rotate,
			.halo .resize {
			    display: none;
			}
			
			
			#stencil-holder {
			  /* width: 160px;*/
			   height: 140px;
			   position: relative;
			   border-radius: 8px 0 0 8px;
   			   box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
			   
			}
			/*#stencil-holder .stencil .group .elements {
			   margin-left: -10px;
			   background: transparent;
			}*/
			
			#stencil-holder .search {
				display: block;
			    width: 30%;
			    height: 34px;
			    padding: 6px 12px;
			    font-size: 14px;
			    line-height: 1.428571429;
			    font-size: 12px;
			    color: #555555;
			    background-color: #fff;
			    background-image: none;
			    border: 1px solid #ccc;
			    border-radius: 4px;
			    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
			    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
			    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
			    -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
			    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
			        text-shadow: none;
			        top: 5px;
    			left: 5px;
			}

			.stencil .elements text, .stencil-paper-drag .element text {
			   /* display: none;*/
			}
			
			.stencil:after {
				background: none !important;
			}
			
			.stencil .elements {
			    overflow-x: auto;
			    overflow-y: hidden;
			    background-color: #f5f5f5 !important;
			}
			
			.stencil .elements::-webkit-scrollbar {
			    width: 0;
			    height: 5px;
			}
			
			.stencil .elements > svg{
			   background-color: #f5f5f5;
   			   background: linear-gradient( to right, #f5f5f5, #f5f5f5 119px, #ccc 1px);
   			   background-size: 120px;
			}
			
			.html-element {
			   position: absolute; 
/* 			   background: #3498DB; */
/* 			   Make sure events are propagated to the JointJS element so, e.g. dragging works. */
 			   pointer-events: none; 
 			   -webkit-user-select: none; 
/* 			   border-radius: 4px; */
/* 			   border: 2px solid #2980B9; */
/* 			   box-shadow: inset 0 0 5px black, 2px 2px 1px gray; */
 			   padding: 5px; 
 			   box-sizing: border-box; 
 			   z-index: 2; 
 			   text-align: center;
 			   font-size: 30px;
			}
			
			::-webkit-scrollbar {
			    width: 0;
			    height: 0;
			}
			::-webkit-scrollbar-track {
			    background-color: #eaeaea;
			    border-left: 1px solid #ccc;
			}
			::-webkit-scrollbar-thumb {
			    background-color: #ccc;
			}
			::-webkit-scrollbar-thumb:hover {
			    background-color: #aaa;
			}
			
			.halo.surrounding .box {
			    background-color: #eee !important;
			    border: 1px solid #3498db;
			    color: #000 !important;
			    word-wrap: break-word;
			    max-width: none;
			}
			
.tooltip.rendered {
    background: #eee;
    border: 1px solid #3498db;
    color: #000;
    text-shadow: none !important;
    opacity: 100;
    padding: 5px !important;
    font-size: 12px;
    font-weight: 400 !important;
}


.tooltip.rendered.top .tooltip-arrow-mask {
    border-bottom-color: #eee !important;
}

.tooltip.rendered.top .tooltip-arrow {
    border-bottom-color: #3498db !important;
    border-width: 0 !important;
}

.report-header{
	color: #fff;
	font-weight: 600;
	padding-left: 5px;
}

.report-header .navbar-brand {
	float: right;
}

.navbar-default.report-header .btn-link {
	color: #fff;
	margin-right: 0px;
	padding: 10px 8px;
}

.navbar-default.report-header .btn-link:hover {
	color: #80D1F7;
}

.navbar-default.report-header .btn-link:focus {
	color: #80D1F7;
}

.report-header select {
	color: #0C8DD6;
	font-weight: 600;
}

.report-header select option{
	font-weight: 600;
}

.i-report hr {
	margin-top: 5px;
	margin-bottom: 5px;
}