/* General class*/
.vert_center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.row {
  display: flex;
}

.msg_error {
  color: red;
}

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

.wide {
  overflow-x: scroll;
}

.text_center {
  text-align: center;
}

/* Buttons */
.btn_green {
  background-color: var(--btn-green);
}

.btn_red {
  background-color: var(--btn-red);
}

.btn_yellow {
  background-color: var(--btn-yellow);
}

.cross_btn {
  border-radius: 50%;
  border: 0px;
  height: 25px;
  width: 25px;
  cursor: pointer;
}
.cross_btn::before {
  content: "X";
  color: white;
}

.delete_button {
  font-size: 1.2em;
  margin: 10px;
  padding: 10px;
}

.btn {
  padding: 12px;
  border-radius: 10%;
}

.button {
  background-color: #eeeeee;
  color: #333333;
  border: 2px solid #333333;
  padding: 12px;
  border-radius: 10%;
}

.success {
  background-color: #b6d7a8;
}

.failure {
  background-color: #f36958;
}

/* Panels */
.main_panel {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
}

.base {
  border-style: solid;
  height: 80vh;
  padding: 10px;
  position: relative;
}

.right_panel {
  width: 50%;
  margin-left: 1%;
  flex-grow: 2;
  overflow-y: scroll;
}

.right_panel_header_row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.left_panel {
  width: 25%;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
}

.left_panel ul {
  list-style-type: disclosure-open;
}

.left_panel ul ul {
  list-style-type: disclosure-closed;
}

.centre_panel {
  width: 18%;
  margin-left: 1%;
  flex-grow: 1;
}

.left_sub_panel {
  border: 2px solid var(--noriker-blue-color);
  border-radius: 5px;
  max-height: 40%;
  width: 99%;
  margin: auto;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.right_sub_panel {
  border: 2px solid var(--noriker-blue-color);
  border-radius: 5px;
  max-height: 30%;
  width: 60%;
  margin-left: 1%;
  margin-top: 3%;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.right_panel span {
  text-align: left;
}

.scroller_panel {
  overflow-y: scroll;
}
.left_sub_panel ul {
  list-style-type: disc;
  text-align: left;
}

.left_sub_panel_scroller {
  overflow-y: scroll;
}

/* Panel Resize bar*/
.resize_bar {
  position: absolute;
  right: -10px;
  background: var(--noriker-bg-lightgrey-color);
  width: 7px;
  top: 0px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 3px;
}
.resize_bar:hover {
  cursor: ew-resize;
}

/* Page title */
.page_title {
  font-size: 2.5em;
  text-align: center;
}
.page_title a,
.page_title a:link,
.page_title a:visited {
  color: var(--noriker-blue-color);
}

.subtitle {
  padding: 5px;
  text-align: center;
}

/* navbar */
.navbar {
  background-color: var(--noriker-blue-color);
  position: absolute;
  top: 0;
  width: 100%;
  height: var(--navbar-height);
  display: flex;
  justify-content: space-around;
}
.navbar .page_title a {
  color: white;
}
.navbar_panel button {
  font-size: 1.2em;
  background-color: white;
}

.navbar_dropdown {
  font-size: 1.2em;
  border-radius: 5px;
  background-color: white;
  padding: 5px;
}

.content {
  margin-top: var(--navbar-height);
}

/* Form layout */
.general_form {
  padding: 15px;
  margin: 20px;
  border: 2px solid var(--noriker-bg-grey-color);
}

.general_form table {
  width: 100%;
  text-align: left;
  border-spacing: 0px;
  border-collapse: collapse;
  font-size: 1.1em;
}

.general_form table td,
.general_form table th {
  padding: 7px;
  border: 2px solid var(--noriker-bg-grey-color);
}

.general_form caption {
  font-size: 1.2em;
}

.general_form input,
.general_form select {
  margin: 10px auto;
  font-size: 1.1em;
}

.general_form input[type="text"],
.general_form input[type="number"],
.general_form select,
.general_form textarea {
  /* Input fields has 8px border by default */
  min-width: 392px;
}

.general_form select {
  min-width: 400px;
}

.general_form button {
  font-size: 1.1em;
  padding: 10px 15px;
}

.general_form input[type="submit"] {
  padding: 10px 15px;
  border-radius: 5px;
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* Messages box */
ul.messages {
  margin: 0.5em 0;
  padding: 0;
}

ul.messages li {
  list-style-type: none;
  padding: 1em;
  text-align: center;
}

.edit_signal_type_title {
  color: #4269a3;
}

.submit_signal_type {
  transition: 0.2s ease;
  border: none;
  outline: none;
  background-color: #4269a3;
  color: white;
  padding: 0.5%;
  border-radius: 4px;
  cursor: pointer;
}

.submit_signal_type:hover {
  transition: 0.1s ease;
  opacity: 0.75;
}

.back_btn {
  background: rgb(160, 160, 160);
  padding: 0.5%;
  text-align: center;
  color: white;
  border-radius: 4px;
}