body{
  height:100vh;
}


ul{
  margin:0;
  margin-left:20px;
}

li{
  list-style-type: none;
  cursor: pointer;
}

fieldset > label{
  padding-left: 5px;
}

.hidden{
  display:none;
}

.project-container{
  margin-top:30px;
}

#projects-list{
  padding-top: 35px;
}
  
#projects-tab{
  position: absolute;
  margin-top:0px;
  margin-left:20px;
  transition-duration: 200ms;
}

#selected-project-title{
  position: absolute;
  margin-top:0px;
  margin-left:50px;
}

#templates{
  padding-top: 35px;
  padding-left: 55px;
}

#instance-template{
  padding-top: 15px;
  padding-left: 60px;
}

#cluster-template{
  padding-top: 15px;
  padding-left: 60px;
}

.tabs{
  cursor: pointer;
}

.container-flex.project-selected #projects-tab{
  margin-top:30px;
  position: absolute;
  transition-duration: 200ms;
  margin-left:-39px!important;
  padding:5px;
  background-color:grey;
  color:white;
  rotate: -90deg;
}

.container-flex.project-selected.template-selected #templates-tab{
  margin-top:102px;
  position: absolute;
  transition-duration: 200ms;
  margin-left:-105px!important;
  padding:5px;
  background-color:grey;
  color:white;
  rotate: -90deg;
}

.container-flex.project-selected #projects-list{
  color:rgb(0,0,0,0);
  transition-property: color;
  transition-duration: 0.2s;
}
.selected-project{
  position: absolute;
  transition-property: color;
  transition-duration: 0.2s;
  color:rgb(0,0,0,1);
  transition-property: font-weight;
  transition:top 2s linear;
  top:55px;
  font-weight: bold;
}

.moving-item {
    position: absolute;
    transition: all 0.2s ease-in-out;
}

#instances-card{
  position: fixed;
  bottom: 0;
  width:100%;
}

#instances{
  min-height: 150px;
}
#instances > div{
  overflow-x: auto;
  flex-wrap: nowrap;
}

#clusters{
  min-height: 150px;
}
#clusters > div{
  overflow-x: auto;
  flex-wrap: nowrap;
}

#instances-number{
  display:contents;
}
#cluster-number{
  display:contents;
}

#instance-card-header{
  max-width:125px;
  user-select: none;
}
#cluster-card-header{
  max-width:125px;
  user-select: none;
  border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
  /*display:none;*/
}

#tabs-list{
  display:flex;
}

.spinner-stopped{
  opacity:1;
  animation: none;
}

.clickable{
	cursor: pointer;
}

.cluster-title{
  margin-left:-20px;
  font-weight: bold;
}

#helpButton{
  margin-left: auto;
  padding: 10px;
  font-size: 30px;
	cursor: pointer;
  float:right;
}

.hide{
  display:none
}

#loginButton{
  float:right;
  margin:6px;
}

#loggedIn{
  float:right;
  margin:2px;
}

#welcome-message{
  font-size: 20px;
  padding-top: 50px;
  padding-left: 50px;
}

.modal-body   p{
  margin-bottom: 0.5rem;
}

.invalid-feedback{
  display:none!important;
}

.was-validated .display-if-validated{
  display:block!important;
}


.was-validated > .accordion-button.accordion-invalid{
  border-color: var(--bs-form-invalid-border-color);
  padding-left: calc(1.5em + .75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: left calc(.375em + .1875rem) center;
  background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

.service-name{
  appearance: none;
  background-color: var(--bs-body-bg);
  background-image: var(--bs-accordion-btn-icon);
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 16px 12px;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}


footer{
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
}