body{
  font-family: 'Overpass', sans-serif;
  background-color: #fbfbfb;
}

input {
  border-color: #33aaff;
}

strong {
  font-family: 'Roboto Condensed', sans-serif;
}

.hover-icon {
  visibility: hidden;
}

#logo-cloud {
  font-size: 10rem;
  position: relative;
  left: 30.5rem;
  top: 2rem;
}

#login-form {
  margin-top: 3rem;
  padding-bottom: 1rem;
}

#navbar {
  margin-bottom: 1rem;
}

#navbar-logo-cloud {
  font-size: 1.3rem;
  position: relative;
  top: -0.8rem;
  left: 8.3rem;
}

#company-title {
  position: absolute;
  left: 0px;
  top: 1rem;
  width: 100%;
  height: 0;
  text-align: center;
  color: #fff;
}

#account-modal .modal-footer {
  display: block;
}

#search-field {
  width: 100%;
  margin-bottom: 1rem;
}

.form-check {
  padding-top: 0.5rem;
}

#search-result-loading {
  display: flex;
  justify-content: center;
  margin: auto;
}

#search-result-area{
  overflow-y:    auto;
  overflow-x:    hidden;
}

#search-result {
  font-size: 14px;
  font-family: Arial;
  margin-bottom: 0;
  width: 100%;
  background-color: #fff;
}

.suggestion__multi-value {
    background-color: #fff !important;
    border-radius: 2px;
    border: 1px solid #0275d8;
    color: #0275d8;
    font-size: 0.82em;
    line-height: 1.4;
    vertical-align: top;
}

.suggestion__multi-value__label {
    color: #0275d8 !important;
    max-width: 4rem;
}
.suggestion__multi-value__label:hover{
    max-width: fit-content;
}


.sort-icon {
  float: right;
  padding-top: 0.4rem;
}

.text-faded {
  color: #a9a79c;
}

.sort-icon #selected-sort-attr {
  color: rgb(41, 43, 44);
}

.login-input {
  margin-top: 1rem;
}

.fa {
  margin-left:  5px;
  margin-right: 5px;
}

#no-household {
  margin-top: 33%;
}

#household-card {
  overflow-y: auto;
}

.household-properties {
  padding-left: 1rem;
}

#household-person{
  border-bottom-width: 0px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

#person-cards {
  margin-top: 1rem;
}

#household-summary {
  width: 100%;
  max-height: 10rem;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  margin-bottom: 1rem;
}

#household-summary-save-btn {
  border-top-right-radius: 0;
}

#household-summary-view {
  overflow-y: auto;
  margin-bottom: 5px;
  white-space: pre-wrap;
  word-break: break-word;
}

#household-summary:hover .hover-icon {
  visibility: visible;
}

.household-summary-edit {
  height: 100%;
}

#phone-list {
  margin-top:    2rem;
  margin-left:   3rem;
  margin-bottom: 1rem;
}

.phone-list-item {
  padding-right: 0.5rem;
  height: 2.3rem;
}

.phone-icon {
  width: 1rem;
}

.phone-number {
  border: none;
  width: 7rem;
}

.phone-comment {
  width:     16rem !important;
  font-size: small;
}

.phone-comment-blurred:hover .hover-icon{
  visibility: visible;
}

#standard-household-buttons {
  margin-left:   3rem;
  margin-bottom: 1rem;
}

#quick-household-buttons {
  margin-left:   3rem;
  margin-bottom: 2rem;
}

#contact-later-modal .modal-body {
  margin: 0 auto;
}

.comment-input {
  margin-left:   0;
  margin-right:  0;
  margin-bottom: 0;
  border-bottom-left-radius:  0;
  border-bottom-right-radius: 0;
}

#household-comments {
  padding: 0px;
  min-height: 5rem;
  max-height: 15rem;
  overflow-y: auto;
}

#comments-table {
  border: solid;
  border-top: none;
  border-width: 0.5px;
  border-color: #d9d9d9;
}

.time_picker_container {
  margin: auto;
  }


.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

.loading-overlay {
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
    width: 100%;
    height: 100%;
}

.loading-box {
    position: absolute;
    padding-top: 2rem;
    padding-bottom: 2rem;
    margin-right: 20%;
    margin-left: 20%;
    border-radius: 0.4rem;
    background: white;
    left: 0;
    z-index: 2;
    right: 0;
    bottom: 50%;
    transform: translateY(50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}


.loading-animation {
    width: 48px;
    height: 48px;
    display: inline-block;
    position: relative;
    background: #666;
    box-sizing: border-box;
    animation: flipX 1s linear infinite;
    margin-bottom: 0.5rem;
}

@keyframes flipX {
  0% {
    transform: perspective(200px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: perspective(200px) rotateX(-180deg) rotateY(0deg);
  }
  100% {
    transform: perspective(200px) rotateX(-180deg) rotateY(-180deg);
  }
}