/************************************************************************
 *  Copyright 2019-2023 Dalhousie Blockchain Lab (https://blockchain.cs.dal.ca/)
 *
 *  Author: Christian G. Liu.
 *
 *  The TABS+ software is subject to a private software license, with its
 *  terms and conditions defined by the Dalhousie Blockchain Lab (https://blockchain.cs.dal.ca/).
 *  As an intellectual property of the Dalhousie Blockchain Lab, the permissions and usage of
 *  this software are granted under the lab's discretion. At present, TABS+ is designated for academic research purposes.
 *  The public dissemination and duplication of the software are currently prohibited.
 ***********************************************************************/

html {
  height: 100%;
  zoom: 0.9;
}

body {
  height: 100%;
  font-family: monospace;
  font-size: 0.9em;
  overflow: auto;
  zoom: 0.67;
}

.navbar-brand em {
  font-size: 0.9rem;
}

nav.navbar.navbar-expand-sm.bg-light.navbar-light {
  padding: 0;
  position: absolute;
  top: 50px;
  z-index: 9999;
}

#loader {
  z-index: 1212;
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  top: 0;
  opacity: 1;
  background-color: #f8f8f8;
  transition: opacity 2s ease-out, z-index 3s step-end;
}
body:not(.preload) #loader {
  opacity: 0;
  z-index: -1;
}
#openPopupButton {
  left: -1000px;
  position: absolute;
}
#editor,
#graph,
#actors,
#actor,
#actorstext,
/* #stepbystep, */
#bpmncanvas,
#scViewCanvas,
#fsmcreation,
#merged_actor,
#hsm_selection,
#smartcontracttext,
#smartcontractconversion,
#merged_FSM,
#cluster_d3_graph,
#cluster_graph,
#messages,
/* #visualSendingMsg, */
#transitionsProgress,
#doitext,
#compiledsmartcontract,
#abiContents,
/* #smartContractMsgContainer,
#visualSendingMsgContainer,
#mainchainMsgContainer, */
#smartcontractcontainer,
#simoutanousTxCountToThroughout, #blockTimeToThroughout, #blockSizeToThroughout, #clusterCountToThroughout,
#mainchainTransactionExplorerTabs, #offchainTransactionExplorerTabs {
  position: absolute;

  /*top: 4em;*/
}

#mainchainTransactionExplorerTabs,
#offchainTransactionExplorerTabs {
  top: 266px;
}
#actors,
#actorstext,
#messages,
#actor,
#merged_FSM,
#merged_actor,
#hsm_selection {
  top: 225px;
  right: 0;
  width: 30%;
  height: 55%;
  border-style: outset;
}

#actorstext textarea {
  overflow: auto;
  resize: vertical;
  height: 100%;
  width: 100%;
}

#stepbystep {
  top: 270px;
  right: 0;
  width: 100%;
  height: 95%;
  overflow: scroll;
  border-style: outset;
}

#hsm_selection {
  overflow: scroll;
  text-align: center;
}

#actors-bar {
  padding: 0;
  margin: 0;
  position: absolute;
  left: 0;
  bottom: 4em;
  width: 30%;
  height: 1em;
}
#editor,
#cluster_graph {
  top: 70%;
  right: 0;
  width: 30%;
  height: 27%;
  border-style: outset; /*bottom: 6em;*/
}
#simoutanousTxCountToThroughout,
#blockTimeToThroughout,
#blockSizeToThroughout,
#clusterCountToThroughout {
  /* top: 70%;
  right: 0; */
  /* width: 50%; */
  /* height: 37%; */
  padding-bottom: 20px;
  /* border-style: outset; bottom: 6em; */
}
#simoutanousTxCountToThroughout {
  top: 225px;
  left: 0;
  width: 95%;
  height: 75% !important;
  display: flex;
  flex-wrap: wrap;
  overflow: visible;
}
#blockTimeToThroughout {
  top: 225px;
  right: 0;
}
#blockSizeToThroughout {
  top: 50%;
  left: 0;
}
#clusterCountToThroughout {
  top: 50%;
  right: 0;
}
#graph,
#cluster_d3_graph {
  left: 0;
  top: 225px;
  right: 0;
  width: 70%;
  overflow: auto;
  height: 80%;
  border-style: outset; /*bottom: 4em;*/
}

#smartcontractconversion {
  left: 0;
  top: 270px;
  /* right: 0; */
  width: 50%;
  overflow: auto;
  height: 80%;
  /* border-style: outset;    bottom: 4em; */
}
#smartcontracttext {
  left: 0;
  /* top: 200px; */
  /* right: 0; */
  width: 100%;
  overflow: auto;
  height: 95%;
  border-style: outset; /*bottom: 4em;*/
}

