:root {
    --main-blue: #5050ff;
    --main-blue-light: #d0e2ff;
    --main-blue-dark: #24308a;
    --main-grey: #dddddd;
    --main-grey-light: #efefef;
    --note: #ffdda9;
    --user: #ffd684;
    --user-light: #ffeeee;
    --group: #aaaaff;
    --key: #906000;
    --key-light: #d0a000;
    --vis_public: #008000;
    --msg-ok: #60cc60;
    --msg-ok-bg: #ccffcc;
    --msg-err-bg: #ffcccc;
}

.visibility_public {
    color: var(--vis_public);
    font-size: large;
    font-weight: bold;
}

.visibility_ds {
    color: var(--main-blue);
    font-size: large;
    font-weight: bold;
}

.header_container {
    display: flex;
    justify-content: space-between;
    background-color: var(--main-blue);
    color: white;
}

.btn-container {
    display: flex;
}

.btn {
    cursor: pointer;
    background-color: var(--main-blue);
    color: white;
    /*
    border-width: 1px;
    border-color: black;
    border-style: solid;
    */
    border-radius: 7px;
    padding: 5px;
    margin: 5px;
    width: fit-content;
}

.btn-disabled {
    background-color: #dddddd;
    border-radius: 7px;
    padding: 5px;
    margin: 5px;
    width: fit-content;
}

.btn-blue-dark {
    background-color: var(--main-blue-dark);
}

.btn:hover {
    background-color: #a0a0ff;
    color: white;
}

.btn-red {
    background-color: #ff6060;
}

.btn-green {
    background-color: #60cc60;
}

.btn-cancel {
    background-color: #606060;
}

.submit-msg-ok {
    color: black;
    border: 1px solid #20ff20;
    border-radius: 3px;
    padding: 10px;
    margin: 5px;
    background-color: var(--msg-ok-bg);
}

.submit-msg-err {
    color: black;
    border: 1px solid #ff2020;
    border-radius: 3px;
    padding: 10px;
    margin: 5px;
    background-color: var(--msg-err-bg);
}

.progress-bar-pseudo-indicator {
    border-radius: 7px;
    padding: 5px;
    margin: 5px;
    width: fit-content;
    color: white;
    background-color: var(--main-blue);
    background-image: repeating-linear-gradient(135deg, rgba(0,0,255,1) 0px, rgba(0,0,255,1) 12px, rgba(127,127,255,1) 12px, rgba(127,127,255,1) 24px);
    background-size: 200% 100%;
    animation: AnimationName 3s linear infinite;
}

@keyframes AnimationName {
    0%  {background-position:100% 0%}
    100%{background-position:  0% 0%}
}

.access_key {
    cursor: pointer;
    display: inline-block;
    background-color: var(--key);
    color: white;
    border-radius: 5px;
    padding: 5px;
    margin: 3px;
}

.access_key:hover {
    background-color: var(--key-light);
}

.path-container {
    display: flex;
    align-items: center;
}

.path-container a:hover {
    /*font-weight: 800;*/
    color: red;
}

.path-delim {
    font-size: 1.5em;
    padding: 3px;
}

.error {
    background-color: #ffcccc;
    border-color: #ff0000;
    border-style: solid;
    border-width: 1px;
}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 2px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    position: absolute;
    padding: 10px;
    border: 1px solid #4040ff;
    background-color: var(--main-blue-light);
    z-index: 1000;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

.progress-steps-container {
    width: 100%;
    height: 70px;
}

.progress-steps {
    list-item: none;
}

.progress-steps ul {
    padding: 0;
    counter-reset: step;
}

.progress-steps li {
    list-style-type: none;
    float: left;
    position: relative;
    text-align: center;
    width: 33.33%;
}

.progress-steps li:before {
    content: counter(step);
    counter-increment: step;
    display: block;
    margin: 0 auto 0 auto;
    border: 1px solid black;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    line-height: 30px;
    background-color: white;
}

.progress-steps li.done:before {
    background: var(--main-blue-light);
}

.progress-steps li.active:before {
    background-color: var(--main-blue);
    color: white;
}

.progress-steps li:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: black;
    left: -50%;
    top: 15px;
    z-index: -1;
}

.progress-steps li:first-child:after {
    content: none;
}

label {
    cursor: pointer;
}

/*
ul li {
    line-height: 30px;
}
*/

.uid {
    border: 1px solid black;
    border-radius: 7px;
    padding: 3px;
    cursor: pointer;
}

.uid.other {
    background-color: var(--user);
}

.uid.group {
    background-color: var(--group);
}

.uid.other:hover {
    background-color: var(--user-light);
}

.uid.me.only {
    color: #aaaaaa;
    border-color: #808080;
    cursor: not-allowed;
}

.uid.me {
    color: #fffff;
    border-color: #000000;
}

.uid.me:hover {
    color: #a0a0a0;
    border-color: #000000;
}

select.references {
    padding: 5px;
    border-radius: 10px;
}

select {
    padding: 3px;
}

tr {
    height: 2em;
}

tr td:first-child {
    padding-left: 20px;
}

table {
    /*padding-bottom: 20px;*/
}

li.datastream  {
    padding: 5px;
    margin: 5px;
    border: 1px black solid;
    border-radius: 5px;
}

.message_body {
    margin: 10px;
}

.message_body code {
    font-size: 20px;
}

code.howto {
    display: block;
    border: 1px grey solid;
    padding: 5px;
    background: lightgray;
}

samp {
    display: block;
    border: 1px var(--main-blue) solid;
    padding: 5px;
    background: var(--main-blue-light);
}

.note {
    background: var(--note);
    padding: 5px;
    border: 1px #cba235 solid;
}

.observed_property_container {
    margin: 5px;
    padding: 5px;
    border-radius: 5px;
    border: 1px #bbbbbb solid;
}

.observed_property_unit_isolated {
    margin: 10px;
    padding: 5px;
    border-radius: 5px;
    border: 1px black solid;
}





/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

.btn-dropdown {
  /*
  background-color: #3498DB;
  background-color: var(--main-blue);
  color: white;
  padding: 6px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  */
}

/* Dropdown button on hover & focus */
.btn-dropdown:hover, .btn-dropdown:focus {
  /*
  background-color: #2980B9;
  */
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  top: 40px;
  background-color: #f1f1f1;
  min-width: 240px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content-toleft {
  right: 0px;
}

/* Links inside the dropdown */
.dropdown-content div {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content div:hover {background-color: #ddd;}

.tabs {
  display: flex;
}

.tab {
  display: none;
  border: 1px solid #aaaaaa;
  padding: 8px;
}

.btn-tab {
  /*display: inline-block;*/
  cursor: pointer;
  padding: 10px;
  border-style: solid;
  border-color: #aaaaaa;
  border-top-width: 1px;
  border-left-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 0px;
  align-content: end;
  margin-top: 10px;
  background: #efefef;
}

.btn-tab.selected {
  font-weight: bold;
  margin-top: 0px;
  background: white;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

.test_instance_indicator {
    position: fixed;
    left: 0px;
    width: 100%;
    color: white;
    background-color: #606060;
    background-image: repeating-linear-gradient(135deg, rgba(255,255,0,1) 0px, rgba(255,255,0,1) 12px, rgba(96,96,96,1) 12px, rgba(96,96,96,1) 24px);
    background-size: 200% 100%;
}

.test_instance_indicator div {
    width: fit-content;
    margin: auto;
    color: white;
    background: black;
}

[v-cloak] {
    display: none;
}