@font-face {
  font-family: 'chainbuildericon';
  src:  url('fonts/chainbuildericon.eot?q4ebsh');
  src:  url('fonts/chainbuildericon.eot?q4ebsh#iefix') format('embedded-opentype'),
    url('fonts/chainbuildericon.ttf?q4ebsh') format('truetype'),
    url('fonts/chainbuildericon.woff?q4ebsh') format('woff'),
    url('fonts/chainbuildericon.svg?q4ebsh#chainbuildericon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'chainbuildericon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
iframe {
   overflow: hidden;
}
.wrap
{
	padding: 0px;
	border: 0px;
	margin: 0px;
	overflow: hidden;
	scollbar: none;
}

.frame
{
	width: 1920px;
	height: 1080px;
	border: 0px;
	scollbar: none;
	overflow: hidden;
	-ms-zoom: 0.2;
	-transform: scale(0.2);
	-moz-transform: scale(0.2);
	-moz-transform-origin: 0 0;
	-o-transform: scale(0.2);
	-o-transform-origin: 0 0;
	-webkit-transform: scale(0.2);
	-webkit-transform-origin: 0 0;
}
.icon-vertical-equal-space:before {
  content: "\e930";
}
.icon-horizontal-equal-space:before {
  content: "\e931";
}

.icon-RCduplicate:before {
  content: "\e929";
  color: #666;
  font-size: 15px;
  margin-left:-20px;
  margin-right:5px;
}
.icon-RCmodule:before {
  content: "\e92b";
  color: #666;
  font-size: 15px;
  margin-left:-20px;
  margin-right:5px;
}
.icon-RCshow:before {
  content: "\e900";
  color: #666;
  font-size: 15px;
  margin-left:-20px;
  margin-right:5px;
}
.icon-RCconnection:before {
  content: "\e906";
  color: #666;
  font-size: 15px;
  margin-left:-20px;
  margin-right:5px;
}
.icon-RCexit:before {
  content: "\e901";
  color: #666;
}
.icon-RCselectdashboard:before {
  content: "\e902";
  color: #666;
  font-size: 15px;
  margin-left:-20px;
  margin-right:5px;
}
.icon-RCmovetoback:before {
  content: "\e903";
  color: #666;
}
.icon-RCmovetofront:before {
  content: "\e904";
  color: #666;
}
.icon-RCupdate:before {
  content: "\e905";
  color: #666;
  font-size: 15px;
  margin-left:-20px;
  margin-right:5px;
}
.icon-RCreload:before {
  content: "\e907";
  color: #666;
}
.icon-RCdelete:before {
  content: "\e908";
  color: #666;
  font-size: 15px;
  margin-left:-20px;
  margin-right:5px;
}
.icon-RCapply:before {
  content: "\e909";
  color: #666;
  font-size: 15px;
  margin-left:-20px;
  margin-right:5px;
}
.icon-RCsetup:before {
  content: "\e90a";
  color: #666;
}
.icon-RChide:before {
  content: "\e90b";
  color: #666;
}
.icon-RCdeletefromdashboard :before {
  content: "\e90c";
  color: #666;
  font-size: 15px;
  margin-left:-20px;
  margin-right:5px;
}
.icon-RCaddtodashboard:before {
  content: "\e90d";
  color: #666;
  font-size: 15px;
  margin-left:-20px;
  margin-right:5px;
}
.icon-RCmoveback:before {
  content: "\e90e";
  color: #666;
}
.icon-RCmovefront:before {
  content: "\e90f";
  color: #666;
}
.icon-RCdeletecache:before {
  content: "\e910";
  color: #666;
  font-size: 15px;
  margin-left:-20px;
  margin-right:5px;
}
.icon-RCorder:before {
  content: "\e911";
  color: #666;
}
.icon-arrow-left:before {
  content: "\e912";
}
.icon-arrow-left-bold:before {
  content: "\e913";
}
.icon-arrow-left-thin:before {
  content: "\e914";
}
.icon-arrow-right:before {
  content: "\e915";
}
.icon-arrow-right-bold:before {
  content: "\e916";
}
.icon-arrow-right-thin:before {
  content: "\e917";
}
.icon-full-screen:before {
  content: "\e918";
}
.icon-horizontal-align-center:before {
  content: "\e919";
}
.icon-horizontal-align-left:before {
  content: "\e91a";
}
.icon-horizontal-align-right:before {
  content: "\e91b";
}
.icon-lock:before {
  content: "\e91c";
}
.icon-project:before {
  content: "\e91d";
}
.icon-redo:before {
  content: "\e91e";
}
.icon-refresh:before {
  content: "\e91f";
}
.icon-search:before {
  content: "\e920";
}
.icon-triangle-close:before {
  content: "\e921";
}
.icon-triangle-open:before {
  content: "\e922";
}
.icon-undo:before {
  content: "\e923";
}
.icon-user:before {
  content: "\e924";
}
.icon-vertical-align-center:before {
  content: "\e925";
}
.icon-vertical-align-bottom:before {
  content: "\e926";
}
.icon-vertical-align-top:before {
  content: "\e927";
}
.icon-sign-in-github:before {
  content: "\e928";
  font-size: 40px;
  color: #333;
}
.icon-sign-in-twitter:before {
  content: "\e92a";
  font-size: 40px;
  color: #0084b4;
}
.icon-sign-in-google:before {
  content: "\e92c";
  font-size: 40px;
  color: #4885ed;
}
.icon-sign-in-facebook:before {
  content: "\e92e";
  font-size: 40px;
  color: #3B5998;
}

#top {min-width:500px;position:absolute; z-index:4;box-shadow: 1px 1px 8px #333333;left:0;right:0;}

/*
#function { visibility:hidden;background-color : lightGrey; position:absolute; top:90px; bottom:0; left:0px; width:250px; overflow:hidden; z-index:2;box-shadow: 1px 1px 3px #888888;}
*/
#content { background-color : white; position:absolute; top:90px; bottom:0px; left:0px; right:0; overflow:auto; z-index:1}
#content > iframe { position:relative; width:99%; height:99%}
#user { position:absolute; margin-top:7px; margin-left:20px; width:200px;color:White;white-space: nowrap;overflow:hidden;text-overflow: ellipsis;text-align:center;}
#project { position:absolute; margin-top:7px; margin-left:240px; width:200px;color:White;white-space: nowrap;overflow:hidden;text-overflow: ellipsis;}
#searchicon { display:inline-block; margin-bottom:7px; width:16px; color:White;}
#search { display:inline-block; margin-left:20px;vertical-align:top;margin-top: 12px;width:205px;background-color:White; border-radius: 5px;}
#search > input { height:100%;margin-left:5px;border:0px;width:195px;}
#search > select { margin-left:5px;border-top:0px; border-bottom:0px; border-right:0px;}
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

#topx {z-index:300;box-shadow: 2px 2px 5px #888888;text-align: left; margin: 0 auto; width: *px; position: relative; -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 50px rgba(0, 0, 0, 0.1); box-shadow: 0 0 50px rgba(0, 0, 0, 0.1); background-color: #fff; }

#main-header { padding: 5px 10px 5px 20px; background-color: #3270B6}
#logo   { float: left; height:50px; padding-right:60px}
#navigation { float: left; padding-top: 3px;}
#navigation a { color: #333; text-decoration: none; display: block; position: relative;}
#navigation li.active > a {  color: #ff7100; }
#navigation li.active > a:hover {color: #fff; }
#navigation > ul > li > ul > li  > a:before {content:'> '; color:black; font-weight: bold;}
#navigation > ul > li > ul > li.active  > a {color:black}
#navigation > ul > li > ul > li > a:hover {color:black;padding-left:30px;padding-right:13px;}
#navigation > ul > li > ul > li.active  > a:hover {color:black}
#navigation > ul > li > ul > li.active  > a:before {content:'> '; color:#ff7100; font-weight: bold;}
#navigation > ul > li > ul > li > a { overflow: hidden; height: 17px; -moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }

#navigation > ul > li > a { color: #fff; background-color: #3270B6; overflow: hidden; height: 17px; -moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
/*#navigation > ul > li > a:hover { color: #fff; background-color: #ff8a1d; -webkit-box-shadow: inset 0 0 30px #d9531f; -moz-box-shadow: inset 0 0 30px #d9531f; box-shadow: inset 0 0 30px #d9531f; }
#navigation > ul > li > a:hover { background-color: #1e73be; }
#navigation > ul > li > a:hover { -moz-box-shadow: inset 0 0 30px #1b14a0; -webkit-box-shadow: inset 0 0 30px #1b14a0; box-shadow: inset 0 0 30px #1b14a0; }
*/
h1, h2, h3, h4, h5, h6 { font-family: 'Roboto Condensed', Helvetica, Arial, Lucida, sans-serif; }
body { font-family: 'Droid Sans', Helvetica, Arial, Lucida, sans-serif; }

* {margin: 0;padding: 0;}

html{height:100%;/* make sure it is at least as tall as the viewport */position:relative;min-width:900px;min-height:400px;}
body{ height:100%; /* force the BODY element to match the height of the HTML element */	background-color:white;}

h1, h4{margin-top:10px;margin-left:40px;}

h4 {	float:left;}

h4 > a:hover {color:#ff7100;}

#searchresult {z-index:2;position:absolute;top:90px;	left:260px;width:233px;max-height:250px;	background-color : lightGrey;box-shadow: 2px 2px 5px #888888;overflow-y:auto;}

#message {z-index:5;position:absolute;bottom:10px;left:10px;width:600px;max-height:250px;border-width:1px;border-color:#888888;border-radius: 5px;border-style:solid;background-color : #FFFFF0;box-shadow: 2px 2px 5px #888888;padding:0px;overflow-y:auto; }
#message:empty {visibility: hidden;}
#message >div {margin-left:12px;margin-right:12px;border-width:0px;border-style:solid;border-color:grey;background-color: #FFFFF0;display:table-row;}
#message >div>div.info {padding-left:2px;padding-right:2px;border-width:0px;border-bottom-width:1px;border-style:solid;border-color:grey;background-color: #FFFFF0;}
#message >div>div.debug {padding-left:2px;padding-right:2px;border-width:0px;border-bottom-width:1px;border-style:solid;border-color:grey;background-color: #FAFAFA;}
#message >div>div.error {padding-left:2px;padding-right:2px;border-width:0px;border-bottom-width:1px;border-style:solid;border-color:grey;background-color: #FFE0E0;}
#message >div:last-child>div {border-width:0px;border-style:none;margin-right:2px}

.searchmodule{
	background-color : #3170B5;
	color:white;
	margin:5px;
	margin-left:5px;
	width:180px;
	padding:3px;
	padding-left:6px;
	padding-right:6px;
	overflow:hidden;
}

.droppedelement {
	position:absolute;
	background-color : #3170B5;
	color:white;
	width:180px;
	padding:3px;
	padding-left:6px;
	padding-right:6px;
	overflow:hidden;
}

.module {
	position:absolute;
	/*background-color : #eeeeee;*/
	color:black;
	padding:0px;
	margin:0px;
	z-index:2;
	width:150px;
	overflow:hidden;
}

.markmodule {
	box-shadow: 0px 0px 0px 4px rgba(76,84,162,1);
}


.core {
	/*background: rgb(250, 250, 120);
	background: rgb(110, 116, 198);*/
	/*background:lightBlue;*/
	color: black;
	width: 150px;
	/*margin-right:20px;*/
	padding-top:0px;
	padding-bottom:0px;
	text-align:center;
	height:19px;
	z-index:0;
	overflow:hidden;
	line-height: 19px; /* to vertically align text properly in firefox*/
}

.io {
	width:100%;
	background-color : #eeeeee;
	overflow-y:auto;
}

.execution {
	width:100%;
	background-color : #eeeeee;
	overflow-y: hidden;
}

.left {
	width:60px;
	float:left;
}

.right {
	width:60px;
	float:right;
}
.prev {
	float:left;
	background: rgb(110, 100, 100);
	color: white;
	text-align:center;
	width: 60px;
}

.prev-active {
	background: #FF0000;
	color: white;
}

.prev-hover {
	background: #FFAA00;
}

.right-connector {
	float:right;
	background: rgb(110, 100, 100);
	color: white;
	text-align:center;
	width: 60px;
}

.right-connector:hover {
	background: #FFAA00;
	color: black;
}

.arg {
	float:left;
	background: #E9967A;
	color: white;
	text-align:left;
	width: 60px;
	margin-bottom:3px;
	padding:0px;
	overflow:hidden;
	height:18px;
}


.arg:last-child{
	margin-bottom:0px;
}

.arg-repeatable {
	float:left;
	background: #5DBDEC;
	color: white;
	text-align:left;
	width: 60px;
	margin-bottom:3px;
	padding:0px;
	overflow:hidden;
	height:18px;
}


.arg-repeatable:last-child{
	margin-bottom:0px;
}

.arg-locked {
	background: lightGreen;
	color: black;
}

.arg-error {
	background: #8A2BE2;
}

.arg-active {
	background: #FF0000;
	color: white;
}

.arg-hover {
	background: #FFAA00;
	color: black;
}

.arg:hover {
	background: #FFAA00;
	color: black;
}

.res {
	float:right;
	background: lightGreen;
	color: black;
	text-align:right;
	width: 60px;
	margin-bottom:3px;
	height:18px;
	overflow:hidden;
}


.res:last-child{
	margin-bottom:0px;
}


.res:hover {
	background: #FFAA00;
	color: black;
}

.errdata{
	float:right;
	background: #FFAA00;
	color: white;
	text-align:right;
	width: 60px;
	margin-bottom:3px;
	height:18px;
	overflow:hidden;
}

.blank{
	min-height: 18px;
}

.ui-draggable-dragging{
	box-shadow: 5px 5px 5px #888888;
}

li {
	margin-left:40px;
}

table {
	border-collapse:collapse;
}

.message-text {
	margin-top:40px;
	margin-left:40px;
}

.edit-table {
	margin-top:40px;
	margin-left:40px;
}

.edit-table td{
	padding-bottom : 10px;
	padding-right : 5px;
}

.login-table {
	margin-top:40px;
	margin-left:40px;
}

.login-table td{
	padding-bottom : 10px;
	padding-right : 5px;
}


.list-table {
	margin-top:40px;
	margin-left:40px;
	border-width:0px;
	border-style:solid;
}

.list-table tr:nth-child(odd)	{
	background-color:#eee;
	border-color:Grey;
	border-top:0px;
	border-bottom:0px;
	border-color:LightGrey;
}

.list-table tr:nth-child(even) {
	background-color:#fff;
	border-color:Grey;
	border-top:0px;
	border-bottom:0px;
	border-color:LightGrey;
}
.list-table tr:hover {
	background-color:#CCE7E7;
	cursor: pointer;
	cursor: hand;
}

.list-table th{
	padding-left:7px;
	padding-right:7px;
	padding-top:6px;
	padding-bottom:6px;
	background-color:Beige;
	border-style:solid;
	border-width:1px;
	border-top:0px;
	border-bottom:0px;
	border-color:LightGrey;
}

.list-table td{
	padding-left:7px;
	padding-right:7px;
	padding-top:4px;
	padding-bottom:4px;
	border-style:solid;
	border-width:1px;
	border-top:0px;
	border-bottom:0px;
	border-color:LightGrey;
}

.list-table-last-row td{
	border-width:0px;
	background-color: Beige;
}

.list-table tr th:first-child,
.list-table tr td:first-child{
	border-left:0px;
}

.list-table tr th:last-child,
.list-table tr td:last-child{
	border-right:0px;
}


.left-col {
	float:left;
}

.right-col {
	float:right;
}

.main-menu {
    list-style:none;
    float:left;
	position:relative;
	z-index:5;
	padding:0px;
	margin:0px;
}

.main-menu li{
    float:left;
	margin-left:0px;
    position:relative;
	list-style:none;
	/*margin:0px; */
	/*display:inline-block;*/
 	text-decoration: none;
	background-color: LightGrey;
}

#navigation > ul > li > ul > li > a{ padding-right:30px;}

.main-menu a{
    display:block;
    padding:13px;
    color:#fff;
    background:#fff	;
    text-decoration:none;
}

.main-menu ul{
    background:LightGrey; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
    background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
    display:normal;
    position:absolute;
    left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
	box-shadow: 2px 2px 5px #888888;
}

.main-menu ul li{
    padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
	padding-left:1px;
    float:none;
}

.main-menu ul a{
    white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}

.main-menu li:hover ul{ /* Display the dropdown on hover */
    left:0px; /* Bring back on-screen when needed */
}

a {
	text-decoration: none;
	color: black;
	margin:0px;
}

#searchinfo {
	z-index:2;
	visibility:hidden;
	position:absolute;
	top:95px;
	left:720px;
	background-color:lightGrey;
	width:200px;
	max-height:250px;
	box-shadow: 2px 2px 5px #888888;
}

#tooltip {
	z-index:5;
	visibility:hidden;
	position:absolute;
	top:0px;
	left:545px;
	background-color:lightGrey;
	width:200px;
	max-height:250px;
	box-shadow: 2px 2px 5px #888888;
}

#tooltiptitle {
	font-weight: bold;
	color:#444444;
	padding:6px;
	/*background-color:#DDDDDD;*/
}

