﻿/*Contains any common function to modify the tables, which can then be imported and applied per sub style.
	eg, for the email table may want to show lines, so can import the below to apply show-lines() just for item-container.email*/
/*tag colours on people page for diff link types.*/
@keyframes loading-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/*Mixin to make avatar circle, for users, to be added inside a .name-and-avatar-display style*/
body > .outer-container.main > .main-page > .header {
  margin-top: 0;
}
.practice-subscription,
.practice-invite {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 80px;
}
.practice-subscription h2,
.practice-invite h2 {
  font-size: 30px;
}
.practice-subscription .practice-subscription-benefits,
.practice-invite .practice-subscription-benefits {
  text-align: center;
  margin-bottom: 90px;
}
.practice-subscription .practice-subscription-benefits ul,
.practice-invite .practice-subscription-benefits ul {
  list-style: none;
}
.practice-subscription .practice-subscription-benefits ul li,
.practice-invite .practice-subscription-benefits ul li {
  display: inline-block;
  padding-right: 20px;
}
.practice-subscription .practice-subscription-benefits ul li.icon::before,
.practice-invite .practice-subscription-benefits ul li.icon::before {
  font-family: 'Font Awesome 5 Pro';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
  font-size: 22px;
  padding-right: 10px;
  color: #3DB39E;
}
.practice-subscription .practice-subscription-benefits ul li.icon.lock::before,
.practice-invite .practice-subscription-benefits ul li.icon.lock::before {
  content: "\f3c2";
}
.practice-subscription .practice-subscription-benefits ul li.icon.computer::before,
.practice-invite .practice-subscription-benefits ul li.icon.computer::before {
  content: "\f109";
}
.practice-subscription .practice-subscription-benefits ul li.icon.pencil::before,
.practice-invite .practice-subscription-benefits ul li.icon.pencil::before {
  content: "\f618";
}
.practice-subscription .practice-image-benefits,
.practice-invite .practice-image-benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 40px;
  grid-column-gap: 20px;
}
.practice-subscription .practice-image-benefits .practice-image img,
.practice-invite .practice-image-benefits .practice-image img {
  max-width: 100%;
}
.practice-subscription .practice-image-benefits .practice-benefits .sponsor-buying-group-message,
.practice-invite .practice-image-benefits .practice-benefits .sponsor-buying-group-message {
  background-color: orange;
  border-radius: 10px;
  padding: 5px 10px;
  font-weight: 600;
}
.practice-subscription .practice-image-benefits .practice-benefits a.button,
.practice-invite .practice-image-benefits .practice-benefits a.button {
  margin-right: 10px;
}
.practice-subscription .practice-image-benefits .button.accept,
.practice-invite .practice-image-benefits .button.accept {
  margin-right: 10px;
}
.practice-subscription .practice-image-benefits .coming-soon-tag span.tag,
.practice-invite .practice-image-benefits .coming-soon-tag span.tag {
  display: inline-block;
  border: 2px solid;
  transition: box-shadow 0.2s;
  font-weight: 600;
  border-radius: 30px;
  text-align: center;
  cursor: pointer;
  padding: 12px 18px;
  background-color: #4D849D;
  border-color: #4D849D;
  color: #fff;
  background: #4D849D;
  border-radius: 43px;
  font-size: 16px;
  cursor: default;
}
.practice-subscription .practice-image-benefits .coming-soon-tag span.tag:hover,
.practice-invite .practice-image-benefits .coming-soon-tag span.tag:hover,
.practice-subscription .practice-image-benefits .coming-soon-tag span.tag:active,
.practice-invite .practice-image-benefits .coming-soon-tag span.tag:active {
  box-shadow: rgba(77, 132, 157, 0.2) 0px 0px 0px 8px;
}
.practice-subscription .practice-image-benefits .register-user-container,
.practice-invite .practice-image-benefits .register-user-container {
  position: relative;
}
.practice-subscription .practice-image-benefits .register-user-container .field,
.practice-invite .practice-image-benefits .register-user-container .field {
  max-width: 450px;
  margin-bottom: 30px;
}
.practice-subscription .practice-image-benefits .register-user-container .field .entry > input,
.practice-invite .practice-image-benefits .register-user-container .field .entry > input {
  width: 100%;
}
.practice-subscription .practice-image-benefits .register-user-container button.submit,
.practice-invite .practice-image-benefits .register-user-container button.submit {
  max-width: 450px;
  width: 100%;
}
.practice-subscription .practice-sponsor-container,
.practice-invite .practice-sponsor-container {
  text-align: center;
}
.practice-subscription .practice-sponsor-container h4,
.practice-invite .practice-sponsor-container h4 {
  margin-bottom: 30px;
  font-weight: 500;
}
.practice-subscription .practice-sponsor-container .sponsor-images,
.practice-invite .practice-sponsor-container .sponsor-images {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
}
.practice-subscription .practice-sponsor-container .sponsor-images .sponsor-group,
.practice-invite .practice-sponsor-container .sponsor-images .sponsor-group {
  flex: 1 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.practice-subscription .practice-sponsor-container .sponsor-images .sponsor-group img,
.practice-invite .practice-sponsor-container .sponsor-images .sponsor-group img {
  max-width: 60px;
}
.practice-subscription .practice-sponsor-container .sponsor-images .sponsor-group:not(:last-child),
.practice-invite .practice-sponsor-container .sponsor-images .sponsor-group:not(:last-child) {
  border-right: 1px solid rgba(112, 112, 112, 0.3);
}
.practice-record-settings.item-edit {
  max-width: 1200px;
  display: grid;
  grid-template-columns: 300px 1fr;
  column-gap: 20px;
}
.practice-record-settings.item-edit .practice-record-setting-container .field.use-auto-generated-id {
  width: auto;
}
.practice-record-settings.item-edit .practice-record-setting-container .actions > input {
  width: auto;
  display: inline-block;
}
@media only screen and (max-width: 1100px) {
  .practice-subscription .practice-image-benefits .register-user-container .field .entry > input,
  .practice-invite .practice-image-benefits .register-user-container .field .entry > input {
    width: 100%;
  }
}
@media only screen and (max-width: 800px) {
  .practice-subscription .practice-image-benefits,
  .practice-invite .practice-image-benefits {
    grid-template-columns: 1fr;
  }
  .practice-subscription .practice-image-benefits .register-user-container .field .entry > input,
  .practice-invite .practice-image-benefits .register-user-container .field .entry > input {
    width: 100%;
  }
  .practice-subscription .practice-sponsor-container .sponsor-images,
  .practice-invite .practice-sponsor-container .sponsor-images {
    flex-flow: column nowrap;
  }
  .practice-subscription .practice-sponsor-container .sponsor-images .platinum-sponsors,
  .practice-invite .practice-sponsor-container .sponsor-images .platinum-sponsors,
  .practice-subscription .practice-sponsor-container .sponsor-images .gold-sponsors,
  .practice-invite .practice-sponsor-container .sponsor-images .gold-sponsors,
  .practice-subscription .practice-sponsor-container .sponsor-images .silver-sponsors,
  .practice-invite .practice-sponsor-container .sponsor-images .silver-sponsors {
    min-height: 60px;
    border: none;
  }
}