* {
  margin: 0;
}

body {
  margin: 0;
  padding: 0;
  /* overflow: hidden; */
  /* height: auto; */
  line-height: 1.0;
}

option {
  padding: 5px;
}

.password-input {
  position: relative;
  padding-right: 45px;
}

.toggle-eye {
  position: absolute;
  margin-left: -40px;
  margin-top: 17px; /* adjust to match your input height */
  cursor: pointer;
  user-select: none;
  font-size: 1.8rem;
  opacity: 0.7;
}

.ui-datepicker-trigger {
  width: 40px;
  height: 40px;
  /* width: 50px; */
  /* height: 100%; */
  position: absolute;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  cursor: pointer
}

#spinner {
  border: 6px solid; 
  border-color: darkred transparent darkred transparent;
  border-radius: 50%; 
  width: 120px; 
  height: 120px; 
  animation: spin 1.3s linear infinite; 
  position: absolute; 
  top: 50%; 
  left: 50%;  
  display: none; /* Hidden by default */ 
  z-index:10;
} 

@keyframes spin { 
  to {
    transform: rotate(360deg)
  }
}

hr {
  margin-top: 0;
  margin-bottom: 0;
/*   border: none;
  border-top: none; */
}

#export-dropdown-list {
  display: none;
}

input[type="radio"]{
  margin-left: 20px;
}

#togglePreview, 
#undoButton,
#returnButton,
#redoButton,
#saved-label,
#releaseButton,
#reviseCurrentModel,
#deselectAllElements,
#print,
#closeModel,
#clear,
#returnModelButton {
  display: none;
}

/* #operating_menu {
  display: none;
}
 */

 #navigation-stage::-webkit-scrollbar,
 #parent-stage::-webkit-scrollbar {
   display: initial;
 }

/* width */
#navigation-stage::-webkit-scrollbar,
#parent-stage::-webkit-scrollbar {
  width: 15px;
  height: 15px;
}

/* Track */
#navigation-stage::-webkit-scrollbar-track,
#parent-stage::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
/* Handle */
#navigation-stage::-webkit-scrollbar-thumb,
#parent-stage::-webkit-scrollbar-thumb {
  background: darkgrey; 
  border-radius: 10px;
}

/* Handle on hover */
#navigation-stage::-webkit-scrollbar-thumb:hover,
#parent-stage::-webkit-scrollbar-thumb:hover {
  background: #b30000; 
}

/* Buttons */
::-webkit-scrollbar-button:single-button {
  /* background-color: rgb(64, 64, 64); */
  background-color: white;

  display: block;
  background-size: 12px;
  background-repeat: no-repeat;
}


/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
  height: 12px;
  width: 16px;
  background-position: center 4px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='50,00 0,50 100,50'/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='darkred'><polygon points='50,00 0,50 100,50'/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:decrement:active {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='50,00 0,50 100,50'/></svg>");
}

/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
  height: 12px;
  width: 16px;
  background-position: center 2px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 100,0 50,50'/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:increment:hover {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='darkred'><polygon points='0,0 100,0 50,50'/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:increment:active {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,0 100,0 50,50'/></svg>");
}

/* Left */
::-webkit-scrollbar-button:single-button:horizontal:decrement {
  height: 12px;
  width: 12px;
  background-position: 3px 3px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,50 50,100 50,0'/></svg>");

}

::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='darkred'><polygon points='0,50 50,100 50,0'/></svg>");
}

::-webkit-scrollbar-button:single-button:horizontal:decrement:active {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,50 50,100 50,0'/></svg>");
}

/* Right */
::-webkit-scrollbar-button:single-button:horizontal:increment {
  height: 12px;
  width: 12px;
  background-position: 3px 3px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 0,100 50,50'/></svg>");
}

::-webkit-scrollbar-button:single-button:horizontal:increment:hover {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='darkred'><polygon points='0,0 0,100 50,50'/></svg>");
}

::-webkit-scrollbar-button:single-button:horizontal:increment:active {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,0 0,100 50,50'/></svg>");
}

/****************************** Slide in menu hamburger */

/* remove pading and margin to align sidenav items */
.sidenav ul {
  padding: 0;
  margin: 0;
}
.sidenav {
  width: 0;
  position: fixed;
  z-index: 10;
  /* top: 150px; */
  top: 550px;
  left: 0;
  background-color: whitesmoke;
  overflow-x: hidden;
  transition: 0.2s;
  /* padding-top: 50px; */
  /* padding: 5px 10px 0px 0px; */
}

.sidenav a {
  padding: 8px 8px 8px 25px;
  text-decoration: none;
  font-size: 20px;
  font-family: arial;
  font-weight: bold;
  color: darkred;
  display: block;
  transition: 0.2s; 
}
 
.sidenav a:hover {
  color: white;
  cursor: default;
  background-color: darkred;
}

.sidenav:not(:hover) {
  width: 0;
}

.sidenav .closebtn {
  position: absolute;
  /* top: 0px; */
  right: 25px;
  font-size: 36px;
  /* margin-left: 50px; */
}

.openbtn {
  position: fixed;
  z-index: 8;
  /* top: 160px; */
  top: 560px;
  left: 12px;
  width: 35px;
  height: 30px;
/*   background-color: whitesmoke; */
}

#hamburger {
  color: darkred;
  font-size:30px;
  cursor:pointer;
}

#line1, #line2, #line3 {
  width: 35px;
  height: 5px;
  background-color: darkred;
  margin-bottom: 5px;
}

#line3 {
  margin-bottom: 0px;
}

/* side menu */
#openDeleteWorkspaceForm,
#openCopyWorkspaceForm,
#openDeleteWorkflowForm,
#openCopyWorkflowForm,
#openDeleteModelForm,
#totalReport,
/* .checkBeforeLogout, */
.usermanual,
.avatar,
.pal,
.tool-list,
.copyEnv,
.deleteEnv,
.userAttr,
.userRoleAttr,
.feedback,
.modelAttr,
.whiteboard,
.audio,
.export,
#openChangeModelActivtyForm,
#openHostWhiteboardForm,
#startRebuildReport,
.rollups,
/* #openReviseReleasedModel, */
#switchUser,
#enterpriseContinuityReport {
  list-style: none;
}

