@use "../../common/color.module.scss";

.country-counter {
  width: 78px;
  text-align: center;
  display: inline-block;
  border: 2px solid transparent;
  cursor: pointer;
  border-radius: 8px;

  &:hover {
    background: rgba(#000, 0.1);
  }

  &.selected {
    border: 2px solid color.$color-red;
    background: white !important;
    cursor: default;
  }

  img {
    margin-top: -12px;
    margin-bottom: -12px;
    width: 64px;
  }
}

#myusers-tree {
  li {
    list-style-type: none;
    min-height: 72px;
  }

  button.expand-children {
    border: 0;
    background: none;
    height: 100%;
    border-radius: 4px;

    &:hover {
      background: #efefef;
    }

    i {
      transition: transform 0.2s;
      transform: rotate(-90deg);
    }

    &.opened {
      i {
        transform: rotate(0deg);
      }
    }
  }

  ul {
    height: 0;
    overflow: hidden;
    // transition: height 0.2s; // nem működik, mert az auto és 0 között nem tud lineáris animációt csinálni
    &.opened {
      height: auto;
    }
  }

  &.force-open {
    ul {
      height: auto;
    }
  }
}

.weboffice-user {
  flex-direction: column;
  border-bottom: 2px solid #e2e2e2;
  opacity: 1;

  &.semi-transparent {
    opacity: 0.25;
  }

  & > div {
    margin-right: 20px;
    display: flex;
    flex-direction: row;

    & > div {
      display: flex;
      margin: 10px 0;
    }
  }

  .children-indicator {
    text-align: center;
    width: 30px;
    line-height: 50px;
  }

  .avatar-wrapper {
    margin-right: 20px;
    align-self: center;
  }

  .details {
    color: #818181;
    font-size: 15px;

    .info {
      font-weight: 600;

      .username {
        color: #3e4049;
      }

      .badge {
        padding: 1px 10px;
        color: white;

        &.green {
          background-color: color.$color-green;
        }

        &.gold {
          background-color: color.$color-gold;
        }

        &.red {
          background-color: color.$color-red;
        }
      }

      .badge-suffix {
        display: block;
      }
    }
  }
}

#photoneed {
  margin: 0 0 48px 0;
}

#photoneed table {
  width: 100%;
  margin-bottom: 4px;
}

#photoneed table th {
  font-weight: normal;
  font-size: 13px;
  color: #666;
  text-align: left;
}

#photoneed table td:first-child {
  font-weight: bold;
  font-size: 16px;
  height: 44px;
  text-align: right;
}

#photoneed table tr:not(:first-child) td,
#photoneed table tr:not(:first-child) th {
  border-top: 1px solid #dee2e6;
}

#photoneed table th,
#photoneed table td {
  border-left: 1px solid #dee2e6;
  padding: 10px;
  text-align: center;
}

#photoneed table th:first-child,
#photoneed table td:first-child {
  border-left: 0;
}

#photoneed #levels th:first-child,
#photoneed #levels td:first-child {
  width: 40px;
}

#photoneed table caption {
  caption-side: top;
  text-align: center;
  font-size: 22px;
}

#photoneed table caption + tbody tr td {
  height: 38px;
  font-weight: normal;
}

#photoneed table caption + tbody tr td::before {
  display: none;
}

#photoneed #revenue td {
  font-size: 22px;
}

#photoneed.stripped #revenue {
  border-bottom: none;
}

@include media-breakpoint-down(sm) {
  #photoneed #levels th:nth-child(2) {
    width: 120px;
  }

  #photoneed #levels th:nth-child(3),
  #photoneed #levels th:nth-child(4) {
    width: 200px;
  }

  #photoneed .table-wrapper {
    margin-left: 0;
  }

  .photoneed-network {
    table-layout: fixed;
    width: 400px;
  }
}

.owl-prev {
  display: none;
}

.disabled:not(.btn):not(a.disabled):not(.datepicker-container .disabled) {
  display: none !important;
}

.success-icon {
  overflow: hidden;
  position: relative;
  border-radius: 50%;
  background: radial-gradient(#92ff94, transparent), linear-gradient(-30deg, #2bd262, transparent);

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: -5em;
    z-index: 5;
    filter: blur(20px);
  }
}

.failure-icon {
  overflow: hidden;
  position: relative;
  background: radial-gradient(#ff9292, transparent), linear-gradient(-30deg, #d22b2b, transparent);
  border-radius: 50%;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: -5em;
    z-index: 5;
    filter: blur(20px);
  }
}

.copy__input {
  position: relative;
  width: 100%;

  .input-group {
    position: relative;
  }

  .input-group {
    position: relative;
  }

  .input-group-addon {
    border: none;
  }

  .linkname {
    display: none;
  }

  #copyButton {
    cursor: pointer;
    background: transparent;
    color: #3e8bf3;
    padding: 0;
    font-size: 30px;
    line-height: 1;
    margin: 0 10px;
  }

  .copied {
    opacity: 1;
    position: absolute;
    left: 55px;
    z-index: -1;
  }

  @media (min-width: 768px) {
    .linkname {
      display: block;
      background: #3b3e45;
      color: #fff;
    }
  }
}