#tooltipvalue {
	background: lightGreen;
	color: black;
	padding:6px;
	word-wrap: break-word;
}

#tooltipbody {
	padding:6px;
}


hr { border:0px; height:1px; background-color:darkGrey;}

.xxxdeleteedge1 {
	position: absolute;
	background: transparent;
	color: #FF0000;
	z-index:0;
}

.elink {stroke:green;stroke-width:1px;fill: none;}
.elink:hover {stroke:Orange;stroke-width:6px;}

.dlink {stroke:black;stroke-width:1px;fill: none;}
.dlink:hover {stroke:Orange;stroke-width:6px;}

svg {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index:0;
}

#links {
	z-index:0;
}

.operator { background-color : #6FC464 }
.visualization { background-color : #F3C51F }

/* The alert message box */
.alert {
    padding: 20px;
    background-color: #ffcc00; /* Red */
    color: white;
    margin-bottom: 15px;
}

/* The close button */
.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

/* When moving the mouse over the close button */
.closebtn:hover {
    color: black;
}

.w3-sidebar{min-width: 200px; max-width: 400px; height:100%;width:200px;background-color:#fff;position:fixed!important;z-index:1;overflow:auto}
@media (min-width:993px){.w3-modal-content{width:900px}.w3-hide-large{display:none!important}.w3-sidebar.w3-collapse{display:block!important}}
@media (max-width:992px){.w3-sidebar.w3-collapse{display:none}.w3-main{margin-left:0!important;margin-right:0!important}}
@media (max-width:992px) and (min-width:601px){.w3-hide-medium{display:none!important}}
.w3-bar-block .w3-dropdown-hover,.w3-bar-block .w3-dropdown-click{width:100%}
.w3-bar-block .w3-dropdown-hover .w3-dropdown-content,.w3-bar-block .w3-dropdown-click .w3-dropdown-content{min-width:100%}
.w3-bar-block .w3-bar-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;outline:none;white-space:normal;float:none}
.w3-bar-block.w3-center .w3-bar-item{text-align:center}.w3-block{display:block;width:100%}
.w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;outline:none;display:block}
.w3-bar .w3-dropdown-hover,.w3-bar .w3-dropdown-click{position:static;float:left}
.w3-bar-block .w3-bar-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;outline:none;white-space:normal;float:none}
.w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.w3-border-left{border-left:1px solid #ccc!important}.w3-border-right{border-right:1px solid #ccc!important}
.w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;outline:none;display:block}
.w3-bar-block .w3-bar-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;outline:none;white-space:normal;float:none}
.w3-tiny{font-size:10px!important}.w3-small{font-size:12px!important}.w3-medium{font-size:15px!important}.w3-large{font-size:18px!important}
.w3-left-align{text-align:left!important}.w3-right-align{text-align:right!important}.w3-justify{text-align:justify!important}.w3-center{text-align:center!important}
.w3-hide{display:none!important}.w3-show-block,.w3-show{display:block!important}.w3-show-inline-block{display:inline-block!important}
.w3-hide-small{display:none!important}.w3-mobile{display:block;width:100%!important}.w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile,.w3-dropdown-click.w3-mobile{text-align:center}
.w3-white,.w3-hover-white:hover{color:#000!important;background-color:#fff!important}
.w3-card,.w3-card-2{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}

#leftsidebarbutton {
    display:inline-block;
    background-color: #82ACD3;
    height:100%;
    width:10%;
    border-top-right-radius: 2em;
    border-bottom-right-radius: 2em;
}