/* end of side menu */

#searchForElement{
  margin-left: 320px;
  /*left: 2500px;*/
  position: absolute;
  list-style: none;
	text-decoration: none;
	font-size: 20px;
	font-family: arial;
  color: darkred;
  font-weight: bold;
  top: 15px;
  z-index: 1;
}

.checkBeforeLogout {
  margin-left: 480px;
  /*left: 2600px;*/
  position: absolute;
  list-style: none;
	text-decoration: none;
	font-size: 20px;
	font-family: arial;
  color: darkred;
  font-weight: bold;
  top: 15px;
  z-index: 1;
}

.closeEnvironment {
  margin-left: 425px;
  /*left: 2600px;*/
  position: absolute;
  list-style: none;
	text-decoration: none;
	font-size: 35px;
	font-family: arial;
  color: darkred;
  font-weight: bold;
  top: 7px;
  z-index: 1;
}

#listBookmarks,
#bookmarksDelete {
  overflow-x: scroll;
}

#bookMark {
  margin-left: 375px;
  /*left: 390px;*/
  position: absolute;
  list-style: none;
	text-decoration: none;
	font-size: 20px;
	font-family: arial;
  color: darkred;
  font-weight: bold;
  top: 15px;
  z-index: 1;
}

#basic-functions {
  position: absolute;
/*   top: 10px; */
  z-index: 6;
  display: none;
  /*left: 1980px;*/
  width: 510px;
  height: 70px;
  /*left: 80%;*/
}

.currentWorkspace{
  position: absolute;
  /*left: 2560px;*/
  display: none;
  top: 100px;
  z-index: 1;
  font-family: arial;
  color: black;
  font-weight: bold;
  font-size: 20px;
}

#tooltipreleasebutton,
#tooltiptoplevel,
#tooltipreviseButton,
#tooltipsavelabel,
#tooltipnavview,
#tooltipshidemodelenv,
#tooltipundo,
#tooltipredo,
#tooltipreturnfromsubprocess,
#tooltipsavemodel,
#tooltipprevmodel,
#tooltipreleasemodel,
#tooltiprevisemodel,
#tooltipprevmap {
  position: absolute;
  /* display: none; */
  z-index: 1;
  font-family: arial;
  color: black;
  font-weight: bold;
  font-size: 20px;
}

.tooltiptextSearch{
  position: absolute;
  /*left: 2560px;*/
  display: none;
  top: 70px;
  z-index: 1;
  font-family: arial;
  color: black;
  font-weight: bold;
  font-size: 20px;
}

.tooltiptextBookmark {
  position: absolute;
  /*left: 2610px;*/
  display: none;
  top: 70px;
  z-index: 1;
  font-family: arial;
  color: black;
  font-weight: bold;
  font-size: 20px;
}

.tooltiptextLogout,
.tooltiptextActivityflow{
  position: absolute;
  /*left: 2650px;*/
  display: none;
  top: 70px;
  z-index: 1;
  font-family: arial;
  color: black;
  font-weight: bold;
  font-size: 20px;
}

.tooltiptextCloseEnv {
  position: absolute;
  /*left: 2650px;*/
  display: none;
  top: 70px;
  z-index: 1;
  font-family: arial;
  color: black;
  font-weight: bold;
  font-size: 20px;
}

/* .tooltiptextActivityflow{
  position: absolute;
  display: none;
  font-family: arial;
  font-weight: bold;
  font-size: 20px;
  border: 1px solid black;
  border-radius: 3px;
  box-shadow: 15px 15px 10px darkred;
  width: auto;
  background-color:white;
  padding: 2px 5px; 
} */

/* .formPopup select option:first-child {
  background-color: #ffffff; /* White for odd options *
  color: black;
  font-weight: bold;
}

.formPopup select option:first-child:hover {
  background-color: #ffffff; /* White for odd options *
  color: black;
  font-weight: bold;
}

.formPopup select option:nth-child(even) {
    background-color: #f2f2f2; /* Light gray for even options *
}

.formPopup select option:nth-child(odd) {
    background-color: #ffffff; /* White for odd options /
}

.formPopup select option:hover {
  background-color: lightcoral;
  color:black;
  font-weight: bold;
  font-size: 20px;
} */


/*
.tooltiptextUndo {
  position: absolute;
  left: 900px;
  display: none;
  top: 70px;
  z-index: 1;
  font-family: arial;
  color: black;
  font-weight: bold;
  font-size: 20px;
  border: 1px solid gray;
  background-color: white;
  padding: 3px 3px;
}

.tooltiptextRedo {
  position: absolute;
  left: 950px;
  display: none;
  top: 70px;
  z-index: 1;
  font-family: arial;
  color: black;
  font-weight: bold;
  font-size: 20px;
  border: 1px solid gray;
  background-color: white;
  padding: 3px 3px;
}

.tooltiptextModelReturn {
  position: absolute;
  left: 1100px;
  display: none;
  top: 70px;
  z-index: 1;
  font-family: arial;
  color: black;
  font-weight: bold;
  font-size: 20px;
  border: 1px solid gray;
  background-color: white;
  padding: 3px 3px;
}

.tooltiptextSave {
  position: absolute;
  left: 1000px;
  display: none;
  top: 70px;
  z-index: 1;
  font-family: arial;
  color: black;
  font-weight: bold;
  font-size: 20px;
  border: 1px solid gray;
  background-color: white;
  padding: 3px 3px;
}
*/

#welcome-msg {
  /*right: 300px;*/
  /*left: 0px;*/
  position: absolute;
  list-style: none;
  display: none;
	font-size: 20px;
	font-family: arial;
  color: darkred;
  font-weight: bold;
  top: 10px;
  z-index: 1;
}

#currentWorkspace {
  /*right: 280px;*/
  /*left: 2165px;*/
  position: absolute;
  list-style: none;
  display: none;
	font-size: 20px;
	font-family: arial;
  color: darkred;
  font-weight: bold;
  top: 40px;
  z-index: 1;
}

