/* You can add global styles to this file, and also import other style files */

/*
 * Hides DOM elements if they have the attr.ir-hidden attribute set to 'true'.
 * *ngIf destroys DOM elements when it's set to false, so attr.ir-hidden is a
 * good alertnative for when we only want elements to be hidden.
 */
*[ir-hidden='true'] {
  display: none !important;
}

body {
  font-family: 'Karla', sans-serif;
}

h1 {
  color: #202124;
  font-size: 22px;
  font-weight: bold;
}

h2 {
  color: #515151;
  font-size: 16px;
  font-weight: normal;
}

h3 {
  color: #202124;
  font-family: 'Karla', sans-serif;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.25px;
  line-height: 20px;
}

p {
  color: #515151;
  font-size: 12px;
}

li {
  color: #515151;
  font-size: 12px;
}

.ds-card {
  border: 1px solid #dadce0;
  border-radius: 4px;
  margin: 48px 0 32px;
  padding: 22px 32px 32px;
}

.ds-terms-header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  margin-top: -14px;
}

.ds-terms-header > h1 {
  padding-right: 10px;
}


.ds-terms-header > h3 {
  padding-right: 10px;
}


.ds-button {
  align-items: center;
  cursor: pointer;
  border-radius: 7px;
  display: flex;
  height: 40px;
  outline: none;
  padding: 7px 10px;

  @media (max-width: 400px) {
    height: 34px;
  }
}


.ds-button > span {
  font-family: 'Raleway', sans-serif;
  font-weight: bold;
  text-decoration: none;
}

.ds-button > .icon {
  margin-right: 5px;
}

.ds-button--back {
  padding-left: 0;
}

.ds-button--save-edit {
  margin-left: 24px;
}

@media (max-width: 600px) {
  .ds-button--bigquery {
    display: none !important;
  }

  .ds-button--save-bottom {
    width: 100%;
  }

  .ds-button--view > icon {
    margin-right: 0;
  }

  .ds-button--view > span {
    display: none;
  }

  .ds-button--new-report {
    justify-content: flex-end;
  }

  .ds-button--new-report > span {
    display: none;
  }

  .ds-button--save-edit {
    margin-left: 12px;
  }
}

@media (min-width: 401px) {
  .ds-button--save-edit::after {
    content: " Report";
    white-space: pre;
  }
}


.ds-button--no-border {
  background-color: white;
  border: none;
  color: #106cde;
}

.ds-button--primary {
  background-color: #106cde;
  border: none;
  color: white;
}

.ds-button--primary:hover {
  background-color: #4285f4;
}

.ds-button--secondary {
  background-color: white;
  border: 1px solid #106cde;
  color: #106cde;
}

.ds-button--secondary:hover {
  background-color: #f6f9ff;
}

.ds-main-content {
  margin: 0 auto;
  max-width: 1440px;
  padding: 80px 60px 50px;
}


.ds-main-content--report {
  margin: 0 auto;
  max-width: 1440px;
  padding: 40px 60px;
}

@media (max-width: 600px) {
  .ds-main-content {
    padding: 80px 16px 20px;
  }

  .ds-main-content--report {
    padding: 40px 16px;
  }
}

.ds-bq-icon {
  height: 20px;
  width: 20px;
}

.ds-save-icon,
.ds-edit-icon {
  height: 15px;
  width: 15px;
  margin-right: 5px;
}

.ds-main-content--report {
  padding: 40px 60px;
}

@media (max-width: 600px) {
  .ds-main-content--report {
    padding: 40px 16px;
  }
}