#abiContents {
  left: 0;
  /* top: 200px; */
  /* right: 0; */
  width: 100%;
  overflow: auto;
  height: 95%;
  border-style: outset; /*bottom: 4em;*/
}

#compiledsmartcontract {
  left: 50%;
  top: 270px;
  /* right: 0; */
  width: 50%;
  overflow: auto;
  height: 80%;
  /* border-style: outset;    bottom: 4em; */
}
#doitext {
  left: 0;
  top: 200px;
  /* right: 0; */
  width: 95%;
  overflow: auto;
  height: 75%;
  border-style: outset; /*bottom: 4em;*/
}

#visualSendingMsg {
  position: absolute;
  left: 0;
  top: 225px;
  right: 0;
  width: 100%;
  overflow: auto;
  height: 95%;
  border-style: outset; /*bottom: 4em;*/
}
.Row {
  display: table;
  width: 100%; /*Optional*/
  table-layout: fixed; /*Optional*/
  border-spacing: 10px; /*Optional*/
}
.Column {
  display: table-cell;
}
#accountsBalances {
  display: none;
}
#visualmsgleft {
  width: 55%;
  /* height: 87%; */

  /* float: left; */
}
#visualmsgright {
  width: 35%;
  /* height: 100%; */
  /* top: 155px;
  right: 0;
  position: absolute;
  float: right; */
}

div#visualmsgoffchaindata {
  width: 10%;
  /* height: 100%; */
  /* float: left; */
  /* top: 155px;
  left: 52%;
  position: absolute; */
}
/* ..navbar-nav */
.navbar-nav {
  flex-direction: row;
}
.nav-link.active {
  background-color: red;
  color: white;
}
#transitionsProgress {
  left: 0;
  top: 60%;
  right: 0;
  width: 70%;
  overflow: auto;
  height: 45%;
  border-style: outset; /*bottom: 4em;*/
}

#visualSendingMsgContainer,
#allinonechannel_visualSendingMsgContainer {
  top: 67%;
  display: flex;
  align-content: flex-start;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 95%;
  height: auto;
  border-bottom: 2px solid grey;
}

#smartcontractcontainer {
  top: 270px;
  width: 65%;
  height: 70%;
}

#smartContractMsgContainer {
  top: 35%;
  display: flex;
  align-content: flex-start;

  justify-content: space-around;
  flex-wrap: wrap;
  width: 95%;
  /* height:33%; */
  border-bottom: 2px solid grey;
}

#mainchainMsgContainer {
  top: 50px;
  display: flex;
  align-content: flex-start;

  justify-content: space-around;
  flex-wrap: wrap;
  width: 95%;
  /* height: 33%; */
  border-bottom: 2px solid grey;
}

#enterpriseMsgContainer {
  top: 50px;
  display: flex;
  align-content: flex-start;

  justify-content: space-around;
  flex-wrap: wrap;
  width: 95%;
  /* height: 65%; */
  border-bottom: 2px solid grey;
}

#visualSendingMsgContainer div,
#allinonechannel_visualSendingMsgContainer div,
#allInOneChannel div,
#smartContractMsgContainer div,
#mainchainMsgContainer div,
#mockEndpointsContainer div,
#mainchainContainer div,
#ipfsdataContainer div:not(.Row):not(.Column) {
  width: 70px;
  height: 70px;
  border-width: 2px;
  border-style: dashed;
  font-size: 10px;
  margin: 17px;
}
#mainchainContainer div {
  clear: both;
  margin-right: 150px;
  float: right;
}
#mockEndpointsContainer div {
  clear: both;
  margin-right: 150px;
  float: right;
}
#enterpriseMsgContainer div {
  width: 100px;
  height: 100px;
  border-width: 2px;
  border-style: dashed;
  font-size: 10px;
  margin: 17px;
}

/* #visualSendingMsgContainer  fieldset, #smartContractMsgContainer  fieldset, #mainchainMsgContainer  fieldset, #mainchainContainer  fieldset {
display: flex
} */

#visualSendingMsgContainer legend,
#allinonechannel_visualSendingMsgContainer legend,
#allInOneChannel legend,
#smartContractMsgContainer legend,
#enterpriseMsgContainer legend,
#mainchainMsgContainer legend,
#mockEndpointsContainer legend,
#mainchainContainer legend,
#visualSendingMsgContainer legend {
  font-size: 10px;
}