#searchForElement:hover,
#bookMark:hover,
.closeEnvironment:hover {
  cursor: pointer;
}

.checkBeforeLogout:hover {
  cursor: pointer;
}

.option-right {
  text-align: right;
}

#hephaestus {

  background-image: url("../img/hephaestus.jpg");
  background-position: center;
	background-repeat: no-repeat;
  padding: 50em;
  opacity: 0.4;
/*   display: block; 
  margin-left: auto;
  margin-right: auto;
  padding-top: 80px; */
/* 
  margin-top: 200px;
  background-size: 100%;
  left: 750px;

  height: 900px;
  width: 400px;
  background-image: url("../img/hephaestus.jpg");
  background-position: center;
	background-repeat: no-repeat;
  background-size: cover;
  outline: 2px solid black;
  z-index: 1;
  position: fixed; */
/* 
  height: 1300px;
  width: 75%;
  left: 700px
  background-size: 25%;
  margin-left: auto;
  margin-right: auto; */
}

.page-heading {
  font-size: 4em;
  font-family: arial;
  color: cadetblue;
  text-align: center;
  margin: auto;
  padding-top: 60px;
  padding-bottom: 10px;
  width: auto;
}

#sub-heading {
  font-size: 2em;
  font-family: arial;
  color: cadetblue;
  text-align: center;
  margin: auto;
  margin-bottom: 15px;
  padding-top: 60px;
  padding-bottom: 10px;
  width: auto;
}

#intro {
  width: 50%;
  font-family: arial;
  margin: auto;
}

.page-heading h2 {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0px 0px 20px 40px;
}

#toc-sub-heading {
font-size: 2em;
font-family: arial;
color: cadetblue;
text-align: center;
margin: auto;
margin: 25px;
padding-bottom: 10px;
width: auto;
}

#toc-wrapper, #toc-content-wrapper  {
  font-family: Arial, Helvetica, sans-serif;
}

#toc-heading {
color: cadetblue;
margin-left: 40px;
font-size: 1.5em;
}

#toc-wrapper h4 {
  color: cadetblue;
  font-size: 1em;
  padding: 5px;
  margin-left: 60px;
}

#toc-wrapper h4 a:link,
#toc-wrapper h4 a:visited,
#toc-wrapper h4 a:active {
  text-decoration: none;
  color: cadetblue;
}

#toc-wrapper h4:hover {
  background-color: lightgray;
  width: 250px;
}

.sub-title {
  text-align: left;
  padding: 5px;
  margin-left: 60px;
}

.sub-sub-title {
  margin-left: 120px;
}

#toc-content-wrapper > ul,
#toc-content-wrapper > p,
#toc-content-wrapper > img {
  margin-left: 120px;
}

#toc-content-wrapper h5 {
  font-size: 1em;
}

.indent {
  text-indent: 25px;
}

/************************* database functions */

#typeNote,
#qual,
#gen_user,
#company,
#modelInactive,
#typeMap,
#typeAll,
#tailor-in {
  margin-left: 15px;
}

.searchType {
  text-align: center;
  margin-bottom: 0.5em;
  line-height: 1.2;
  font-size: 25px;
}

/* .searchCriteria {
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-color: whitesmoke;
  color: #666666;
  border-radius: 5px;
  border: 2px solid transparent;
  outline: none;
  overflow-y: scroll;
  font-family:Arial, Times, serif;  
  font-size: 18px; 
  line-height: 1.3;
  width: 300px;
  height: auto;
  padding: 1em;
} */

#signup-page {
  background-color: #e0e0e0;
  height: 100%;
  width: 100%;
}

#previewWindow {
  position: fixed;
  top: 200px;
  right: 200px;
  border: 1px solid gray;
  background-color: whitesmoke;
  display: none;
  z-index: 1;
}

.login-form,
.signup-form,
.avator-form,
.asset-form {
/* width: 430px; */
/* width: 500px; */
width: 700px;
box-shadow: 0 0 3px 0 rgba(0,0,0,0.3);
background: #fff;
padding: 20px;
margin: 10px auto;
text-align: center;
}

.icon-container,
.icon-container-project,
.icon-container-colead,
.fromworkspace-icon-container,
.toworkspace-icon-container,
.workspace-icon-container,
.activityflow-icon-container,
.options-icon-container {
  width: 50px;
  height: 100%;
  position: absolute;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  cursor: pointer
}

#importactivityflowsnoenv,
#workflowsnoenv,
#newmodelworkspacesnoenv,
#newmodelworkspaces,
#import-models-options-noenv,
#modelsbydomain,
#modelsbyrevision,
#modelsbyexistingrevision,
/* #standardWorkworkspaces, */
#rebuildworkspaces,
#releaseWorkworkspaces,
#trainingWorkworkspaces,
#workspaceslist,
#listProjectNamesByLeadAddTailoring,
#listmapsfordeveloperrole {
  display: none;
}

#genInputData {
  display: none;
}

.input-box {
  border-radius: 20px;
  padding: 10px;
  margin: 10px 0;
  width: 440px;
  border: 1px solid #999;
  outline: none;
  background-color: white;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  /* line-height: 30px; */
  cursor: text
}

#selectFromWorkspace,
#selectToWorkspace,
#selectToWorkflow,
#selectToWorkspaceData,
#selectCreateNewModel,
#selectOptions,
#newmodel,
#selectLoadModel,
#selectRevisionModel,
#listExistingRevision,
#selectChangeModelActivity,
#selectBuildStandardWork,
#selectReleaseModels,
#altWorkspace,
#altWorkflow,
#altActivityflow,
#selectReadTraining,
#projectListData,
#workspaceListData,
#navWorkspaceName,
#navigationMap,
#selectCopyWorkspace,
#newworkspacename,
#selectDeleteWorkspace,
#genInputResult,
#selectProject,
#selectCoLead,
#video_title {
  border-radius: 20px;
  padding: 10px;
  margin: 10px 0;
  /* width: 640px; */
  /* width: 740px; */
  width: 100%;
  border: 1px solid #999;
  outline: none;
  background-color: white;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  /* line-height: 30px; */
  cursor: text;
  /* caret-color: transparent; */ /*prevents blinking cursor */
}