#leftsidebutton {
  border:none;
  display:inline-block;
  outline:0;
  vertical-align:bottom;
  overflow:hidden;
  text-decoration:none;
  color:white;
  background-color:inherit;
  text-align:center;
  font-size:20px!important;
  cursor:pointer;
  white-space:nowrap;
  padding:0px;
  width: 90%;
  height:100%;
}

button .text { width: 80%; display: inline-block; text-align:left;}
#leftsidebuttonicon { width: 20%; display: inline-block;}


	#xycoord,#aspectratio {
		display:inline-block;
		vertical-align: top;
		margin-top: 12px;
	}
	#aspectratio {
		margin-left: 5px;
	}
	#xycoord > label {
		color: #fff;
	}
	#aspectratio > label {
		color: #fff;
	}
	#xycoord > input {
		width: 50px;
		outline:none;
	}
	#aspectratio > input {
		width: 50px;
		outline:none;
	}
	#aspect {
		width: 30px;
		height: 30px;
		margin-left: 5px;
		margin-right: 5px;
		margin-top: -7px;
		border:none;
		outline:none;
		vertical-align: top;
		background: url('../images/lock.png');
	}

	#alignmentoptions > button {
		width: 33px;
		height: 33px;
		background-color : #5F97CE;
		margin-left: 5px;
		margin-right: 5px;
		border:none;
		outline:none;
	}
	#alignmentoptions > button > span {
		font-size: 32px;
		color: white;
	}
	#alignmentoptions > button > span:hover {
		font-size: 32px;
		color: blue;
	}

  #rightsection > button {
    background-color: transparent;
    vertical-align: top;
  }

  #rightsidebutton > span {
		text-align:right;
	}

  #rightsection > button > span {
		font-size: 20px;
		color: white;
	}
  #rightsection > button > span:hover {
		font-size: 20px;
		color: blue;
	}

	#undo {
		width: 40px;
		height: 40px;
		margin-left: 5px;
		margin-right: 5px;
		border:none;
		outline:none;
	}
	#exdiv {
		width: 0px;
		height: 30px;
		margin-top: 5px;
		vertical-align: top;
		border:1px solid lightgray;
	}

	#redo {
		width: 40px;
		height: 40px;
		margin-left: 5px;
		margin-right: 5px;
		border:none;
		outline:none;
	}
	#refresh {
		width: 40px;
		height: 40px;
		margin-left: 5px;
		margin-right: 5px;
		border:none;
		margin-top:0px;
		outline:none;
	}
	#fullscreen {
		width: 40px;
		height: 40px;
		margin-left: 5px;
		margin-right: 5px;
		border:none;
		margin-top:0px;
		outline:none;
	}

  #rightsidebuttonicon {
    width: 20%; display: inline-block;
  }

  #leftSidebar {left:0}

  #leftSidebar,#rightSidebar { display:none; width:200px;	background-color:	#EFEFF0; z-index:2; margin-top:100px;}

  #rightSidebar {right:0}
  .ui-selectable-helper {
      position: absolute;
      z-index: 100;
      border:2px solid blue;
      background-color: lightblue;
      opacity: .4;
  }

  #rightsidebarbutton >  button > span {
		text-align:right;
	}

