@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&display=swap");

:root {
  --bs-heading-color: #123767;
  --bs-body-color: #333;
  --bs-primary-rgb: 7, 82, 193;
}
.btn {
  --bs-btn-padding-x: 3rem;
  --bs-btn-padding-y: 0.5rem;
}
.btn-primary {
  --bs-btn-bg: #3e6a99;
}
body {
  font-family: "Quicksand", sans-serif;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  min-height: 100vh;
}
*:not(
    .fas,
    .fa-classic,
    .fa-solid,
    .far,
    .fa-regular,
    .fab,
    .fa-brands,
    .mce-ico
  ) {
  font-family: "Quicksand", sans-serif !important;
}

label {
  margin-bottom: -7px;
  margin-left: 0.5em;
  background: white;
  padding: 0 0.5em;
  font-size: 0.8em;
  position: relative;
  z-index: 10;
}
.profile_image {
  border-radius: 50%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border: 3px solid #3e6a99;
  max-width: 150px;
}
.nps_score {
  font-size: 2em;
  color: #3e6a99;
  font-weight: bold;
}
.nps_definition {
  font-size: 0.8em;
}
.socialIconWrapper {
  font-size: 2em;
}
.copied {
  margin-left: 1em;
  font-weight: bold;
}
.profileLink {
  font-weight: bold;
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 0.3em;
  border-radius: 5px;
  word-wrap: break-word;
}
.stars::after {
  content: "\2605\2605\2605\2605\2605";
  background: linear-gradient(
    90deg,
    rgb(217 227 0) 0%,
    rgb(217 227 0) 0%,
    rgba(181, 181, 181, 1) 0%,
    rgba(181, 181, 181, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.4em;
}
.stars[rate="100"]::after {
  background: linear-gradient(
    90deg,
    rgb(217 227 0) 0%,
    rgb(217 227 0) 100%,
    rgba(181, 181, 181, 1) 100%,
    rgba(181, 181, 181, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stars[rate="90"]::after {
  background: linear-gradient(
    90deg,
    rgb(217 227 0) 0%,
    rgb(217 227 0) 90%,
    rgba(181, 181, 181, 1) 90%,
    rgba(181, 181, 181, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stars[rate="80"]::after {
  background: linear-gradient(
    90deg,
    rgb(217 227 0) 0%,
    rgb(217 227 0) 80%,
    rgba(181, 181, 181, 1) 80%,
    rgba(181, 181, 181, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stars[rate="70"]::after {
  background: linear-gradient(
    90deg,
    rgb(217 227 0) 0%,
    rgb(217 227 0) 70%,
    rgba(181, 181, 181, 1) 70%,
    rgba(181, 181, 181, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stars[rate="60"]::after {
  background: linear-gradient(
    90deg,
    rgb(217 227 0) 0%,
    rgb(217 227 0) 60%,
    rgba(181, 181, 181, 1) 60%,
    rgba(181, 181, 181, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stars[rate="50"]::after {
  background: linear-gradient(
    90deg,
    rgb(217 227 0) 0%,
    rgb(217 227 0) 50%,
    rgba(181, 181, 181, 1) 50%,
    rgba(181, 181, 181, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stars[rate="40"]::after {
  background: linear-gradient(
    90deg,
    rgb(217 227 0) 0%,
    rgb(217 227 0) 40%,
    rgba(181, 181, 181, 1) 40%,
    rgba(181, 181, 181, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stars[rate="30"]::after {
  background: linear-gradient(
    90deg,
    rgb(217 227 0) 0%,
    rgb(217 227 0) 30%,
    rgba(181, 181, 181, 1) 30%,
    rgba(181, 181, 181, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stars[rate="20"]::after {
  background: linear-gradient(
    90deg,
    rgb(217 227 0) 0%,
    rgb(217 227 0) 20%,
    rgba(181, 181, 181, 1) 20%,
    rgba(181, 181, 181, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stars[rate="10"]::after {
  background: linear-gradient(
    90deg,
    rgb(217 227 0) 0%,
    rgb(217 227 0) 10%,
    rgba(181, 181, 181, 1) 10%,
    rgba(181, 181, 181, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
header {
  border-bottom: 1px solid #3e6a99;
  margin-bottom: 1em;
  background: white;
}
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: var(--bs-border-width) solid var(--bs-border-color);
}
.select2-container--default
  .select2-selection--single
  .select2-selection__choice,
.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice {
  margin-top: 0;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus
  .select2-selection--multiple {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.select2-container--default .select2-selection--multiple,
.form-control {
  padding: 1rem 0.75rem;
}
.mainContent {
  flex-grow: 1;
  margin-bottom: 3em;
}
.logo {
  max-width: 250px;
  max-height: 35px;
}
.logoName {
  font-size: 4em;
}
img {
  max-width: 100%;
}
#datatable_wrapper,
table {
  max-width: 100%;
  overflow-x: scroll;
}

button.rating_website,
button.rating_info,
button.rating {
  border: none;
  color: white;
  border-radius: 50%;
  margin: 0 auto;
  display: block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 1.5em;
  font-weight: bold;
}
button.rating_website.red,
button.rating_info.red,
button.rating.red {
  background: #ed493e;
}
#footer {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.2);
}
footer ul {
  list-style: none;
}
footer ul .icon {
  margin-right: 1em;
}
button.rating_website.yellow,
button.rating_info.yellow,
button.rating.yellow {
  background: #edcd3e;
}
button.rating_website.green,
button.rating_info.green,
button.rating.green {
  background: #25db80;
}
button.rating_website.selected,
button.rating_info.selected,
button.rating.selected {
  outline: 6px solid #52aba1;
  background: #5fc9bd;
  scale: 1.2;
  font-size: 1.8em;
}
.loginLogo {
  background-color: rgba(255, 255, 255, 0.5);
  position: relative;
  backdrop-filter: blur(10px);
}
.loginLogo img {
  max-height: 150px;
}
.loginLogo,
.loginPanel {
  padding: 4em 2em;
}
.loginPanel {
  background-color: #fff;
}
.withLine {
  display: flex;
  flex-direction: row;
  -webkit-box-align: center;
  align-items: center;
  margin-bottom: 0px;
}
.withLine p {
  display: inline-block;
  width: 140%;
  padding: 0;
  margin: 0;
}
.withLine::before,
.withLine::after {
  width: 100%;
  border-top: thin solid rgba(0, 0, 0, 0.12);
}
.withLine::before,
.withLine::after {
  content: "";
  align-self: center;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
}

.errorMessage {
  border: 1px solid var(--bs-form-invalid-border-color);
  padding: 0.3em 1em;
  margin: 0.5em 0.5em;
  border-radius: 5px;
  background-color: #ffdcdc;
  color: var(--bs-form-invalid-color);
  font-weight: bold;
  font-size: 0.8em;
}
input.error {
  border: 1px solid var(--bs-form-invalid-border-color);
}
.fa-facebook {
  color: #4267b2;
}
.btn .fa-linkedin {
  background-color: #4267b2;
  color: white;
  font-weight: bold;
}
.btn-facebook {
  background-color: #4267b2;
  color: white;
  font-weight: bold;
}
.btn-instagram {
  background: linear-gradient(
    120deg,
    rgb(64, 93, 230),
    rgb(88, 81, 219),
    rgb(131, 58, 180),
    rgb(193, 53, 132),
    rgb(225, 48, 108),
    rgb(253, 29, 29)
  );
  color: white;
  font-weight: bold;
}
.btn-instagram:hover,
.btn-facebook:hover {
  background: #2e4a83;
  color: white;
}
.fa-instagram {
  background: radial-gradient(
    circle at 30% 107%,
    #fdf497 0%,
    #fdf497 5%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.fa-linkedin {
  color: #0072b1;
}

.alert-success .fa-circle-info {
  color: #91ab9f;
  font-size: 2em;
}

@media only screen and (max-width: 766px) {
  .d-only {
    display: none !important;
  }
  .loginWelcome {
    flex-direction: column-reverse;
  }
}