#wbTitle {
  border-radius: 20px;
  padding: 10px;
  margin: 10px 0;
  /* width: 640px; */
  /* width: 740px; */
  width: 100%;
  border: 1px solid #999;
  outline: none;
  background-color: white;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  cursor: text;
}

/* #genInputResult {
  border-radius: 20px;
  padding: 10px;
  margin: 10px 0;
  /* width: 640px; *
  /* width: 740px; *
  border: 1px solid #999;
  outline: none;
  background-color: white;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  /* line-height: 30px; *
  cursor: pointer;
  caret-color: transparent;
} */

/* #selectFromWorkspace,
#selectToWorkflow,
#selectToWorkspaceData,
#selectCreateNewModel,
#selectOptions,
#selectLoadModel,
#selectRevisionModel,
#listExistingRevision {
    caret-color: transparent;
} */

.input-box-alt {
  border-radius: 20px;
  padding: 10px;
  margin: 10px 0;
  width: 540px;
  border: 1px solid #999;
  outline: none;
  background-color: white;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  /* line-height: 30px; */
  cursor: pointer;
}

#inputModelElement {
  border: 1px solid black;
  font-family: Arial, Helvetica, sans-serif;
}

.selectElement {
  width: 150px;
  border: 1px solid black;
  background-color: lightcoral;
  /* color: black; */
  color: white;
  margin: 3px 3px;
  padding: 3px;
  border-radius: 5px;
  font-weight: bold;
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
}

.selectFeedbackElement {
  width: 350px;
  border: 1px solid black;
  background-color: lightcoral;
  /* color: black; */
  color: white;
  margin: 3px 3px;
  padding: 3px;
  border-radius: 5px;
  font-weight: bold;
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
}

#inputModelTray,
#inputMapTray,
#inputProjectTray {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  /* height: 100px; */
  height: auto;
  border: 1px solid #999;
  font-family: Arial, Helvetica, sans-serif;
  padding: 4px;
  margin: 10px 0;
}

div.scroll-text {
  overflow: auto;
}

.center-text {
  display: flex;
  justify-content:center;
}

#itemText {
  padding: 10px;
  margin: 10px 0;
  width: 100%;
  border: 1px solid #999;
  outline: none;
  background-color: white;
  font-size: 20px;
  box-shadow: 0 0 3px 0 rgba(0,0,0,0.3);
  line-height: 1.5;
}

.input-box-size {
  /* border-radius: 20px; */
  padding: 10px;
  /* margin: 10px 0; */
  width: 100%;
  border: 1px solid #999;
  outline: none;
  background-color: white;
  font-size: 20px;
  cursor: pointer;
}

.form-group {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.import-input-box-size {
  /* border-radius: 20px; */
  padding: 10px;
  margin: 10px 0;
  width: 50%;
  border: 1px solid #999;
  outline: none;
  background-color: white;
  font-size: 20px;
}

.mobile-input-box {
  border-radius: 20px;
  padding: 5px;
  margin: 5px 0;
  width: 170px;
  border: 1px solid #999;
  outline: none;
  background-color: white;
  font-size: .9em;
  /* line-height: 30px; */
}

.avatorInputBox,
.processAssetInputBox {
  /* border-radius: 20px; */
  padding: 10px;
  margin: 10px 0;
  width: 400px;
  /* border: 1px solid #999; */
  outline: none;
  background-color: white;
  font-size: 20px;
}

.input-length, .input-title {
  border-radius: 20px;
  width: 210px;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #999;
  outline: none;
}

/* .input-box:focus, .storyline:focus  {
  box-shadow: 0 0 4px rgba(255, 0, 0, 0.5);
  border: 1px solid rgb(255, 0, 0);
} */

.global-btn {
  color: #fff;
  width: 100%;
  padding: 10px;
  border-radius: 20px;
  font-size: 15px;
  margin: 10px 0;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: #1c8adb;
}

.bookmark-btn {
  color: #fff;
  width: 100%;
  padding: 10px;
  border-radius: 20px;
  font-size: 20px;
  margin: 10px 0;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: #1c8adb;
}

.clr-btn, #add-note-link-btn {
  color: #fff;
  width: 100%;
  padding: 10px;
  border-radius: 20px;
  font-size: 15px;
  margin: 10px 0;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: green;
}

#copyTextBtn,
.pasteBtn,
#tailorDescBtn {
  color: #fff;
  width: 100%;
  padding: 10px;
  border-radius: 20px;
  font-size: 15px;
  margin: 10px 0;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: darkred
}

#add-note-link-btn {
  width: 60%;
  background-color: orange;
}

#back-button-wrapper {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  width: 10%;
}

#avatar-image {
  /* width: 70px; */
  width: 120px;
  position: fixed;
  top: 0;
  z-index: 1;
  padding-left: 3px;
}

.avatarImg {
  /* float: left; */
  padding-top: 3px;
}

.back-button,
.addAvatarBack {
  width: 100%;
  color: #fff;
  padding: 10px;
  border-radius: 20px;
  font-size: 15px;
  margin: 10px 0;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: gray;
}

/* 
#back-button-div {
  align-items: center;
} */

/**************** login */
.error {
	color: red;
	font-size: 30px;
}

.success {
  color: green;
	font-size: 30px;
}

.loginsuccessnotice {
  color: red;
}

footer {
	clear: both;
  background-color: lightskyblue;
	border-top: 2px solid black;
	padding: 2px;
  width: 5800px; /* width of canvas */

} 
footer p {
	font-size: 1em;
	text-align: center;
  padding-bottom: 2px;
  margin: 0;
}

#top-header {
  position: fixed;
  top: 600px;
  left: 15px;
  z-index: 1;
  width: 0%;
  /* height: 250px; */
}

#top-navigation {
  background-color: #fff;
  position: fixed;
  top: 5px;
  left: 130px;
  z-index: 1;
  /* width: 100%; */

}

