@font-face {
	font-family: 'OpenSans';
  src: url('/fonts/open_sans/OpenSans-Regular.woff2') format('woff2'), url('/fonts/open_sans/OpenSans-Regular.woff') format('woff'), url('/fonts/open_sans/OpenSans-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
	font-family: 'OpenSans';
	src: url('/fonts/open_sans/OpenSans-Semibold.woff2') format('woff2'), url('/fonts/open_sans/OpenSans-Semibold.woff') format('woff'), url('/fonts/open_sans/OpenSans-Semibold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}






#workflow-builder {
	background-color: rgba(0, 0, 0, 0.5);
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 200;
	height: 100vh;
}


#workflowbuilder-content {
	z-index: 1;
	position: relative;
	display: flex;

	height: calc(100% - 40px); /* Have to take away top and bottom margins from height? */
	margin: 20px;

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.action-content {
	font-size: 11px;
}


#workflow-builder ::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

#workflow-builder ::-webkit-scrollbar-track {
	/*   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
	border-radius: 10px; */
	background-color: #e6e6e6;
	display: block;
}

#workflow-builder ::-webkit-scrollbar-thumb {
	/*  border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);  */
	background-color: #b4b4b4;
}

#workflow-builder *{
	box-sizing: border-box;
	font-family: "OpenSans";
}


#header {
	width: 100%;
	height: 50px;
	background-color: #ccc;
	border-bottom:  2px solid;
    cursor: move;
}

#main {
	width: 100%;
	height: auto;
	padding: 5px;
	text-align: justify;
} 

#workflow-builder .action {
	stroke: #000;
	stroke-width: 0.3px;
	box-shadow: 5px 10px #888888;
}

.droparea {
	pointer-events: none; /* Stop drop areas from being clickable, since they were getting in the way of other actions */
}

#workflow-builder h1 {
	padding-bottom: 5px;
}

/* The sidebar menu */
.menu_bar {
	width: 120px; /* Set the width of the sidebar */
	position: relative; /* Fixed Sidebar (stay in place on scroll) */
	z-index: 1; /* Stay on top */
	top: 0; /* Stay at the top */
	left: 0;
	background-color: white; /* Black */
	overflow-x: hidden; /* Disable horizontal scroll */
	padding-top: 20px;
	border-right: 1px solid #f8f8f8;
}

/* The navigation menu links */
.menu_bar p {
	font-size: 12px;
	text-decoration: none;
	text-align: center;
	color: #818181;
	display: block;
}

.menubar-option {
	padding: 5px;
	margin: 10px;
	border-radius: 3px;
	background-color: #f8f8f8;
}

.menubar-option svg {
	margin-left: 20px;
	margin-top: 10px;
}

.menubar-selected {
	background: #f7f7f7;
}



/* When you mouse over the navigation links, change their color */
.menu_bar p:hover {
	color: #000000;
}

.menu_bar img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	height: 50px;
}


#start-state-detail {
	display: flex;
	
	background: #E1E1E1;
	font-size: 10px;
	height: 100%;
	justify-content: center;
	align-content: center;
	text-align: center;
}


#state-text{
	color: #8a8a8a 
}

#state-name {
	margin-left: 3px;
}



/* Style page content */
.workspace {
	position: absolute;
	overflow: auto;
	touch-action: pan-y;
	margin-left: 125px; /* Same as the width of the sidebar */
	width: calc(100vw - 365px - 50px + 50px); 

	height: 100%;
	transition: all 0.5s ease 0s;
	-webkit-transition: all 0.5s ease 0s;
}

#workflow-builder #background {
	margin-left: 340px;
	background-color: grey;
	height: 100vh;
	z-index: -100;
}


/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 400px) {
  .sidebar {padding-top: 15px;}
  .sidebar p {font-size: 18px;}
}


#workspace {
	margin-bottom: -5px; /* For some reason scrolling all the way down makes element not fit in div so have to stretch a bit */
}

/* The action types menu */
.action_types {
	background-color: white;
	touch-action: pan-y;
	overflow-y: scroll;
	position: relative;
	height: 100%;
	width: 365px; /* Set the width of the sidebar */
	z-index: 1; /* Stay on top */
	top: 0; /* Stay at the top */
}



#action-area-description {
	font-size: 12px;
	margin-top: 0;
}

#workflow-builder h4 {
	margin-bottom: 10px;
	margin-top: 15px;
}