#visualSendingMsgContainer #actor_priority_message_Q,
#allinonechannel_visualSendingMsgContainer
  #actor_allinonechannel_priority_message_Q,
#smartContractMsgContainer fieldset,
#enterpriseMsgContainer fieldset,
#mainchainMsgContainer fieldset,
#mockEndpointsContainer,
#mainchainContainer fieldset,
#allInOneChannel fieldset,
#allinonechannel_visualSendingMsgContainer fieldset,
#visualSendingMsgContainer fieldset {
  display: flex;
  margin-inline-start: 2px;
  margin-inline-end: 2px;
  padding-block-start: 0.35em;
  padding-inline-start: 0.75em;
  padding-inline-end: 0.75em;
  padding-block-end: 0.625em;
  min-inline-size: min-content;
  border-width: 1px;
  border-style: groove;
  border-color: rgb(32, 17, 17);
  border-image: initial;
  padding-left: 5px;
  padding-right: 5px;
  margin-bottom: 17px;
}

#visualSendingMsgContainer #actor_priority_message_Q,
#allinonechannel_visualSendingMsgContainer
  #actor_allinonechannel_priority_message_Q {
  margin-bottom: 0;
  width: 40px;
  height: 40px;
  border-right: 0;
  border-left: 0;
}
#visualSendingMsgContainer #actor_priority_message_Q legend,
#allinonechannel_visualSendingMsgContainer
  #actor_allinonechannel_priority_message_Q
  legend {
  position: relative;
}
#visualSendingMsgContainer #actor_priority_message_Q div,
#allinonechannel_visualSendingMsgContainer
  #actor_allinonechannel_priority_message_Q
  div {
  width: 10px;
  height: 10px;
  border-width: 1px;
  border-style: solid;
  font-size: 10px;
  margin: 2px;
  margin-top: 15px;
}

[id$="ToThroughout"] legend {
  font-size: 16px;
}
[id$="ToThroughout"] fieldset {
  display: flex;
  margin-inline-start: 2px;
  margin-inline-end: 2px;
  padding-block-start: 0.35em;
  padding-inline-start: 0.75em;
  padding-inline-end: 0.75em;
  padding-block-end: 0.625em;
  min-inline-size: min-content;
  border-width: 1px;
  border-style: groove;
  border-color: rgb(32, 17, 17);
  border-image: initial;
  padding-left: 5px;
  padding-right: 5px;
  height: 97%;
  margin-bottom: 17px;
}

#fsmcreation {
  left: 0;
  top: 225px;
  right: 0;
  width: 70%;
  overflow: auto;
  height: 80%;
  border-style: outset; /*bottom: 4em;*/
}
#bpmncanvas {
  left: 0;
  top: 225px;
  right: 0;
  /* width: 100%; */
  overflow: auto;
  height: 80%;
  border-style: outset; /*bottom: 4em;*/
}
foreignObject {
  overflow: visibley;
}
#scViewCanvas {
  left: 0;
  top: 225px;
  right: 0;
}

#scViewCanvas .node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 3px;
}

#scViewCanvas .node text {
  font: 12px sans-serif;
}

#scViewCanvas .link {
  fill: none;
  stroke: #ccc;
  stroke-width: 2px;
}
.methodPopup {
  position: absolute;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  display: none;
}

.nav-item {
  padding-right: 25px;
  padding-right: 17px;
  font-size: 14px;
  margin-left: 12px;
  font-size: 14px;
  border-right: 3px solid black;
}
#editor-bar {
  padding: 0;
  margin: 0;
  position: absolute;
  right: 0;
  bottom: 1em;
  width: 30%;
  height: 1em;
}
#cluster_d3_graph img {
  width: 95%;
  /* height: 100%; */
}
body.gallery #editor,
body.gallery #cluster_graph {
  top: 70%;
}
body.gallery #actors,
body.gallery #actorstext,
body.gallery #messages,
body.gallery #smartcontractconversion {
  top: 225px;
}
body.gallery #smartcontracttext {
  top: 200px;
}
body.gallery #actor {
  top: 225px;
}
body.gallery #merged_actor,
body.gallery #hsm_selection {
  top: 225px;
}

body.gallery #merged_FSM {
  top: 225px;
}

#merged_actor textarea,
#merged_FSM textarea,
#messages textarea,
#transitionsProgress textarea {
  width: 99%;
  height: 99%;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box; /* Firefox, other Gecko */
  box-sizing: border-box; /* Opera/IE 8+ */
}