#info-center,
#top-navigation {
  display: none;
  z-index: 1;
  /* height: 190px; */
}

/* .openbtn {
  display: none;
}
 */
#italic {
  font-style: italic;
}

#aside-information {
  float: left;
  width: auto;
  z-index: 1;
}

#workspace-label,
#workflow-label,
#activityflow-label,
#messages-label,
#launched-label,
#map-label {
  margin-bottom: 0px;
  font-family: arial;
  color: cadetblue;
  font-weight: bold;
  font-size: 24px;
}

#messages-nav-label {
  top: 100px;
  left: 175px;
  margin-bottom: 0px;
  font-family: arial;
  color: cadetblue;
  font-weight: bold;
  font-size: 24px;
}

#messages-label {
  position: fixed;
  /* top: 170px; */
  top: 695px;
  left: 210px;
}

#workspace-label {
  position: fixed;
  top: 575px;
  left: 195px;

}

#workflow-label {
  position: fixed;
  top: 615px;
  left: 215px;
  /* margin-bottom: 0px;
  font-family: arial;
  color: cadetblue; */
  /* z-index: 1; */
}

#activityflow-label {
  position: fixed;
  top: 655px;
  /* left: 175px; */
  left: 252px;
}

#launched-label {
  position: fixed;
  top: 730px;
  left: 242px;
}

#workflow,
#workspace,
#activityflow,
#messages,
#project-launched {
  /* float: left; */
  color: black;
  /* margin-left: 7px; */
  margin-left: 200px;
  margin-top: 4px;
  margin-bottom: 5px;
  font-size: 23px;
  border: 1px solid black;
  min-width: 700px;
  height: 30px;
  /* padding-top: 3px; */
  text-align: center;
  font-family: arial;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  font-weight: bold;
  /* z-index: 1; */
  /*  background-color: #F1F2F0; */
}

#workspace {
position: fixed;

top: 570px;
left: 150px;
}

#workflow {
  position: fixed;
  top: 609px;
  left: 150px;
    /*  background-color: #F1F2F0; */
}

#activityflow {
  position: fixed;
  top: 650px;
  left: 150px;
    /*  background-color: #F1F2F0; */
}

#messages {
  position: fixed;
  top: 690px;
  left: 150px;
    /*  background-color: #F1F2F0; */
}

#project-launched {
  position: fixed;
  top: 205px;
  left: 150px;
    /*  background-color: #F1F2F0; */
}

#aside-message {
  position: fixed;
  left: 125px;
  top: 55px;
}

/* #messages {
  float: right;
  color: black;
  margin-left: 7px;
  margin-top: 10px;
  margin-bottom: 5px;
  font-size: 20px;
  border: 1px solid black;
 /*  background-color: #F1F2F0; */
 /* height: 30px;
  padding-top: 3px;
  text-align: center;
  font-family: arial;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
} */

.message-text {
  white-space: pre-line;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 1.5em;
  text-align: left;
}

#map-label {
  display: none;
  float: left;
  margin-left: 20px;
}

#messages-nav-label {
  display: none;
/*   float: left; */
  margin-left: 20px;
  position: fixed;
  top: 55px;
}

#map {
  display: none;
  float: left;
  color: black;
  margin-left: 10px;
  margin-bottom: 5px;
  font-size: 23px;
  border: 1px solid black;
  min-width: 610px;
  height: 30px;
  text-align: center;
  font-family: arial;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  font-weight: bold;
}

#messages-nav {
  display: none;
  /* float: left; */
  color: black;
  margin-left: 160px;
  margin-bottom: 5px;
  font-size: 23px;
  border: 1px solid black;
  min-width: 610px;
  height: 30px;
  text-align: center;
  font-family: arial;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  font-weight: bold;
  position: fixed;
  top: 55px;
}


#q-Div {
  float: left;
}

/* #q-compliant,
#q-noncompliant,
#q-partial,
#q-notaudited,
#clear {
  color: #fff;
  padding: 10px;
  border-radius: 20px;
  font-size: 14px;
  margin-left: 10px;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: #1c8adb;
  border: 1px solid black;
} */

h1, h2, h5 {
  text-align: center;
}

#delete-map-note {
  font-size: 1em;
  color: red;
}

/* form h2 {
  font-family: Arial, Helvetica, sans-serif;
}
 */
th {
	height: 25px;
	text-align: center;
	padding: 10px;
	border: 1px solid black;
	font-size: 15pt;
	font-family: arial;
	border-collapse: collapse;
}

td {
	height: 50%;
	vertical-align: top;
	padding: 10px;
	border: 2px solid black;
	text-align: center;
	font-family: arial;
	font-size: 14pt;
	border-collapse: collapse;
}


#table {
	margin: 0 auto;
}

/* quality report */
#stats,
/*#qualityTable,*/
#subProcessQualityTable,
/* #connectorTable, */
#connectivityTable,
#qualityTotalTable,
#mobileQualityTotalTable,
#tailoredTable,
#totals,
#searchTable,
#trainingTable,
#searchProjectTable,
#orphanedTable,
#buildworkspaceTable,
#semanticTotals {
  float: none;
  margin: 0 auto;
  width: 50%;
}

#connectivityTable {
  float: none;
  margin: 0 auto;
  width: 50%;
  display: none;
}

.dev-ErrorsWarnings {
  text-align: center;
}

.video-menu-text {
  list-style-type: none;
  width: 100%;
  background-color: white;
  margin: 0;
  padding: 10px;
  border: 1px solid black;
}

.video-menu-text:hover {
  background-color: lightgray;
}

#video {
  font-family: arial;
	font-size: 12pt;
  text-align: left;
}

/* right-click menu */
#dev-menu,
#dev-video-menu,
#qual-menu,
#qual-line-menu,
#line-menu,
#user-menu,
#user-video-menu,
#swimlane-menu,
#connector-menu,
#dev-tailored-menu,
#user-line-menu,
#decision-menu,
#connector-tailored-menu,
#decision-tailored-menu,
#user-decision-menu,
#map-menu,
#map-tailor-out-menu,
#map-tailor-in-menu,
#model-tailor-out-menu,
#model-tailor-in-menu {
  border-radius: 15px;
  display: none;
  position: absolute;
  width: 135px;
  background-color: white;
  box-shadow: 15px 15px 10px gray;
  z-index: 10;
}