@media only screen
and (min-width : 1674px) {
  #action { background-color : #5F97CE; position:absolute; top:60px; height:40px; left:0px; right:0px; overflow:hidden; z-index:2;}

	.headerDivider,.headerDivider1 {
		 display:inline-block;
		 margin-left:60px;
		 margin-top:5px;
	   border:1px solid lightgray;
	   height:30px;
		 width:0px;
	}
	.headerDivider1 {
		margin-left:20px;
		margin-right:15px;
	}

	#alignmentoptions {
		display:inline-block;
		margin-left:5px;
		margin-right:5px;
		margin-top:5px;
		vertical-align: top;
	}

	#rightsection {
		float:right;
		display:inline-block;
		background-color: #82ACD3;
		vertical-align: top;
		width:520px;
		border-top-left-radius: 2em;
		border-bottom-left-radius: 2em;
	}

	#rightsidebutton {
		border:none;
		display:inline-block;
		outline:0;
		vertical-align:bottom;
		overflow:hidden;
		text-decoration:none;
		color:white;
		background-color:inherit;
		text-align:center;
		font-size:20px!important;
		cursor:pointer;
		white-space:nowrap;
		padding:0px;
		width: 170px;
		height:10%;
		margin-left: 100px;
		margin-top: 10px;
		vertical-align: top;
	}
}

