.page-segment {
  background-color: var(--form-color);
  border-radius: var(--big-rounded);

  }

 
  .page-content {
    border-width: 18px;
    border-style: solid;
    border-color: var(--form-color);
    background-color: var(--form-color);

  }

  .tabbed
  {
    border-top-left-radius: 0rem !important;
    border-radius: var(--big-rounded);
  }

  .page-element {
    border-width: 10px;
    border-radius: var(--tiny-rounded);
    border-style: solid;
    border-color: white;
    background-color: white;
  }

  .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }

  .padding-zone{
    background-color: var(--background);
    height: 20px;
  }

  .padding-zone-inverse{
    background-color: var(--form-color);
    height: 20px;
  }
  
  .app-button
  {
    background-color: var(--button) !important;
    border: none;
    color: var(--main-text) !important;
    text-align: center;
    text-decoration: none;
    display: inline-block;
  }

  .add-button
  {
    background-color: var(--add-button) !important;
    border: none;
    color: white !important;
    text-align: center;
    text-decoration: none;
    display: inline-block;
  }

  .remove-button{
    background-color: var(--remove-button) !important;
    border: none;
    color: white !important;
    text-align: center;
    text-decoration: none;
    display: inline-block;
  }

  .scroller
  {
    overflow-y: auto;
  }

  .app-input-group {
    background-color: var(--add-button) !important;
    color: white !important;
  }

  .filter-button
  {
    background-color: var(--button) !important;
    border: none;
    color: var(--main-text) !important;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    z-index: 20;
  }

  .multi-select-accordion-button
  {
    --bs-accordion-btn-padding-y: 0.6rem;
    font-size: 16px !important;
    --bs-accordion-active-color: #212529;
    --bs-accordion-active-bg: #f8fafc;
  }

  .multi-select-collapse
  {
    border: solid 1px ;
    border-color:var(--box-outlines);
    border-radius: var(--tiny-rounded);
  }

  .multi-select-search
  {
    border-radius:0px;
    border-top-left-radius: var(--tiny-rounded);
    border-top-right-radius: var(--tiny-rounded);
    border: solid 0px var(--box-outlines);
    border-bottom-width: 1px;
  }

  .bg
  {
    background-color: var(--background);
    min-height: 120vh;
  }

/*  FILTER BARS */
.right-align {
    float:right;
}

.filter-bar {
    background-color: var(--local-navigation);
    color: white;
    height: 100%;
    padding: 20px;
    min-height: 100vh;
    right:0px;
    top: 0px;
    float:right
  }

  .filter-bar-under-layer
  {
    background-color: var(--local-navigation);
    width:100%; 
    height:100%; 
    position:fixed; 
    z-index: -1
  }



.sub-title{
  position:relative;
  top: -10px;
}

.input-title
{
  font-weight: bold;
  font-size: var(--title-size);
  margin-bottom: 4px !important;
}

.required
{
  color: var(--greyed-text);
  font-size: var(--reminder-size);
  font-weight: lighter;
}

.button-icon
{
  height: 24px; 
  margin-left: 6px;
}

.highlighted-field
{
  border: 1px solid black !important;
}



.inline-button
{
  border: none;
  background: none;
}



.right-aligned
{
  display: flex !important; 
  justify-content: flex-end;
  margin-left:auto;
  margin-right: 0px;
}

.tabbed-remove-button
{
    border:1px black solid;
    border-top-right-radius: 0rem !important;
    border-top-left-radius: 0rem !important;
    position: relative;
    width: 100%;
    top: -2px;
    height: 35px;

    background-color:var(--remove-button) !important;
    color: white;
}

.flat-bottom
{
  border-bottom-right-radius: 0rem;
  border-bottom-left-radius: 0rem;

}

.component-border-box
{
    border: 1px solid var( --box-outlines);
    padding:15px;
}

.back-container{
  width: 100%;
  height: 60px;
}