#dev-menu button,
#dev-video-menu button,
#qual-menu button,
#qual-line-menu button,
#line-menu button,
#user-menu button,
#user-video-menu button,
#swimlane-menu button,
#connector-menu button,
#dev-tailored-menu button,
#user-line-menu button,
#decision-menu button,
#connector-tailored-menu button,
#decision-tailored-menu button,
#user-decision-menu button,
#map-menu button,
#map-tailor-out-menu button,
#map-tailor-in-menu button,
#model-tailor-out-menu button,
#model-tailor-in-menu button {
  width: 100%;
  background-color: white;
  /* border: none; */
  border-bottom: 1px solid gray;
  margin: 0;
  padding: 10px;
}

#dev-menu button:not(:last-child),
#dev-video-menu button:not(:last-child),
#qual-menu button:not(:last-child),
#qual-line-menu button:not(:last-child),
#line-menu button:not(:last-child),
#user-menu button:not(:last-child),
#user-video-menu button:not(:last-child),
#swimlane-menu button:not(:last-child),
#connector-menu button:not(:last-child),
#dev-tailored-menu button:not(:last-child),
#user-line-menu button:not(:last-child),
#decision-menu button:not(:last-child),
#connector-tailored-menu button:not(:last-child),
#decision-tailored-menu button:not(:last-child),
#user-decision-menu button:not(:last-child),
#map-menu button:not(:last-child),
#map-tailor-out-menu button:not(:last-child),
#map-tailor-in-menu button:not(:last-child), 
#model-tailor-out-menu button:not(:last-child),
#model-tailor-in-menu button:not(:last-child) {
  border-bottom: 1px solid gray;
}

#dev-menu button:hover,
/* #dev-video-menu button:hover, */
#qual-menu button:hover,
#qual-line-menu button:hover,
#line-menu button:hover,
#user-menu button:hover,
#user-video-menu button:hover,
#swimlane-menu button:hover,
#connector-menu button:hover,
#dev-tailored-menu button:hover,
#user-line-menu button:hover,
#decision-menu button:hover,
#connector-tailored-menu button:hover,
#decision-tailored-menu button:hover,
#user-decision-menu button:hover,
#map-menu button:hover,
#map-tailor-out-menu button:hover,
#map-tailor-in-menu button:hover,
#model-tailor-out-menu button:hover,
#model-tailor-in-menu button:hover {
  background-color: lightgray;
}

.menu-text {
  font-family: arial;
	font-size: 12pt;
  text-align: left;
}

/* entering role during signup */
.role-frame,
#model-activity,
#process-training,
#map-activity,
#selectJointMoveDelete,
#map-release,
#feedback-status,
#tailor-workflows,
#map-topLevel {

  margin: 0 auto;
  text-align: center;
  font-family: Arial;
  font-size: 20px;
  border: none;
  width: 350px;
}

#import-elements {
  /* padding: 20px 20px; */
 /*  background-color: #fafafa; */
  text-align: center;
  font-family: Arial;
  font-size: 20px;
  border: none;
  width: 550px;
}

#search-activity {
  text-align: center;
  font-family: Arial;
  font-size: 20px;
  border: none;
  width: 450px;
  margin: auto;
}

#add-role,
#add-account {
  text-align: center;
  font-family: Arial;
}

.response {
	border: 2px black;
/*	width: 1000px; */
	width: auto;
	margin-left: auto;
	margin-right: auto;
	margin-top: 40px;
	border-collapse: collapse;
	table-layout: fixed;
	background-color: powderblue;
}

#reloadListNavMaps {
  margin: auto;
}

.select-label {
  display: inline-block;
  width:7em;
	font-family: arial;
	font-weight: bold;
	font-size: 20px;
	padding-right: 5px;
  text-align: right;
}

.collaborative-select-label {
  display: inline-block;
	font-family: arial;
	font-weight: bold;
	font-size: 20px;
	padding-right: 5px;
  text-align: right;
  cursor: pointer;
}

.select-label-form {
  display: inline-block;
  width:9em;
	font-family: arial;
	font-weight: bold;
	font-size: 20px;
	padding-right: 5px;
  text-align: right;
}

.select-video-label {
  display: inline-block;
  /* width:9em; */
	font-family: arial;
	font-weight: bold;
	font-size: 20px;
	padding-right: 5px;
  text-align: right;
}

.select-date-label {
  display: inline-block;
	font-family: arial;
	font-weight: bold;
	font-size: 20px;
	padding-right: 5px;
  text-align: center;
}

#projectstartdate {
  padding: 10px;
  margin: 10px 5px 10px 0;
  border: 1px solid #999;
  border-radius: 20px;
  background: white;
  width: 200px;
  text-align: center;
  font-size: 20px;
}

#projectenddate {
  padding: 10px;
  margin: 10px 5px 10px 0;
  border: 1px solid #999;
  border-radius: 20px;
  background: white;
  width: 200px;
  text-align: center;
  font-size: 20px;
}

.select-label-import {
  display: inline-block;
	font-family: arial;
	font-weight: bold;
	font-size: 20px;
	padding-right: 5px;
  text-align: right;
}

#coll-select-label {
  display: inline-block;
  width:16em;
	font-family: arial;
	font-weight: bold;
	font-size: 20px;
	padding-right: 5px;
  text-align: right;
}

.wide-select-label,
.coll-wide-select-label {
  display: inline-block;
  width:13em;
	font-family: arial;
	font-weight: bold;
	font-size: 20px;
	padding-right: 5px;
  text-align: center;
}

.select-search-label,
.select-asset-label {
  display: inline-block;
  width:9em;
	font-family: arial;
	font-weight: bold;
	font-size: 20px;
	padding-right: 5px;
  text-align: center;
}

