@import "./pallete.scss";
@import "./size-variables";
@import "./fonts.scss";
@import "../../node_modules/@angular/material/prebuilt-themes/purple-green.css";
@import "../../node_modules/bootstrap/dist/css/bootstrap.css";

html {
  width: 100vw;
  overflow-x: hidden;
  height: 100%;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.app-wrapper {
  position: relative;
  min-height: 100%;
}

.content {
  width: 1180px;
  padding-bottom: $footer-height;
  margin: 0 auto;
  @media screen and (min-width: 320px) and (max-width: 768px) {
    width: 100%;
    padding: 20px;
    padding-bottom: $footer-height;
  }
  @media screen and (min-width: 769px) and (max-width: 1200px) {
    width: 1200px;
  }
}

.btn-icon {
  border-radius: 50%;
  border: 0;
  line-height: 0;
  height: 36px;
  width: 36px;
  background: #E0E0E0;
  color: #333333;
  cursor: pointer;
}

.mat-tab-header-pagination-controls-enabled .mat-tab-header-pagination {
  display: none !important;
}

.social-icon {
  width: 24px;
  height: 24px;
  position: relative;
  margin-right: 8px;
  background-size: cover;
  display: inline-block;
  top: 5px;
  background-color: #231a5d;
  -webkit-mask-size: 24px;
}

.failed {
  color: $accents-red !important;
}

.social-icon__facebook {
  -webkit-mask-image: url(../assets/img/social-icons/Fb.svg);
}

.social-icon__instagram {
  -webkit-mask-image: url(../assets/img/social-icons/Instagram.svg);
}

.social-icon__telegram {
  -webkit-mask-image: url(../assets/img/social-icons/telegram.svg);
}

.social-icon__bitcointalk {
  -webkit-mask-image: url(../assets/img/social-icons/Bitcointalk.svg);
}

.social-icon__youtube {
  -webkit-mask-image: url(../assets/img/social-icons/Youtube.svg);
}

.social-icon__github {
  -webkit-mask-image: url(../assets/img/social-icons/Github.svg);
}

.social-icon__linkedin {
  -webkit-mask-image: url(../assets/img/social-icons/Linkedin.svg);
}

.social-icon__medium {
  -webkit-mask-image: url(../assets/img/social-icons/Medium.svg);
}

.social-icon__reddit {
  -webkit-mask-image: url(../assets/img/social-icons/Reddit.svg);
}

.social-icon__twitter {
  -webkit-mask-image: url(../assets/img/social-icons/Twitter.svg);
}

body {
  background: #eeedf5;
  font-family: $font-pt;
}

.body-visible {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.mat-progress-spinner circle, .mat-spinner circle {
  stroke: #ffd038;
}

.mat-progress-spinner.spinner-primary circle, .mat-spinner.spinner-primary circle {
  stroke: #231a5d !important;
}

.mat-toolbar {
  background: transparent !important;
  font-family: 'Roboto-Regular', sans-serif;
}

.mat-button-wrapper {
  font-family: 'Roboto-Regular-Medium', sans-serif;
}

.mat-checkbox {
  font-family: 'Roboto-Regular', sans-serif;
}

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

div.mat-checkbox-frame {
  border-color: rgb(70, 137, 232);
  border-radius: 0.25rem;
  border-width: 1px;
}

.nav-tabs {
  border-bottom: inherit;
}

.nav-tabs .nav-link {
  background: rgb(72, 138, 232);
  opacity: 1 !important;
  color: white;
  text-align: center;
  padding-bottom: 24px;
  padding-top: 18px;
  font-weight: 500;
}

.nav-tabs .nav-link {
  border: none;
}

.nav-item {
  position: relative;
  width: 120px;
  min-height: 1px;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 25%;
  max-width: 22%;
  padding-right: 15px;
  padding-left: 15px;
}

.nav-tabs .nav-item:first-child {
  margin-left: 60px;
  padding-left: 0px;
}

.nav-tabs .nav-item {
  margin-bottom: -0.5em;
}

.tab-content {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: #fff;
  border-radius: 0.25rem;
}

.mat-tab-label-container {
  margin-top: 20px;
}

.mat-tab-label {
  min-width: 0px !important;
  color: white;
  opacity: 1 !important;
  font-size: 30px;
  font-weight: 100;
}

.report-tab .mat-tab-label {
  padding: 0 !important;
}

.mat-ink-bar {
  background-color: rgb(246, 150, 1) !important;
}

.white-card .mat-ink-bar {
  background-color: rgb(72, 138, 232) !important;
}

.white-card .nav-tabs .nav-link.active {
  color: rgb(32, 32, 32);
  background: white;
}

.nav-pills {
  font-size: 1.2em;
}

.nav-pills .nav-link.active {
  color: rgb(246, 150, 1);
  background-color: transparent;
}

.nav-pills .nav-link {
  color: #000;
  padding: 0;
}

.nav-pills .nav-item {
  padding-left: 0;
  padding-right: 50px;
  width: initial;
}

.mat-tab-label-active {
  color: rgb(246, 150, 1);
}

.white-card .mat-tab-label {
  color: rgb(72, 138, 232);
}

.white-card .mat-tab-label-active, .choose, .scoring-rating > span {
  color: rgb(180, 180, 180) !important;
}

.card {
  margin: 1em 0.8em;
  -webkit-box-shadow: 0px 3px 14px 2px rgba(219, 219, 219, 1);
  -moz-box-shadow: 0px 3px 14px 2px rgba(219, 219, 219, 1);
  box-shadow: 0px 3px 14px 2px rgba(219, 219, 219, 1);
}

.card_no_shdw {
  margin: 30px;
}

.sm-btn-primary {
  background: rgb(246, 150, 1);
}

.btn-link:hover {
  text-decoration: none;
}

.btn {
  cursor: pointer;
}

.btn.btn-primary {
  background-color: rgb(72, 138, 232);
  border-color: rgb(72, 138, 232);
}

.sm-btn-primary > .mat-button-wrapper {
  font-weight: 500;
  opacity: 1 !important;
  color: rgb(32, 32, 32);
  text-align: center;
  padding-bottom: 20px;
  padding-top: 20px;
  display: block;
  line-height: initial;
}

.mat-tab-label:focus {
  background-color: inherit !important;
}

.mat-tab-body-wrapper {
  margin-top: 50px;
}

div.mat-tab-body-content {
  overflow: hidden;
}

.high_rate {
  color: #38a347 !important;
}

.medium_rate {
  color: #e8a765 !important;
}

.low_rate {
  color: #d24a43 !important;
}

.progress_rate {
  color: rgb(180, 180, 180) !important;
}

.mat-checkbox-frame {
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

.mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
  background-color: rgb(72, 138, 232);
}

.mat-checkbox:not(.mat-checkbox-disabled).mat-accent .mat-checkbox-ripple .mat-ripple-element {
  background-color: rgba(72, 138, 232, .26);
}

.statuses {
  display: inline-block;
  margin-right: 2em;
  margin-bottom: 1em;
}

.sw-content {
  -webkit-box-flex: inherit;
  -ms-flex: inherit;
  flex: inherit;
  margin: 0.2em 0px
}

.sw-content > div.row:last-child {
  margin-bottom: 20px;
}

.sm-title {
  margin-bottom: 10px;
  padding: 0;
}

.btn-link, .sm-title {
  color: #a4a2b0 !important;
}

.form-control, .ui-inputtext, .ui-dropdown {
  border-color: rgb(70, 137, 232) !important;
}

.form-control, .ui-inputtext {
  padding: 0.6em 1.2em 0.6em 1.2em !important;
}

.sm-title h1 {
  font-family: 'AvenirNextCyr-Bold', sans-serif;
  letter-spacing: 8px;
  font-size: 40px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.sv-default-btn {
  padding: 1em 0em;
  color: white !important;
  background-color: rgb(70, 137, 232);
  border-color: rgb(70, 137, 232);
}

a {
  color: rgb(72, 138, 232);
}

.sw-card {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: #fff;
  border-radius: 0.25rem;
  padding: 0;
}

.tab-content {
  background-color: transparent;
}

.white-card {
  margin-top: -4em;
  background-color: white;
}

.gray-color-text {
  color: #a4a2b0;
}

.primary-color-text {
  color: #5d49f2;
}

.login-button .mat-button-wrapper {
  padding-bottom: 10px;
  padding-top: 10px;
}

.mat-dialog-container {
  color: rgb(32, 32, 32);
  background: #fff;
  box-shadow: none !important;
}

div.white-card .mat-tab-label-container {
  margin-left: 0.8em;
}

a, button, span {
  color: #a4a2bo;
  font-size: 14px;
}

.header-wrapper, .mat-menu-panel, .sm-header {
  background: #211f33 !important;
}

.hidden {
  display: none !important;
}

.title {
  font-family: $font-pt-narrow;
  font-weight: bold;
  font-size: 32px;
  color: $background-dark;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
}

.control-label {
  height: 20px;
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  color: #000000;
  label {
    cursor: pointer;
  }
}

.settings-block {
  background: #fff;
  padding: 16px 40px 32px;
  margin-bottom: 16px;
}

.settings-block_last {
  margin-bottom: 0;
}

.settings-title {
  font-family: Roboto-Bold;
  margin: 0;
  font-size: 24px;
  text-align: left;
  background: #fff;
  padding: 16px 40px;
  margin-bottom: 3px;
  color: #a4a2b0;
}

.tooltip-title {
  padding: 0;
  margin: 0;
  font-family: Roboto-Bold;
}

.tooltip-text {
  font-size: 12px !important;
  padding: 0;
  margin: 0;
}

.material-icons {
  font-family: Material Icons;
  font-weight: normal;
  font-style: normal;
  font-size: 24px; /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'),
  local('MaterialIcons-Regular'),
  url("../assets/fonts/MaterialIcons-Regular.woff2") format('woff2'),
  url("../assets/fonts/MaterialIcons-Images.woff2") format('woff2'),
  url("../assets/fonts/MaterialIcons-Regular.woff") format('woff'),
  url("../assets/fonts/MaterialIcons-Regular.ttf") format('truetype');
}

@font-face {
  font-family: "AvenirNextCyr-Bold";
  src: url("../assets/fonts/AvenirNextCyr-Bold.otf") format("opentype");
}

@font-face {
  font-family: "AvenirNextCyr-BoldItalic";
  src: url("../assets/fonts/AvenirNextCyr-BoldItalic.otf") format("opentype");
}

@font-face {
  font-family: "AvenirNextCyr-Demi";
  src: url("../assets/fonts/AvenirNextCyr-Demi.otf") format("opentype");
}

@font-face {
  font-family: "AvenirNextCyr-DemiItalic";
  src: url("../assets/fonts/AvenirNextCyr-DemiItalic.otf") format("opentype");
}

@font-face {
  font-family: "AvenirNextCyr-Heavy";
  src: url("../assets/fonts/AvenirNextCyr-Heavy.otf") format("opentype");
}

@font-face {
  font-family: "AvenirNextCyr-HeavyItalic";
  src: url("../assets/fonts/AvenirNextCyr-HeavyItalic.otf") format("opentype");
}

@font-face {
  font-family: "AvenirNextCyr-Italic";
  src: url("../assets/fonts/AvenirNextCyr-Italic.otf") format("opentype");
}

@font-face {
  font-family: "AvenirNextCyr-Light";
  src: url("../assets/fonts/AvenirNextCyr-Light.otf") format("opentype");
}

@font-face {
  font-family: "AvenirNextCyr-LightItalic";
  src: url("../assets/fonts/AvenirNextCyr-LightItalic.otf") format("opentype");
}

@font-face {
  font-family: "AvenirNextCyr-Medium";
  src: url("../assets/fonts/AvenirNextCyr-Medium.otf") format("opentype");
}

@font-face {
  font-family: "AvenirNextCyr-MediumItalic";
  src: url("../assets/fonts/AvenirNextCyr-MediumItalic.otf") format("opentype");
}

@font-face {
  font-family: "AvenirNextCyr";
  src: url("../assets/fonts/AvenirNextCyr-Regular.otf") format("opentype");
}

@font-face {
  font-family: "AvenirNextCyr-Thin";
  src: url("../assets/fonts/AvenirNextCyr-Thin.otf") format("opentype");
}

@font-face {
  font-family: "AvenirNextCyr-ThinItalic";
  src: url("../assets/fonts/AvenirNextCyr-ThinItalic.otf") format("opentype");
}

@font-face {
  font-family: "AvenirNextCyr-UltraLight";
  src: url("../assets/fonts/AvenirNextCyr-UltraLightIt.otf") format("opentype");
}

@font-face {
  font-family: "Roboto-Bold";
  src: url("../assets/fonts/Roboto/Roboto-Bold.ttf") format("opentype");
}

@font-face {
  font-family: "Roboto-Condensed";
  src: url("../assets/fonts/Roboto/Roboto-Condensed.ttf") format("opentype");
}

@font-face {
  font-family: "Roboto-Medium";
  src: url("../assets/fonts/Roboto/Roboto-Medium.ttf") format("opentype");
}

@font-face {
  font-family: "Roboto-Regular";
  src: url("../assets/fonts/Roboto/Roboto-Regular.ttf") format("opentype");
}

@font-face {
  font-family: "Roboto-Thin";
  src: url("../assets/fonts/Roboto/Roboto-Thin.ttf") format("opentype");
}

.notification {
  padding-right: 60px !important;
}
