.contact-button__hide {
  transition: all .2s;
  top: -10rem !important;
}

.container-contact {
  z-index: 100000000;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.container-contact__close {
  top: 1rem;
  right: 1rem;
}

.calling {
  z-index: 110000000;
  width: 25rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.calling-buttons {
  grid-template-columns: repeat(3, 1fr);
}

.calling-buttons button:not(:nth-child(3n)) {
  margin-right: 5px;
}

.calling .tab-content {
  height: 35rem;
  overflow-y: auto !important;
}

.calling-buttons_button-start {
  width: 3rem;
  height: 3rem;
}

.contact-img {
  width: 3rem;
  height: 3rem;
}

.contact-item:not(:last-child) {
  border-bottom: 1px solid #eee;
}

.contact-item::before {
  content: '';
  width: 10px;
  height: 0;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.1);
  visibility: hidden;
  right: 0;
  bottom: 0;
}

.contact-item:hover::before {
  visibility: visible;
  height: 100%;
  width: 100%;
  transition:
    height 0.2s ease-in,
    width 0.2s ease-out 0.4s;
}

.fs-xs {
  font-size: 10px !important;
}

.current-contact:not(:last-child) {
  border-bottom: 1px solid #eeeeee;
}

.exist-contacts {
  height: 15rem;
}

.contact-list__exist {
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
}

/* These code for while user is calling */

.isCalling {
  position: fixed;
  width: 25rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 200%);
  z-index: 100000000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s linear;
}

.isCalling-header,
.isCalling-footer {
  z-index: inherit;
}

.isCalling-show {
  transform: translate(-50%, -50%);
  opacity: 1;
  visibility: visible;
}

.isCalling-main {
  height: 15rem;
  background-color: rgba(0, 0, 0, 0.3);
}

.isCalling-userInfo__img {
  width: 7rem;
  height: 7rem;
}

.isCalling-minimize {
  transform: translate(-50%, -50%) scale(0.2);
  top: unset;
  left: 80px;
  bottom: 1rem;
  cursor: pointer;
  transition: all .5s;
}

.isCalling-minimize .isCalling-userInfo {
  transform: translateY(-15rem) scale(2);
  box-shadow: 0 10px 1rem rgba(0, 0, 0, 0.2);
  background-color: #ffffff;
  padding: 5px 10px;
  transition: 0.2s ease 0.8s;
}

.isCalling-minimize:hover {
  transform: translate(-50%, -50%) scale(0.21);
}

.tab-tooltip {
  bottom: -1.8rem;
  left: 50%;
  transform: translateX(-50%);
  visibility: hidden;
  opacity: 0;
}

.tab-tooltip::before {
  content: '';
  width: 10px;
  height: 10px;
  background-color: inherit;
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.calling .nav-link:hover .tab-tooltip {
  opacity: 1;
  visibility: visible;
}

.call-number:disabled {
  background-color: White !important;
}

.calling-button__tooltip {
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.3s;
  width: max-content;
  display: none;
}

.calling-button__tooltip-right {
  left: 100%;
}

.calling-button__tooltip-right::before {
  left: -2px;
}

.calling-button__tooltip-left {
  right: 100%;
}

.calling-button__tooltip-left::before {
  right: -2px;
}

.calling-button__tooltip::before {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  content: '';
  background-color: inherit;
  position: absolute;
  width: 8px;
  height: 8px;
  z-index: -1;
}

.calling-button-content:hover .calling-button__tooltip,
.calling-button-links:hover .calling-button__tooltip {
  display: block;
}

.calling-button-links,
.calling-button-content {
  width: max-content;
}

.calling-content__box {
  top: 0;
  left: 0;
  z-index: 90000000;
  visibility: hidden;
  opacity: 0;
  transition: 0.5s linear;
}

.isCalling-show__content-box {
  transform: translate(-100%, -50%);
}

.isCalling-show__content-box .calling-content__box-show {
  transform: translateX(105%);
  opacity: 1;
  visibility: visible;
}

.calling-button__active {
  background-color: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid #ccc !important;
}

.contact-search-input {
  border: 1px solid #cccccc;
  outline: 0;
  width: 60%;
  transition: all 0.2s;
}

.contact-search-input::placeholder {
  color: #cccccc;
}

.contact-search-input:focus {
  width: 80%;
  border: 1px solid #969494 !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.contact-phoneNumber {
  margin-bottom: -5px;
}

.behind-line {
  top: -5rem;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s ease 0.5s;
}

.behind-line__img {
  width: 2.5rem;
  height: 2.5rem;
}

.isCalling-minimize .behind-line {
  top: -25rem;
  left: 50%;
  transform: translateX(-50%) scale(2.25);
}

.isCalling-labels {
  background-color: rgba(0, 0, 0, 0.8) !important;
  color: #fff !important;
  box-shadow: 0 5px 15px rgba(222, 182, 44, 0.3) !important;
}