#eventDescription,
#workspace_description,
#tailor_workspace_description {
  align-items: center;
}

.select-AssetLink-label {
  display: inline-block;
  /* width: 7em; */
	font-family: arial;
	font-weight: bold;
	font-size: 20px;
	padding-right: 5px;
  text-align: right;
}

.back-btn {
	font-size: large;
	background-color: lightgrey;
	border-radius: 20px;
	padding: 10px;
	margin: 10px 0;
	width: 75%;
	border: 1px solid #999;
	outline: none;
}

.qualContainer {
   margin: 0 auto;
}

/* The switch - the box around the slider */
#toggle-switch, #joint-toggle-switch {
  /* float: left; */
  /* width: 200px; */
  margin-left: 20px;
  text-align: left;
}

.switch {

  position: relative;
  display: inline-block;
  width: 60px;
  height: 18px;
  /* height: 34px; */
  padding-top: 0px;
  margin-bottom: 10px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.switchTitle{
  font-family: Arial, Helvetica, sans-serif;
  color: darkred;
  font-size: 20px;
  font-weight: bold;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

/*ball in slider */
.slider:before {
  position: absolute;
  content: "";
/*   height: 26px;
  width: 26px; */
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 0px;
  /* bottom: 4px; */
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: green;
}

input:focus + .slider {
  box-shadow: 0 0 1px green;
}

input:checked + .slider:before {
  -webkit-transform: translateX(33px);
  -ms-transform: translateX(33px);
  transform: translateX(33px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

input[type=file]::file-selector-button {
  padding: .2em .4em;
  border-radius: .3em;
  background-color: lightcyan;
}

input[type=file]::file-selector-button:hover {
  background-color: cyan;
}

.forgotpassword {
  font-size: 22px; 
}

/* textarea  
{  
   overflow-y: scroll;
   font-family:Arial, Times, serif;  
   font-size: 22px; 
   width: 400px;
   height: 200px;
   padding: 5px 15px;
} */


/* Tablet landscape */
 @media only screen and (max-width: 1836px) {
  /*
  #activityflow-label {
    position: fixed;
    left: 0;
    top: 50px;
  }

  #activityflow {
    position: fixed;
    left: 175px;
    top: 50px;
  } 

  #messages-label {
    position: fixed;
    left: 380px;
    top: 50px;
    width: 300px;
    }

  #messages {
    position: fixed;
    left: 610px;
    top: 50px;
    width: 500px;
  }
  */

  #basic-functions {
    top: 50px;
  }

  #map-label {
    display: none;
    top: 65px;
    position: absolute;
    left: 27px;
  }

  #messages-nav-label {
    position: absolute;
    top: 65px;
    left: 750px;
  }

  #messages-nav {
    position: absolute;
    left: 880px;
    top: 65px;
    min-width: max-content;
    padding: 0 5px 0 5px;
  }

  #map {
    display: none;
    /* float: left; */
    position: absolute;
    top: 65px;
    left: 100px;
    min-width: fit-content;
    padding:0 5px 0 5px;
  }

}

#numConnectors {
  margin: 0 auto;
  max-width: 800px;
  background-color: lightcoral;
}

#connectorCount,
#concol,
.element,
#modelname,
.processelement {
  text-align: center;
}

.connectorQtyError {
  background-color: lightcoral;
}

#exportData {
  margin: 0 auto;
  width: 200px;
}

#feedbackTitle,
#updateModelActivity,
#updateModelReleaseStatus,
#listMapsForRelease,
/* #listMapsForDelete, */
#listMapsForImport,
.listModels,
.listworkspacesvisible,
.listUsers,
.listMaps,
.listProjects,
#listAC,
#listBookmarksHeader,
#deleteBookmarksHeader {
  font-weight: bold;
  background-color:white;
  color: black;
}

.errorRed {
  font-weight: bold;
  color:red;
}

/* feedback */
#feedback-data {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#feedback-data td, #feedback-data th {
  border: 1px solid #ddd;
  padding: 8px;
  word-wrap: normal;
  width: 400px;
}

#feedback-data tr:nth-child(even){background-color: #f2f2f2;}

#feedback-data tr:hover {background-color: #ddd;}

#feedback-data th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: center;
    background-color: #294c67;;
    color: white;
}

/* portrait */

/* @media only screen and (max-width: 2300px) {

 .login-form {
  width: auto;
  scale: .6;

  }  

  #searchForElement {
    display: block;
  }

  #top-header {
    background-color: #fff;
    position: fixed;
    top: 0px;
    left: 15px;
    z-index: 1;
    width: 100%;
  }
}
 */
/* @media only screen and (min-width: 740px) { */
@media only screen and (max-width: 740px) {

  #welcome-msg,
  #searchForElement,
  #bookMark,
  #currentWorkspace,
  .closeEnvironment {
    visibility: hidden;
  }

  #mobile-report {
    display: block;
  }

  #navButton,
  #envButton {
    visibility: hidden;
  }
  
  #formContainer {
    height: 0px;
    width: auto;
    scale: .6;
  }

  .input-box {
    width: 15em;
  }

  /* Hide scrollbar for Chrome, Safari and Opera */
  #navigation-stage::-webkit-scrollbar {
    display: none;
  }
 
  #parent-stage::-webkit-scrollbar {
    display: none;
  }

  #navigation-stage,
  #parent-stage {
    display: none;
  }


  /* Hide scrollbar for IE, Edge and Firefox */
  #navigation-stage,
  #parent-stage {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

  #mobileQualTotalStats,
  #mobileQualityTotalTable {
    margin: 0 auto;
  }

  #basic-functions {
    top: 10px;
    right: 150px;
    font-size: .8em;
    height: 0px;
  }

  .checkBeforeLogout {
    font-size: 1em;
    top: 5px;
    padding-top: 5px;
    right: 100px;
    margin: 0px;
  }

  .select-label {
    text-align: center;
  }

  .avatarImg {
    display: none;
  }

  #hephaestus,
  .openbtn,
  #info-center,
  #top-navigation  {
    display: none
  }

  #toc-wrapper h4 {
    color: cadetblue;
    font-size: 1em;
    padding: 5px;
    margin-left: 5px;
  }
  
  .sub-title {
    font-size: 1.2em;
    margin-left: 0px;
    padding: 2px;
  }
  
  .sub-sub-title {
    font-size: 1em;
    margin-left: 0px;
    padding: 2px;
  }

  #toc-content-wrapper h5 {
    font-size: .7em;
  }

  #nav_home ul {
    padding-top: 0px;
    padding-left: 5px;
  }
 
  #hephaestus-definition p {
    width: 95%;
    font-size: .8em;
    padding: 3px;
  }

  #sample {
    display: none;
  }

  #start {
    display: none;
  }

  .page-heading, .sub-heading, #toc-sub-heading {
    font-size: 1.5em;
    padding-top: 10px;
  }

  #toc-content-wrapper {
    padding: 3px;
  }

  #toc-content-wrapper li {
    font-size: 1em;
  }

  #toc-content-wrapper > img {
    margin-left: 3px;
    width: 100px;
  }

  img {
    margin-left: 3px;
    width: 100px;
  }

  #toc-content-wrapper ul {
    text-align: left;
    margin-left: 0px;
    font-size: .8em;
  }

  #toc-content-wrapper p {
    padding: 5px;
    font-size: .8em;
    margin-left: 0px;
  }
  
