@use "sass:math";
@use '../../common/color.module.scss';

@import '~bootstrap/scss/bootstrap';
@import '~bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css';
@import '~animate.css/animate.min.css'; // ez csak azért kell, mert a slider-eknél a szöveg fadeInUp-pal jön be
@import '~smart-app-banner/dist/smart-app-banner.css';
@import './lib/bootstrap_switch.scss';
@import './lib/ion-range-slider.scss';
@import './lib/owl.carousel.scss';
@import './components/modal.scss';
@import './components/pagination.scss';
@import './theme.scss';
@import './custom.scss';
@import './admin.scss';
@import './banner-and-avatar.scss';
@import './dev.scss';
@import './demo.scss';
@import './navigation.scss';
@import './weboffice.scss';
@import './blog.scss';
@import './messages.scss';

// ----------------------------- gányolás -----------------------------------

.show-inactive-users-switch {
  margin-left: 20px;
  user-select: none;
  cursor: pointer;
  font-size: 0.9em;

  input[type='checkbox'] {
    display: inline-block;
    margin-right: 6px;
  }
}

.custommodal {
  .content {
    padding-bottom: 40px;
  }

  .footer {
    position: relative;
  }
}

.can-only-select-active-users {
  width: 100%;
  background: #faf1c7;
  color: red;
  position: absolute;
  top: -40px;
  left: 0;
  line-height: 40px;
  height: 40px;
  padding: 0 30px;
  text-align: center;
}

.social-link {
  color: color.$color-red;
}

.slim.uploadimage {
  background: url('../../img/dragdrop.png') no-repeat center center #eee;
  background-size: 80px 80px;
}

#welcome {
  .absoluteline {
    position: absolute;
    top: 33.3%;
    width: 100%;
    height: 131px;
    left: 0;
    color: #fefefe;
  }

  .a-text {
    width: 50%;
    margin: auto;
    line-height: 1;
    margin-top: 13px;
    font-size: 1rem;
  }

  .a-text div:nth-child(2) {
    font-size: 3em;
    margin-top: 4px;
    margin-bottom: 13px;
  }

  img {
    width: 100%;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  #welcome {
    .a-text {
      font-size: 0.75rem;
    }
  }
}

@media (max-width: 992px) {
  #welcome {
    .a-text {
      font-size: 0.5rem;
    }
  }
}

@media (max-width: 767px) {
  #welcome {
    .a-text {
      font-size: 0.3rem;
    }
  }
}

@media (max-width: 575px) {
  #welcome {
    .a-text {
      font-size: 0.6rem;
    }
  }
}

.uploads-today {
  text-align: center;
  line-height: 3em;
  border-bottom: 1px solid #e0e0e0;
}

#registration-success {
  $size: 50vmin;
  $unit: math.div($size, 476);

  width: 476 * $unit;
  text-align: center;
  background: url('../../img/email-confirm.png') no-repeat center top;
  background-size: 273 * $unit auto;
  padding-top: 273 * $unit;
  margin: 54 * $unit auto 107 * $unit auto;

  h2 {
    line-height: 86 * $unit;
    font-size: 28 * $unit;
  }

  p {
    font-size: 20 * $unit;
    line-height: 1.3em;
  }
}

@media only screen and (max-width: 700px) {
  #registration-success {
    $size: 70vmin;
    $unit: math.div($size, 476);

    width: 476 * $unit;
    text-align: center;
    background: url('../../img/email-confirm.png') no-repeat center top;
    background-size: 273 * $unit auto;
    padding-top: 273 * $unit;
    margin: 54 * $unit auto 107 * $unit auto;

    h2 {
      line-height: 86 * $unit;
      font-size: 28 * $unit;
    }

    p {
      font-size: 20 * $unit;
      line-height: 1.3em;
    }
  }
}

.smartbanner-android .smartbanner-button-text {
  background: color.$color-red !important;
}

.smartbanner-android .smartbanner-button-text:active,
.smartbanner-android .smartbanner-button-text:hover {
  background: color.$color-red !important;
}

.password-field {
  position: relative;
  font-size: 15px;

  i.fa-eye,
  i.fa-eye-slash {
    color: #8a8a8a;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 12px;

    &:hover {
      color: #3a3a3a;
    }
  }

  i.fa-eye:hover {
    right: 11px;
  }
}