/* The sidebar menu */
#rightbar {
	background-color: white;
	height: 100%; /* Full-height: remove this if you want "auto" height */
	width: 200px; /* Set the width of the sidebar */
	position: absolute; /* Fixed Sidebar (stay in place on scroll) */
	float: right;
	z-index: 1; /* Stay on top */
	top: 0; /* Stay at the top */
	right: 0px;
	overflow-x: hidden; /* Disable horizontal scroll */
	transition: all 0.5s ease 0s;
	-webkit-transition: all 0.5s ease 0s;
}


#rightbar_buttons {
	position: absolute;
	bottom: 10px;
	right: 10px;
}

#invalid-actions-error {
	position: absolute;
	float: right;
	width: 200px;
	padding: 5px;
	font-size: 13px;
	bottom: 50px;
	right: 0px;
	text-align: center;
	color: red;
}


#wait-rightbar-waitFrom {
	min-width: 0px;
	width: 250px;
}

#wait-rightbar-duration {
	width: 50px;
	text-align: center;
}
#wait-rightbar-duration-label {
	margin-left: 10px;
}

#rightbar_buttons {
	background: white;
}


#rightbar-container {
	overflow-y: auto;
	overflow-x: hidden;
	height: calc(100% - 50px);
}

#rightbar_buttons button {
	width: 80px;
	font-size: 12px;
	height: 25px;
	border: none;
	border-radius: 3px;
	cursor: pointer;
}

#rightbar_buttons button:hover {
	background-color: #E1E1E1;
}

#rightbar_buttons #exit {
	color: #AAAAAA;
	background-color: transparent;
}

#rightbar_buttons #exit:hover {
	color: #505050;
	background-color: transparent;
}

#rightbar_buttons #save {
	background-color: #00a470;
	color: white;
}


/* ACTION BLOCK COLOURS */
.assign_bg {
  fill:#00a470;
  stroke:#426b37; 
  stroke-width: 1px;
}

.email_bg {
  fill:#E8B118;
  stroke:#776540;
  stroke-width: 1px;
}


.if_bg {
  fill: #0077f0;
  stroke:#38376D;
  stroke-width: 1px;
}

.if_else_bg {
  fill:#9840db;
  stroke:#4A2763;
  stroke-width: 1px;
}

.wait_bg {
  fill: #e27e00;
  stroke:#5E3E26;
  stroke-width: 1px;
}

.after_bg {
  fill:#17BAE5;
  stroke: #204851;
  stroke-width: 1px;
}

.for_bg {
  fill:#E51783;
  stroke: #682E4F;
  stroke-width: 1px;
}

.for_border {fill:#682E4F;}

.fields {
	margin-right: 5px;
	text-align: right;
	flex: 0 0 50px;
	font-size: 8px;
	color: white;
}

.action_block input, .action_block textarea, #subject-input{
	font-size: 10px;
	padding-left: 3px;
}

#assign-container {
	display: flex;
}

#assign-container input {
	border-radius: 2px;
	background-color: #288e64 !important;
	border-style: none;
	color: white;
}
#expression-input {
	width: 185px;
	height: 35px;
}

#variable-label {
	margin-top: 5px;
	height: 20px;
}
#variable-input {
	height: 20px;
	width: 130px;
	margin-bottom: 10px;
	margin-top: 5px;
}

#expression-label {
	margin-top: 12px;
}

#email-container {
	display: flex;
}


#preview-bg {
	fill: grey;
	opacity: 0.2;
	stroke-width: 2px;
}


#email-container input { 
	border-radius: 2px;
	background-color: #c19700 !important; 
	border-style: none;
	color: white;
}

#to-label{
	margin-top: 5px;
}
#to-input{
	margin-top: 5px;
	width: 190px;
	height: 30px;
}

#subject-label{
	margin-top: 25px;
	margin-right: 3px;
}

#subject-input {
	width: 190px;
	margin-top: 8px;
	height: 20px;
}


#if-container {
	display: flex;
}

#if-container input {
	border-radius: 2px;
	background-color: #0061c5 !important;
	border-style: none;
	color: white;
}

#condition-label, #condition-input {
	margin-top: 10px;	
}

#condition-input {
	height: 20px;
	width: 150px;
}

#ifelse-container {
	display: flex;
}

#ifelse-container input {
	border-radius: 2px;
	background-color: #7c32b4 !important;
	border-style: none;
	color: white;
}

#else-label {
	color: white;
	text-align: right;
	font-size: 8px;
}

#wait-container {
	margin-top: 5px;
}