/*  .login-form {
     width: 500px;
    scale: .7;
    margin: 0 auto;
  }    */
  
  .select-label {
    text-align: right;
  }

  /* mobile quality report */
  td, th {
    font-size: .5em;
  }

  .mobile-h2,
  #mobile-h5,
  #connector-h5,
  #swimlane-h5,
  #connectivity-h5,
  #processComplainceStats,
  #processTotalComplainceStats,
  #mobileProcessTotalComplainceStats,
  #search-h1,
  #training-h1,
  #description-h1,
  #buildworkspace-h1{
    font-size: .75em;
    font-weight: bold;
  }

  #mobile-h1 {
    font-size: 1.5em;
    font-weight: bold;
  }

  #qualStats,
  #qualTotalStats,
  #qualContainer {
    /* display: block; */
    width: 100px;
    height: 100px;
  }

  .openListModelsForm {
    display: block;
  }

  .tooltiptextLogout {
    display: none;
  }

/*   #popupListModels {
    display: none;
    scale: .6;
    left: 20%;
    top: 0%;
  } */

}

@media only screen and (max-width: 360px) {

  #navButton,
  #envButton,
  #welcome-msg,
  #searchForElement,
  #bookMark,
  #currentWorkspace,
  .closeEnvironment {
    visibility: hidden;
  }
  
  #navigation-stage::-webkit-scrollbar,
  #parent-stage::-webkit-scrollbar {
    display: none;
  }

  .openListModelsForm {
    display: none;
  }

  #formContainer {
    scale: 1.0;
  }

  #navigation-stage::-webkit-scrollbar {
    display: none;
  }

  #parent-stage {
    overflow: hidden;
    display: none;
  }
  
  #welcome-msg {
    visibility: hidden;
  }

  #searchForElement {
    visibility: hidden;
  }

  #bookMark {
    visibility: hidden;
  }

  .closeEnvironment {
    visibility: hidden;
  }

  .checkBeforeLogout {
    font-size: 1em;
    padding-top: 5px;
    right: 70px;
    position: fixed;
    margin: 0px;
  }

  #mobileQualTotalStats,
  #mobileQualityTotalTable {
    margin: 0 auto;
  }

  #hephaestus,
  .openbtn,
  #info-center,
  #top-navigation  {
    display: none;
  }

  #toc-wrapper h4 {
    color: cadetblue;
    font-size: 1em;
    padding: 5px;
    margin-left: 5px;
  }
  
  .sub-title {
    font-size: 1.2em;
  }
  
  .sub-sub-title {
    font-size: 1em;
  }

  #toc-content-wrapper h5 {
    font-size: .7em;
  }

  #nav_home ul {
    padding-top: 0px;
    padding-left: 5px;
  }
 
  #hephaestus-definition p {
    width: 95%;
    font-size: .75em;
    padding: 3px;
  }

  #sample {
    display: none;
  }

  #start {
    display: none;
  }

  .page-heading, .sub-heading, #toc-sub-heading {
    font-size: 1.5em;
    padding-top: 10px;
    padding-bottom: 0;
  }

  #toc-content-wrapper {
    padding: 3px;
  }

  #toc-content-wrapper > img {
    margin-left: 3px;
    width: 100px;
  }

  img {
    margin-left: 3px;
    width: 100px;
  }

  #toc-content-wrapper > ul {
    text-align: left;
    margin-left: 0px;
    font-size: .6em;
  }

  #toc-content-wrapper p {
    padding: 5px;
    font-size: .8em;
    margin-left: 0px;
  }

  .login-form {
    width: auto;
    scale: .85;
    margin: 0;
  }
  .select-label {
    text-align: center;
  }

  /* mobile quality report */
  td, th  {
    font-size: .5em;
  }

  .mobile-h2,
  #mobile-h5,
  #connector-h5,
  #swimlane-h5,
  #connectivity-h5,
  #processComplainceStats,
  #processTotalComplainceStats,
  #mobileProcessTotalComplainceStats,
  #search-h1,
  #training-h1,
  #description-h1,
  #buildworkspace-h1
   {
    font-size: 1em;
  }

  #mobile-h1 {
    font-size: 1.5em;
    font-weight: bold;
  }

  #qualStats,
  #qualTotalStats,
  #qualContainer {
    width: 150px;
    height: 150px;
  }
 
  #popupListModels {
    display: none;
    scale: .6;
    left: 1px;
    top: 10%;
  }

  .tooltiptextLogout {
    display: none;
  }

}

/* landscape */

.resetpassword-form {
	width: 300px;
	box-shadow: 0 0 3px 0 rgba(0,0,0,0.3);
	background: #fff;
	padding: 20px;
	margin: 10px auto;
	text-align: center;
}