/*body.gallery #examples {*/
/*    top: 0;*/
/*    width: 30%;*/
/*}*/
/*body.fiddle #savePNGonLine {*/
/*    display: block;*/
/*}*/
/*body:not(.fiddle) #savePNGonLine {*/
/*    display: none;*/
/*}*/

svg {
  margin: 15px;
}

.navbar-brand em {
  font-size: 14px;
}

.dropdown button {
  font-size: 10px;
}

.dropdown .dropdown-menu {
  font-size: 10px;
}

#deploySC_total_on_chain,
#deploySC_partial_on_chain {
  color: white;
  background-color: red;
}

.col {
  /* element.style { */
  text-align: center;
  /* } */
}
#costEstimation, #mainchainonlyContainerdiv, #httpservicesdiv {
  clear: both;
}
#mainchainonlyContainerdiv {
  padding-bottom: 200px;
}

#costEstimation legend,
#stepbystepcostEstimation legend {
  font-size: 12px;
}

#costEstimation fieldset,
#stepbystepcostEstimation fieldset {
  display: block;
  margin-inline-start: 2px;
  margin-inline-end: 2px;
  padding-block-start: 0.35em;
  padding-inline-start: 0.75em;
  padding-inline-end: 0.75em;
  padding-block-end: 0.625em;
  min-inline-size: min-content;
  border-width: 1px;
  border-style: groove;
  border-color: red;
  border-image: initial;
  padding-left: 20px;
  padding-right: 20px;
}
#smartcontractconversion .btn {
  font-size: 10px;
}

.dropdown-header {
  font-size: 10px;
  font-weight: 200;
}

#throughputInterval {
  margin: 0.5rem 1rem;
}

[id^="simulate_div"] {
  /* margin: 57px 17px 57px 17px; */
  width: 50%;
  border-color: #28a745 !important;
}

#simulate_div1,
#simulate_div11,
#simulate_div12,
#simulate_div2a,
#simulate_div2aa,
#simulate_div2b,
#simulate_div2bb,
#simulate_div2c,
#simulate_div2d,
#simulate_div2e,
#simulate_div2ee,
#simulate_div2gg,
#simulate_div2g,
#simulate_div2f,
#simulate_div2g,
#simulate_div8 {
  width: 100%;
  clear: both;
  height: 900px;
}
ul.navbar-nav > li.active {
  background-color: #4caf50;
}

ul.navbar-nav > li.active > a {
  color: #ffffff;
}

#hybriddeploymentmodemessage {
  font-size: 10px;
  color: seagreen;
  font-weight: bolder;
}

.djs-select-wrapper,
.djs-rename-wrapper {
  display: none !important;
}

#onchainOnlyEstimation,
#offchainModelEstimation,
#SoftwareErrorTracking {
  overflow-y: scroll;
  overflow-x: scroll;
  max-height: 200px;
}

#popupSubgraphContainer .modal-dialog.modal-dialog-centered {
  max-width: 982px;
}

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

th,
td {
  padding: 5px;
}

table#popupSubgraphContenttable {
  width: 100%;
}

table#popupSubgraphContenttable {
  font-size: 7px;
  display: table;
  height: 200px;
  overflow-y: scroll;
  overflow-x: scroll;
  padding-left: 25px;
  width: 100%;
}

div#popupSubgraphContent {
  width: 100%;
  height: 200px;
  overflow-x: scroll;
  overflow-y: scroll;
  padding-left: 25px;
}
.row.designpatterns {
  font-size: 10px;
  font-weight: bold;
}
span#hyperledgerChannelsMap {
  visibility: hidden;
}

button#bpmn-xml,
button#choreo-bpmn-xml {
  /* color: rgba(255, 255, 255, 1); */
  /* box-shadow: 0 5px 15px rgb(145 92 182 / 40%); */
  text-decoration: none;
  color: rgba(255, 255, 255, 0.8);
  background: rgb(145, 92, 182);
  /* padding: 15px 40px; */
  border-radius: 4px;
  font-weight: normal;
  text-transform: uppercase;
  transition: all 0.2s ease-in-out;
}

.readonly-highlight {
  background-color: rgb(131, 129, 129);
  opacity: 0.2;
  position: absolute;
}

.dropdown {
  /* margin-top: 30%; */
  /* transform-style: preserve-3d;
  transform: translate3d(0,0,10px) !important; */
}

.dropdown-menu {
  /* height: auto !important;
   position: relative !important;
   transform: translate3d(0,0,10px) !important; */
}

#stepbysteporstressswitch {
  float: left;
  margin-top: 10 px;
  margin-left: 10 px;
  padding-right: 10 px;
}

svg {
  width: 100%;
}