#wait-from-label, #duration-label, #hours {
	float: left;
	margin-top: 5px;
	margin-right: 5px;
	margin-left: 5px;
}

#wait-from-input {
	display: flex;
	float: left;
}

#wait-from-input select {
	position: absolute;
	margin-top: 3px;
	width: 100px;
	background-color: #e27e00 !important;
	color: white;
	font-size: 9px;
	border-radius: 2px;
	overflow-y: auto;
	border: #ce7200;
	border-width: 1px;
	border-style: solid;
	min-width: 0px;
	padding: 0;
}

#duration-input input {
	border-radius: 2px;
	border-style: none;
	color: white;
	background-color: #ba6600 !important;
	width: 50px;
	height: 20px;
}

#duration-input {
	float: left;
}

#wait-from, #duration {
	float: left;
}

#workflow-builder #duration {
	margin-left: 120px;
}

.in-row {
	float: left;
}

#workflow-builder .label {
	color: white;
	font-size: 8px;
}

#array-label, #key-label, #value-label {
	margin-top: 5px;
	margin-right: 5px;
	margin-left: 5px;
}

#for-container input {
	background-color: #b81375 !important;
	border-radius: 2px;
	border-style: none;
}

#array-input input, #value-input input {
	width: 50px;
	height: 20px;
	color: white;
}

#key-input input {
	width: 70px;
	height: 20px;
	color: white;
}

#workflow-builder .draggable, #workflow-builder .draggable_group {
  cursor: grab;
}

.action_block {
  cursor: pointer;
}

#actions_space .action_block, #actions_space input {
	cursor: grab;
}

#workflow-builder #loading {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 100;
	background-color:rgba(0,0,0,0.3);
}

#loading-image-container {
	position: relative;
	top: 40%;
	left: 50%;
	width: 200px;
	height: 100px;
}

#loading-image-container img {
	width: 100px;
	height: 100px;
	margin-left: 15px;
	opacity: 1;
}

#workflow-builder #description {
	margin-bottom: 10px;
	color: rgb(255, 255, 255);
	opacity: 1;
}

#workflow-builder .hidden {
	display: none !important;
}

#workflow-builder .hovered {
	opacity: 0.6;
}

.wait-option {
	opacity: 0.8;
}

.wait-option:hover, .wait-option:checked {
	opacity: 1;
}

#rightbar-details, #default-action-details {
	text-align: center;
	font-weight: bold;
	font-size: 16px;
}

#action-info-rightbar, .action-details {
	margin-left: 15px;
}

#actiontype {
	margin-bottom: 20px;
}


#detail-helptext {
	width: 180px;
	margin: auto;
}

.action-details input, #rightbar-description, .action-details textarea {
	width: 250px;
	height: 30px;
	background: #f8f8f8;
	border: 1px solid #f0f0f0;
	padding: 0.5em;
	border-radius: 3px;
}


#rightbar-description, .action-details textarea{
	height: 35px;
	resize: none;
	max-height: 200px;
}


.rightbar-header {
	color: grey;
	margin-top: 10px;
	margin-bottom: 5px;
	font-size: 14px;
}


.rightbar-checkbox {
	display: flex;
	align-items: center;
	margin-top: 10px;
	margin-bottom: 5px;
}

.rightbar-checkbox .rightbar-header {
	margin-top: 0px;
	margin-bottom: 0px;
	width: 210px;
	margin-left: 10px;
}

.rightbar-checkbox input{
	width: 20px;
    height: 17px;
    background: #f8f8f8;
    border: 1px solid #f0f0f0;
    /* padding: 0.5em; */
    border-radius: 3px;
	margin-left: 0;
}


#workflow-builder #default {
	text-align: center;
}

#workflow-builder .breadcrumb {
	margin-top: 12px;
	margin-bottom: 20px;
	margin-right: 10px;
	font-size: 14px;
}

#workflow-builder .breadcrumb a:first-child {
	padding-left: 0;
}

#workflow-builder .breadcrumb a {
	color: #207bbf;
	text-decoration: none;
	padding-left: 5px;
	padding-right: 5px;
}

#workflow-builder .breadcrumb a:hover{
	color: #00233c;
}

#view-in-psoda {
	text-align: center;
	margin-top: 20px;
}

#view-in-psoda button {
	width: 150px;
	height: 40px;

	border: none;
	font-size: 15px;
	cursor: pointer;
	border-radius: 5px;
}