@media only screen
and (min-width : 1452px)
and (max-width : 1674px) {
  #action { background-color : #5F97CE; position:absolute; top:60px; height:40px; left:0px; right:0px; overflow:hidden; z-index:2;}

	.headerDivider,.headerDivider1 {
		 display:inline-block;
		 margin-left:10px;
		 margin-top:5px;
	   border:1px solid lightgray;
	   height:30px;
		 width:0px;
	}
	.headerDivider1 {
		margin-left:10px;
		margin-right:5px;
	}

	#alignmentoptions {
		display:inline-block;
		margin-left:5px;
		margin-right:5px;
	}

	#rightsection {
		float:right;
		display:inline-block;
		background-color: #82ACD3;
		vertical-align: top;
		width:430px;
		border-top-left-radius: 2em;
		border-bottom-left-radius: 2em;
	}

	#rightsidebutton {
		border:none;
		display:inline-block;
		outline:0;
		vertical-align:bottom;
		overflow:hidden;
		text-decoration:none;
		color:white;
		background-color:inherit;
		text-align:center;
		font-size:20px!important;
		cursor:pointer;
		white-space:nowrap;
		padding:0px;
		width: 170px;
		height:10%;
		margin-left: 10px;
		margin-top: 10px;
		vertical-align: top;
	}
}

