/*
    tri-pane class is applied to the bootstrap columns within the primary content bootstrap row
    we set tri-pane height relative to screen height
    we set each pane height to 100% and margins to 0
*/
/*
.container-screen {
    height: 100%;
}
*/
.controls-top {
    height: auto;
}
.tri-pane {
    height: 80vh;
    display: flex; flex-direction: column; /* used with flex-shrink and flex-grow by children to fill flixibly-fill 100% of container. */
    padding: 5px;
}
.tri-pane-left {
  border: black 1px solid;
/*
  border-left: black 1px solid;
  border-top: black 1px solid;
  border-bottom: black 1px solid;
*/
  padding-left: 10px;
}
.tri-pane-center {
  border-top: black 1px solid;
  /*
  border: black 1px solid;
  */
}
.tri-pane-right {
  border: black 1px solid;
/*
  border-right: black 1px solid;
  border-top: black 1px solid;
  border-bottom: black 1px solid;
*/
  padding-right: 10px;
}
@media (max-width: 767px) { /* 767 pixels is a guess of the sizing breakpoint managed by bootstrap col-4. */
    .tri-pane-left {
      height: 300px;
      border-right: black 1px solid;
    }
    .tri-pane-right {
      border-left: black 1px solid;
    }
}

.controls-bot {
    height: auto;
}
.map-signup {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

hr {
    margin: 0px;
}

.header-title-info {
    display: inline-block;
    align-content: center;;
}

.search-input {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

button:disabled {
    opacity: 0.5;
    cursor: default;
    background-color: light grey;
  }
  
/*
.tri-pane-details-button {
    color: white;
    background-color: green;
    width: 90%;
}
*/

.adopt-button {
    background-color: white;
    color: #006054;
    border: #006054 1px solid;
}
.unadopt-button {
    color: white;
    background-color: #c44100;
}
#signup_explore_filters {
    width: 100%;
}

/* profile icon row/col */
.icon-right {
    margin-left: auto; /* Push the icon to the right */
}

/* If the icon is inside a button or other element that has default padding/margin */
.icon-right button { /* Or .icon-right a, etc. */
    padding-right: 0; /* Remove default padding from the right */
}

.show-info {
    cursor: pointer;
}

.info-profile-container {
  display: contents;
  align-items: normal;
  padding-top: 1px;
}

.info-icon-container {
  display: block;
  cursor: pointer;
}

.main-header-icon {
  height: 58px !important;
  width: 58px !important;
  padding-bottom: 0px !important;
}