/*fix height*/
body, html {
    height: 100%;
    min-height: 100%;
    margin:0;
}
.body {
    box-sizing: border-box;
    padding-top:70px;
	padding-bottom:20px;
    z-index:1;
}
.container, .container-fluid {
	height: 100%;
}
.fillheight {
	height: 100%;
}

/*fix navbar*/
.navbar {
    height: 50px;
    position: absolute;
    top: 0;
    left:0;
    width:100%;
    z-index:2;
}

/*tootip*/
a.tool-tip-placeholder, a.tool-tip-placeholder:hover, a.tool-tip-placeholder:visited {
    color: black;
}
a.tool-tip-placeholder + span.tool-tip-content {
	display: none;
}

/*fix modal dialog overlap with cy nav*/
.modal{
  z-index: 99999;
}

/*fix form*/
.form-inline .form-group{
    margin-left: 0;
    margin-right: 0;
}
.input-group[class*="col-"]{
	padding-right: 15px;
}
#cy-dynamic-form-container {
	padding-top: 15px;
}

/*content*/
#left-content {
}
#right-content {
}

/*mock-ui*/
.mock-ui-container {
	width: 60%;
	margin-left: 20%;
	margin-right: 20%;
	height: 80%;
	margin-top: 10%;
	margin-bottom: 10%;
	background-color: white;
	overflow: hidden;
}
.mock-ui-table-container {
	width: 100%;
}

/*toolbar*/
.mock-ui-toolbar {
	width:100%;
	height: 52px;
	background-color: #F36526;
	position: relative;
}
.mock-ui-toolbar-left {
	width: 52px;
	height: 52px;
	position: absolute;
	left: 0px;
    top: 0px;
    z-index: 2;
}
.mock-ui-toolbar-right {
	width: 52px;
	height: 52px;
	position: absolute;
	right: 0px;
    top: 0px;
    z-index: 2;
}
.mock-ui-toolbar-center{
	width: 100%;
	height: 52px;
	padding-left: 52px;
	padding-right: 52px;
	text-align: center;
	z-index: 1;
}
.mock-ui-toolbar-center{
	color: white;
	text-align: center;
	vertical-align: middle;
	line-height: 52px;
	display: inline-block;
}

/*header*/
.mock-ui-header {
	width: 100%;
	height: 100px;
}
.mock-ui-header-image-container {
	width: 100%;
	height: 100px;
	overflow: hidden;
	vertical-align: middle;
}
.mock-ui-header-image-container img {
	width: 100%;
}

/*divider*/
.mock-ui-divider {
	height: 1px;
}
.mock-ui-divider td:nth-child(2) {
	background-color: darkgray;
}

/*title only*/
.mock-ui-item {
	vertical-align: middle;
}
.mock-ui-item-image {
	width: 64px;
	padding: 4px 8px;
}
.mock-ui-item-image-container {
	width: 48px;
	height: 48px;
}
.mock-ui-item-image-container img {
	width: 100%;
}
.mock-ui-item-accessory {
	width: 28px;
	padding-left: 4px;
	padding-left: 8px;
	vertical-align: middle;
}
.mock-ui-item-accessory-container {
	width: 16px;
	height: 16px;
	vertical-align: middle;
}
.mock-ui-item-accessory-container img {
	max-width: 16px;
	max-height: 16px;
}

/*title+sub*/
.mock-ui-item-sub {
	vertical-align: middle;
}
.mock-ui-item-sub-image {
	width: 64px;
	padding: 4px 8px;
}
.mock-ui-item-sub-image-container {
	width: 48px;
	height: 48px;
}
.mock-ui-item-sub-image-container img {
	width: 100%;
}
.mock-ui-item-sub-accessory {
	width: 28px;
	padding-left: 4px;
	padding-left: 8px;
	vertical-align: middle;
}
.mock-ui-item-sub-accessory-container {
	width: 16px;
	height: 16px;
	vertical-align: middle;
}
.mock-ui-item-sub-accessory-container img {
	max-width: 16px;
	max-height: 16px;
}
.mock-ui-item-sub-title {
	margin-top: 4px;
	height: 27px;
}
.mock-ui-item-sub-subtitle {
	height: 21px;
	margin-bottom: 4px;
}

/*gellery*/
.gallery-container {
	width: 100%;
	height: 500px;
}
.gallery-item {
	width: 270px;
	height: 90px;
	float: left;
	margin: 5px;
}
.gallery-item img {
	width: 100%;
}