@media only screen
and (max-width : 1451px) {
  #action-container {position:absolute;top:60px; width:100%;height:52px;overflow-x: auto;overflow-y: hidden;}
  #action { background-color : #5F97CE; width:1448px; height:40px; z-index:2;}
  #content { background-color : white; position:absolute; top:100px; bottom:0px; left:0px; right:0; overflow:auto; z-index:1}

	.headerDivider,.headerDivider1 {
		 display:inline-block;
		 margin-left:0px;
		 margin-top:5px;
	   border:1px solid lightgray;
	   height:30px;
		 width:0px;
	}
	.headerDivider1 {
		margin-left:10px;
		margin-right:5px;
	}

	#alignmentoptions {
		display:inline-block;
		margin-left:5px;
		margin-right:5px;
	}

	#rightsection {
		display:inline-block;
		background-color: #82ACD3;
		vertical-align: top;
		width:430px;
		border-top-left-radius: 2em;
		border-bottom-left-radius: 2em;
	}

	#rightsidebutton {
    display:inline-block;
		border:none;
		outline:0;
		vertical-align:bottom;
		overflow:hidden;
		text-decoration:none;
		color:white;
		background-color:inherit;
		text-align:center;
		font-size:20px!important;
		cursor:pointer;
		white-space:nowrap;
		padding:0px;
		width: 170px;
		height:10%;
		margin-left: 10px;
		margin-top: 10px;
		vertical-align: top;
	}
}