#stepbystepdoi,
#allinonechannelstepbystepdoi,
#openPopupSubgraphButton {
  visibility: hidden;
}

.nodeshapes {
  position: absolute;
}

tfoot {
  font-size: 12px;
  color: darkred;
}

tr.parallel {
  background-color: rgba(0, 0, 0, 0.05);
  font-size: smaller;
  text-align: center;
}

#mainchainTransactionExplorerTabs,
#offchainTransactionExplorerTabs {
  width: 95%;
  height: 80%;
}

#loading {
  padding-top: 50px;
  color: rgba(171, 171, 171, 0.12);

  -webkit-animation: fadein 0.5s ease-in 7s forwards; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 0.5s; /* Firefox < 16 */
  -ms-animation: fadein 0.5s; /* Internet Explorer */
  -o-animation: fadein 0.5s; /* Opera < 12.1 */
  animation: fadein 0.5s ease-in 7s forwards;

  /* The banner */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(191, 191, 191, 0.92);
  text-align: center;
  cursor: progress;
}

.loader {
  border: 16px solid #cf947d;
  border-radius: 50%;
  border-top: 16px solid #94003a;
  position: absolute;
  left: 50%;
  margin-left: -100px;
  top: 50%;
  margin-top: -100px;
  width: 200px;
  height: 200px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.tab-content {
  font-size: 10px;
}

.h1,
h1 {
  font-size: 2.3rem !important;
}

div {
  resize: both;
}

.modal-backdrop {
  /* bug fix - no overlay */
  display: none;
}

.modal {
  /* bug fix - custom overlay */
  background-color: rgba(10, 10, 10, 0.45);
}
.button {
  width: 155px;
  /* height: 25px; */
  background: green;
  /* padding: 10px; */
  text-align: center;
  border-radius: 5px;
  color: white;
}

#endorserscountlistvalue,
#blocksizelistvalue,
#blocktimelistvalue {
  visibility: hidden;
}

/* Style for the button */
#convertBtn {
  position: fixed;
  bottom: 10px;
  right: 10px;
  padding: 6px 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 6px;
}

#SC-N-s-Estimation,
#SC-N-s-Estimation-footer {
  width: 84%;
}

.disabled-link {
  pointer-events: none; /* This makes the link non-clickable */
  color: grey !important; /* This makes the link appear greyed out */
  cursor: not-allowed; /* This changes the cursor to indicate the link is not clickable */
}

/* step-progressbar */
#step-progressbar {
  position: absolute;
  top: 45px;
  left: 0;
  width: 100%;
  /* height: 200px;
  z-index: 1030; Optional: to ensure it stays on top of other content */
  /* background-color: rgba(255, 255, 255, 0.8); */
}

.stepper-wrapper-buttons {
  text-align: center;
}

.stepper-wrapper {
  font-family: Arial;
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.stepper-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;

  @media (max-width: 768px) {
    font-size: 12px;
  }
}

.stepper-item::before {
  position: absolute;
  content: "";
  border-bottom: 2px solid #ccc;
  width: 100%;
  top: 20px;
  left: -50%;
  z-index: 2;
}

.stepper-item::after {
  position: absolute;
  content: "";
  border-bottom: 2px solid #ccc;
  width: 100%;
  top: 20px;
  left: 50%;
  z-index: 2;
}

.stepper-item .step-counter {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ccc;
  margin-bottom: 6px;
}

.stepper-item.active {
  font-weight: bold;
}

.stepper-item.completed .step-counter {
  background-color: #4bb543;
}

.stepper-item.completed::after {
  position: absolute;
  content: "";
  border-bottom: 2px solid #4bb543;
  width: 100%;
  top: 20px;
  left: 50%;
  z-index: 3;
}

.stepper-item:first-child::before {
  content: none;
}
.stepper-item:last-child::after {
  content: none;
}

/* Base styles for the dialog */
.dialog {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black background */
  z-index: 9999;
}

.dialog-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 400px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.close-btn {
  display: inline-block;
  margin-top: 20px;
  text-decoration: none;
  background-color: #f5f5f5;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
}

/* Display the dialog when its id matches the URL's fragment identifier */
.dialog:target {
  display: block;
}

#step-progressbar span {
  padding: 6px 26px;
}

/* Styling for the dropdown */
#mockEndpointsDropdown {
  position: fixed;
  bottom: 10px;
  left: 10px;
  z-index: 1000;
}

select {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f1f1f1;
  width: 100%;
  max-width: 300px;
}

option {
  padding: 8px;
  font-size: 14px;
}