/*Graph*/
#cy {
	height: 100%;
	border: 1px solid #888;
}
.no-padding-left {
	padding-left: 0 !important;
}
#cy-nav {
	height: 20%;
    border: 1px solid #000;
    overflow: hidden;
	position: relative;
    z-index: 99999;
}

/*pallete*/
#pallete-container {
	height: 100%;
}
.draggable-pallete {
	margin-bottom: 5px;
	height: 30px;
	border-radius: 5px;
	color: white;
	text-align: center;
	text-valign: center;
	text-size: 25px;
	line-height: 30px;
  cursor: grab;
}
#lang-draggable-pallete{
	background: green;
}
#group-draggable-pallete{
	background: darkgray;
}
#add-draggable-pallete{
	background: LightSeaGreen;
}
#new-draggable-pallete{
	background: blue;
}
#input-draggable-pallete{
	background: orange;
}
#comment-draggable-pallete{
	background: DarkGoldenRod;
}
#wait-draggable-pallete{
	background: BlueViolet;
}
#text-draggable-pallete{
	background: Olive;
}
#image-draggable-pallete{
	background: CornflowerBlue;
}
#web-draggable-pallete{
	background: DarkSlateGray;
}
#youtube-draggable-pallete{
	background: red;
}




/*fix yii*/
.errorMessage {
	color: red;
	font-size: 0.9em;
}

/*spinner*/
.loader {
  font-size: 90px;
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin: 0.8em auto;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load6 1.7s infinite ease;
  animation: load6 1.7s infinite ease;
}
@-webkit-keyframes load6 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    box-shadow: 0 -0.83em 0 -0.4em #000000, 0 -0.83em 0 -0.42em #000000, 0 -0.83em 0 -0.44em #000000, 0 -0.83em 0 -0.46em #000000, 0 -0.83em 0 -0.477em #000000;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em #000000, 0 -0.83em 0 -0.42em #000000, 0 -0.83em 0 -0.44em #000000, 0 -0.83em 0 -0.46em #000000, 0 -0.83em 0 -0.477em #000000;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em #000000, -0.087em -0.825em 0 -0.42em #000000, -0.173em -0.812em 0 -0.44em #000000, -0.256em -0.789em 0 -0.46em #000000, -0.297em -0.775em 0 -0.477em #000000;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em #000000, -0.338em -0.758em 0 -0.42em #000000, -0.555em -0.617em 0 -0.44em #000000, -0.671em -0.488em 0 -0.46em #000000, -0.749em -0.34em 0 -0.477em #000000;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em #000000, -0.377em -0.74em 0 -0.42em #000000, -0.645em -0.522em 0 -0.44em #000000, -0.775em -0.297em 0 -0.46em #000000, -0.82em -0.09em 0 -0.477em #000000;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    box-shadow: 0 -0.83em 0 -0.4em #000000, 0 -0.83em 0 -0.42em #000000, 0 -0.83em 0 -0.44em #000000, 0 -0.83em 0 -0.46em #000000, 0 -0.83em 0 -0.477em #000000;
  }
}
@keyframes load6 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    box-shadow: 0 -0.83em 0 -0.4em #000000, 0 -0.83em 0 -0.42em #000000, 0 -0.83em 0 -0.44em #000000, 0 -0.83em 0 -0.46em #000000, 0 -0.83em 0 -0.477em #000000;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em #000000, 0 -0.83em 0 -0.42em #000000, 0 -0.83em 0 -0.44em #000000, 0 -0.83em 0 -0.46em #000000, 0 -0.83em 0 -0.477em #000000;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em #000000, -0.087em -0.825em 0 -0.42em #000000, -0.173em -0.812em 0 -0.44em #000000, -0.256em -0.789em 0 -0.46em #000000, -0.297em -0.775em 0 -0.477em #000000;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em #000000, -0.338em -0.758em 0 -0.42em #000000, -0.555em -0.617em 0 -0.44em #000000, -0.671em -0.488em 0 -0.46em #000000, -0.749em -0.34em 0 -0.477em #000000;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em #000000, -0.377em -0.74em 0 -0.42em #000000, -0.645em -0.522em 0 -0.44em #000000, -0.775em -0.297em 0 -0.46em #000000, -0.82em -0.09em 0 -0.477em #000000;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    box-shadow: 0 -0.83em 0 -0.4em #000000, 0 -0.83em 0 -0.42em #000000, 0 -0.83em 0 -0.44em #000000, 0 -0.83em 0 -0.46em #000000, 0 -0.83em 0 -0.477em #000000;
  }
}