#view-in-psoda button:hover {
	background-color: #E1E1E1;
}


.invalid {
	border: 2px solid rgb(255, 52, 52) !important;
}

.invalid-bg {
	stroke-width: 2px;
	stroke:rgb(223, 1, 1);
}


#delete-menu {
	position: absolute;
}

#delete-button {
	background-color: #E1E1E1;
	border: none;
	padding: 0.25em;
}

#workflow-builder .help {
	position: absolute;
	width: 60px;
	text-align: center;
	font-size: 10px;
	padding: 5px;
	z-index: -1;
	color: white;
	border-radius: 7px;
	padding-left: 15px;
	padding-right: 10px;
}



.help-icon {
	width: 20px;
	height: 20px;
	/* background-image: url('/images/icon_question_outlined.svg');
	background-size: 100%; */
	display: inline-block;
	margin-bottom: 5px;
	position: relative;
	border-radius: 10px;
	border: 1px solid var(--icon_grey);
	padding-left: 3.5px;
}

/* .help-icon.help-icon-hovered{
	background-image: url('/images/icon_question_night.svg');
} */

.help-icon.help-icon-hovered {
	border: 1px solid var(--main_colour);
}

.help-icon.help-icon-hovered use {
	fill: var(--main_colour) !important;
}


#workflow-builder #help  {
	position: absolute;
	margin-left: 290px;
	z-index: 3;
}



#workflow-builder .tool-tip {
	position: absolute;
	width: 100px;
	height: 100px;
}

#assign-tag {
	background-color: #33ad7c;
}
#email-tag {
	background-color: #eab700;
}

#if-tag{
  	background-color: #0077f0;
}

#if-else-tag{
	background-color: #9840db;
}

#wait-tag{
	background-color: #e27e00;
}

#after-tag{
	background-color: #17BAE5;
}

#for-tag{
	background-color: #E51783;
}

#workflow-builder #help {
	position: absolute;
}


#assign-tooltip {
	margin-left: 435px;
	margin-top: 135px;
}

#email-tooltip {
	margin-top: 235px;
	margin-left: 435px;
}

#ifelse-tooltip {
	margin-left: 472px;
	margin-top: 455px;
}

#if-tooltip {
	margin-left: 472px;
	margin-top: 325px;
}

#wait-tooltip {
	margin-left: 472px;
	margin-top: 635px;
}

#after-tooltip {
	margin-left: 472px;
	margin-top: 750px;
}

#for-tooltip {
	margin-left: 472px;
	margin-top: 865px;
}

#assign-help {
	margin-top: 137px;
}

#email-help {
	margin-top: 74px;
}

#if-help {
	margin-top: 66px;
	margin-left: 38px;
}

#ifelse-help {
	margin-top: 105px;
	margin-left: 38px;
}

#wait-help {
	margin-top: 155px;
	margin-left: 38px;
}

#after-help {
	margin-top: 86px;
	margin-left: 38px;
}
#for-help {
	margin-top: 93px;
	margin-left: 38px;
}

#workflow-builder .tooltip {
	position: absolute;
	z-index: 10;
	width: 225px;
	background-color: white;
	padding-left: 0.75em;
	padding-right: 1em;
	padding-top: 0.25em;
	padding-bottom: 0.5em;
	-webkit-animation: fadeAnimation 0.25s;
	-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4) ; 
	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4) ;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.4) ;
	border-radius: 5px;
}

#workflow-builder #tooltips {
	position: absolute;
}

@-webkit-keyframes fadeAnimation {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0.25;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

.tooltip-header {
	font-size: 14px;
	margin-bottom: 5px;
}

.tooltip-body {
	font-size: 11px;
	color: grey;
	
}

#workflow-builder .selected {
	/* filter: saturate(1.7) brightness(1.1); */
	-webkit-transition: 0.1s -webkit-filter linear;
	-moz-transition: 0.1s -moz-filter linear;
	-moz-transition: 0.1s filter linear;
	-ms-transition: 0.1s -ms-filter linear;
	-o-transition: 0.1s -o-filter linear;
	transition: 0.1s filter linear, 0.1s -webkit-filter linear;
	stroke-width: 2px;
	stroke: #1b1b1b;	
}

#workflow-builder .greyed, #workflow-builder .greyed + foreignObject {
	opacity: .5;
}

#workflow-builder .greyed input {
	background-color: rgba(75, 75, 75, 0.521);
}

#workflow-builder .greyed_help_tags {
	display: none;
}