lhr/public/css/skin.css

@font-face {
  font-family: 'Euclid';
  src: url('euclid/EuclidCircularA-Regular.woff');
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  font-family: 'Euclid';
  /* background-color: #FAFAFA; */
}
footer {
  margin-top: auto;
}
:root {
  --pry-color: #5AC8FA;
  --pry-dark-color: #08415C;
  --sec-color: #FDE1AF;
}
::-moz-selection { background: var(--pry-color); color: #fff; }
::selection { background: var(--pry-color); color: #fff; }
.logo {
  width: 90%;
}
nav.navbar {
  width: 100%;
  border-bottom: 1px solid #eee;
  background-color: #fff;
  z-index: 100;
  padding: 0;
}
nav .container-fluid{
  height: 60px;
  /* padding: 0 50px; */
}
.navbar-nav {
  margin-left: 240px;
  margin-bottom: 0;
}
.navbar.navBarWeb {
  height: 60px;
  box-shadow: 0px 6px 4px rgba(43, 67, 80, 0.01);
  border-bottom: none;
}
.navbar-nav li{
  display: inline;
  padding-left: 10px;
  font-size: 16px;
  line-height: 20px;
  text-transform: capitalize;
}
#navBarWeb li {
  padding-right: 20px;
  padding-left: 0;
  font-size: 17px;
  font-weight: 400;
}
.navbar-nav li a {
  color: #000000;
  font-weight: 400;
  border-bottom:1px solid rgba(0,0,0,0);
  transition: 0.5s;
}
.navbar-nav li a:hover {
  color: var(--pry-color);
  transition: 0.5s;
}
.nav-item {
  position: relative;
}
.nav-item.active::after {
  content: url('/img/dashboard/active_link.svg');
  position: absolute;
  right: 54%;
  bottom:-8px;
}
.nav-item a {
  color: var(--pry-dark-color);
}
.nav-item a:hover, .nav-item.active a {
  color: var(--pry-color);
}
a:hover {
  text-decoration: none;
}
.search-form {
  display: flex;
  align-items: center;
  width: 100%;
}
.search-field::placeholder {
  color: #8E8E93;
  font-weight: 200;
}
.search-field, .search-field:focus {
  border:none;
  outline: none;
  border-left:1px solid #eee;
  padding: 12px;
  width: 350px;
}
.submit-search {
  height: 42px;
  width: 42px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border:none;
  background-color: var(--pry-color);
}
.submit-search:hover {
  background-color: var(--pry-dark-color);
  transition: 0.4s;
}
.user {
  position: relative;
  height: 40px;
}
.user::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f111";
  font-size: 15px;
  position: absolute;
  bottom:-8px;
  left:45px;
  color:#34C759;
  border-radius: 100%;
}
.flex-row {
  display: flex;
  justify-content: space-between;
}
.flex-inner-row {
  display: flex;
  justify-content: space-between;
}
.flex-inner-row > div {
  width: 50%;
}
.custom-card {
  background-color: #ffffff;
  box-shadow: 0px 100px 80px rgba(76, 97, 110, 0.07), 0px 41.7776px 33.4221px rgba(76, 97, 110, 0.030149), 0px 22.3363px 17.869px rgba(76, 97, 110, 0.0134937), 0px 12.5216px 10.0172px rgba(76, 97, 110, 0.00523753), 0px 6.6501px 5.32008px rgba(76, 97, 110, 0.00118705);
  padding: 30px;
  position: relative;
}
.custom-card.overflow {
  overflow: auto;
}
[moe] {
  display: block;
}
.table-wrap {
  padding: 0 !important;
}
.table-wrap table {
  table-layout: fixed;
}
.custom-card th {
  color: #8E8E93;
  border:none;
  vertical-align: inherit !important;
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
}
.custom-card td {
  font-weight: 500;
  font-size: 14px;
  line-height: 19px;
}
.custom-card h4 {
  font-weight: 500;
  font-size: 34px;
  line-height: 41px;
  letter-spacing: 0.374px;
}
.flex-stats {
  display: flex;
  align-items: center;
}
.flex-stats div {
  margin-left: 12px;
}
.flex-stats h4 {
  font-weight: 600;
  font-size: 44px;
  line-height: 41px;
  letter-spacing: 0.35px;
}
.text-purple {
  color: #5856D6;
}
.text-blue{
  color: var(--pry-color);
}
.text-green{
  color: #34C759;
}
.text-red{
  color: #FF3B30;
}
.text-orange{
  color: #FF9F0A;
}
.hidden, .mobile, .tab, .sm-screen, .tab-search {
  display: none;
}

.btn-pry {
  background-color: var(--pry-dark-color);
  color: #fff;
  padding: 7px 30px;
}
.btn-pry:hover {
  background-color: var(--pry-color);
  color: #fff;
}
.pry-sm {
  padding: 7px 20px;
}
.flex-links {
  display: flex;
  justify-content: space-between;
}
.flex-links a {
  width: 100%;
  color: #000000;
  display: flex;
  align-items: center;
  position: relative;
  padding: 27px;
}
.flex-links a:not(:last-child) {
  margin-right: 20px;
}
.flex-links a:not(:first-child) {
  margin-left: 20px;
}
.flex-links a::before {
  margin-right: 10px;
}
.flex-links .onboarded::before {
  content: url('/img/dashboard/onboarded.svg');
}
.flex-links .pending::before {
  content: url('/img/dashboard/pending.svg');
}
.flex-links .ineligible::before {
  content: url('/img/dashboard/ineligible.svg');
}
.flex-links .onboarded.active::before {
  content: url('/img/dashboard/onboarded-active.svg');
}
.flex-links .pending.active::before {
  content: url('/img/dashboard/pending-active.svg');
}
.flex-links .ineligible.active::before {
  content: url('/img/dashboard/ineligible-active.svg');
}
.flex-links .onboarded.active {
  background-color: #34C759;
}
.flex-links .pending.active {
  background-color: #FF9F0A;
}
.flex-links .ineligible.active {
  background-color: #FF3B30;
}
.flex-links a.active {
  filter: drop-shadow(0px 100px 80px rgba(190, 190, 190, 0.07)), drop-shadow(0px 41.7776px 33.4221px rgba(190, 190, 190, 0.0503198)), drop-shadow(0px 22.3363px 17.869px rgba(190, 190, 190, 0.0417275)), drop-shadow(0px 12.5216px 10.0172px rgba(190, 190, 190, 0.035)), drop-shadow(0px 6.6501px 5.32008px rgba(190, 190, 190, 0.0282725)), drop-shadow(0px 2.76726px 2.21381px rgba(190, 190, 190, 0.0196802));
}
.flex-links .onboarded h4 {
  color: #34C759;
}
.flex-links .pending h4 {
  color: #FF9F0A;
}
.flex-links .ineligible h4 {
  color: #FF3B30;
}
.flex-links a.active h4, .flex-links a.active {
  color: #fff;
}
.patient-avatar {
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #eee;
  box-shadow: 0px 100px 80px rgba(76, 97, 110, 0.07), 0px 41.7776px 33.4221px rgba(76, 97, 110, 0.030149), 0px 22.3363px 17.869px rgba(76, 97, 110, 0.0134937), 0px 12.5216px 10.0172px rgba(76, 97, 110, 0.00523753), 0px 6.6501px 5.32008px rgba(76, 97, 110, 0.00118705);
  border-radius: 100%;
}
@media screen and (max-width:1024px) {
  .search-field {
    width: 250px;
  }
}
@media screen and (max-width:991px) {
  .navBarWeb, .web, .patient-avatar {
    display: none !important;
  }
  .mobile, .tab {
    display: block;
  }
  .table-wrap table {
    table-layout: auto;
  }
  #navBar {
    position: absolute;
    width: 100%;
    background-color: #ffffff;
    top: 64px;
    right: 0;
    padding: 1px 10px 1px;
    border-top: 1px solid #eee;
  }
  .navbar-nav {
    margin-left: 0;
  }
  .navbar-nav li{
    display: block;
  }
  .nav-item {
    border-bottom: 1px solid #eee;
    padding: 10px 0px;
  }
  .sidebar .nav-item {
    border-bottom: none;
  }
  .nav-links {
    position: absolute;
    right: 60px;
    top:18px;
  }
  .nav-links ul{
    list-style: none;
  }
  .nav-links ul li{
    display: inline-block;
    margin-right: 10px;
  }
  .logo {
    margin-left: 10px;
  }
  .navbar-toggler {
    color: var(--pry-dark-color);
    border:1px solid var(--pry-dark-color);
    background-color: #fff;
    padding: 12px;
    margin-bottom: 0;
    margin-right: 12px;
  }
  .navbar-toggler:hover {
    background-color: var(--pry-color);
    color: #fff;
  }
  nav {
    padding: 0 10px;
  }
  .flex-row {
    display: block;
  }
  .custom-card {
    width: 100%;
    margin-bottom: 40px;
  }
  .tab-search {
    display: block;
    background-color: #ffffff;
    padding: 5px 0;
    padding-right:12px;
  }
  .search-field, .search-field:focus {
    width: 100%;
  }
  .submit-search {
    height: 42px;
    width: 46px;
  }
  .flex-links {
    flex-wrap: wrap;
  }
  .flex-links a {
    width: 48%;
  }
  .flex-links a:not(:last-child), .flex-links a:not(:first-child)  {
    margin:0;
  }
  .flex-links a{
    margin-bottom: 20px !important;
  }
}
@media screen and (max-width:545px) {
  .sm-screen {
    display: block;
    padding: 12px 0;
    margin: 0;
    margin-bottom: -10px;
  }
  .flex-links a {
    width: 32%;
    padding: 14px;
  }
  .flex-links a.active::before, .flex-links a::before {
    content: none !important;
  }
 .tab {
   display: none;
 }
 .flex-inner-row {
   flex-wrap: wrap;
   margin-top: 0 !important;
 }
 .flex-inner-row >div{
   width: 100%;
 }
 .flex-stats h4 {
   font-size: 37px;
 }
 .custom-card {
   padding: 40px 20px;
 }
 .navbar .container-fluid {
   flex-wrap: nowrap;
 }
 .statuses {
   font-size: 16px;
 }
}
@media screen and (max-width:400px) {
  .flex-links a {
    width: 100%;
  }
  .nav-tabs .nav-item {
    width: 100%;
  }

}
@media screen and (max-width:325px) {
  .statuses {
    font-size: 14px;
  }
  .sm-screen {
    display: block;
  }
  .flex-stats img {
    display: none;
  }
 .tab {
   display: none;
 }
}