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

:root {
  --orange: #f09b26;
  --orange-darker: #c17916;
  --green: #21d59b;
  --green-darker: #1ab784;
  --transparent: transparent;
  --black: #22292f;
  --white: white;
  --white-50: rgba(255, 255, 255, 0.5);
  --danger: #e74444;
  --success: #21b978;
  --warning: #ffeb3b;
  --info: #03a9f4;
  --primary: #4099de;
  --primary-dark: #297ec0;
  --primary-70: rgba(64, 153, 222, 0.7);
  --primary-50: rgba(64, 153, 222, 0.5);
  --primary-30: rgba(64, 153, 222, 0.3);
  --primary-10: rgba(64, 153, 222, 0.1);
  --logo: #252d37;
  --sidebar-icon: #b3c1d1;
  --20: #f6fbff;
  --30: #f4f7fa;
  --40: #eef1f4;
  --50: #e3e7eb;
  --60: #bacad6;
  --70: #b3b9bf;
  --80: #7c858e;
  --90: #3c4b5f;
  --90-half: rgba(40, 54, 61, 0.5);
  --warning-light: #fff382;
  --warning-dark: #684f1d;
  --success-light: #c6f6d5;
  --success-dark: #38a169;
  --danger-light: #fed7d7;
  --danger-dark: #e53e3e;
  --info-light: #bee3f8;
  --info-dark: #3182ce;
}

.mobile-font-smaller a {
  color: revert;
  text-decoration: revert;
}

h1 {
  color: #3c4b5f;
}
.dashboard-right-arrow {
  right: 0;
  position: absolute;
  top: 50%;
  transform: translate(+60%, -50%);
}

.font-sans {
  font-family: Poppins, system-ui, BlinkMacSystemFont, -apple-system, sans-serif;
}

.bg-orange {
  background-color: var(--orange);
}

.bg-primary {
  background-color: var(--primary);
}

.btn.bg-orange:not([disabled]):not(.btn-disabled):hover {
  background-color: var(--orange-darker);
}

.bg-green {
  background-color: var(--green);
}

.btn.bg-green:not([disabled]):not(.btn-disabled):hover {
  background-color: var(--green-darker);
}

.text-green {
  color: #21d59b;
}

.text-xxs {
  font-size: 0.65rem;
}

.themes #container #logo {
  display: none;
}

form.wufoo #header {
  display: none;
}

.redesigned-theme-2018 .wufoo .info {
  display: none;
}

.font-sans {
  font-family: Poppins, system-ui, BlinkMacSystemFont, -apple-system, sans-serif;
}

.mb-7 {
  margin-bottom: 1.75rem;
}

.min-w-login {
  min-width: 25rem;
}

.font-weight-500 {
  font-weight: 500;
}

.dashboard-right-arrow {
  right: 0;
  position: absolute;
  top: 50%;
  transform: translate(+60%, -50%);
}

.dashboard-right-arrow-two {
  transform: translate(+85%, -50%);
}

.terms-and-conditions-text {
  padding: 1em 4em 4em 4em;
  line-height: 2;
}

button[dusk="update-and-continue-editing-button"] {
  display: none;
}

.table-card {
  padding-left: 0;
  padding-right: 0;
}

.white-space-no-wrap {
  white-space: nowrap;
}

/*
This is for the 'logout' button in the mobile and tablet
view. This is very fragile, but I couldn't find a
better way of targeting the button because the
ID is dynamically generated on each page load
by Nova.
*/
div.z-50.open {
  z-index: 1000;
}

.no-shadow {
  box-shadow: none;
}

table.responsive-table,
table.responsive-table thead,
table.responsive-table tbody,
table.responsive-table th,
table.responsive-table td,
table.responsive-table tr {
  display: block;
}

table.responsive-table thead tr {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.table.responsive-table tbody td {
  border: none;
  border-bottom: 1px solid #eee;
  position: relative;
  padding-left: 0;
  padding-right: 0;
}

table.responsive-table tbody tr td.td-fit {
  width: initial;
}

table.responsive-table td:before {
  white-space: nowrap;
  display: inline-block;
  width: 30%;
  background-color: #f4f8fb;
  color: #808990;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  word-break: break-all;
  padding: 0.75rem 10px 0.75rem 0.5rem;
}

table.responsive-table tr:nth-child(even) div {
  background-color: rgba(247, 247, 247, 0.4);
}

table.responsive-table tr:nth-child(odd) div {
  background-color: white;
}

table.responsive-table td {
  height: initial;
  padding: 0;
  display: flex;
}

table.responsive-table td div {
  width: 70%;
  display: inline-block;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 0.75rem;
}

table.responsive-table tbody tr {
  margin-top: 15px;
  margin-bottom: 15px;
  background-color: white;
  border-radius: 0.5rem;
}

table.responsive-table tbody tr:nth-of-type(1) {
  margin-top: 0;
}

table.responsive-table tbody tr:nth-last-of-type(1) {
  margin-bottom: 0;
}

.w-90-percent {
  width: 90% !important;
}

.btn.btn-default.dashboard-button {
  min-height: 2.25rem;
  height: initial;
}

/* 2xl */
@media (min-width: 1536px) {
  .two-xl-inline-block {
    display: inline-block;
  }
}

@media (max-width: 1200px) {
  .mobile-font-smaller {
    font-size: 0.8rem;
  }

  .mobile-font-small {
    font-size: 0.9rem;
  }

  .tablet-hide {
    display: none;
  }
}

@media (min-width: 600px) {
  .not-mobile-mr-1 {
    margin-right: 1rem;
  }
}
@media (max-width: 1024px) {
  .mobile-px-0 {
    padding-left: 0;
    padding-right: 0;
  }

  .mobile-display-block {
    display: block;
  }

  .mobile-w-100 {
    width: 100vw !important;
  }

  div[dusk$="index-component"] .pl-search,
  div[dusk$="surgical-types-index-component"] .pl-search,
  div[dusk$="general_contacts"] .pl-search {
    width: 40vw;
  }

  div[dusk$="general_contacts"] div[resource-id="settings"] {
    flex-wrap: wrap;
  }

  div[dusk$="general_contacts"] div[resource-id="settings"] div {
    width: 100%;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .card {
    box-shadow: none;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .card h3 {
    padding-top: 0;
    padding-bottom: 0;
  }

  .card .mb-7 {
    margin-bottom: 0.4rem;
  }

  /*
     * All lines below are to stack the tables rows rather than
     * displaying them traditionally.
     */
  table:not(.contacts-table),
  table:not(.contacts-table) thead,
  table:not(.contacts-table) tbody,
  table:not(.contacts-table) th,
  table:not(.contacts-table) td,
  table:not(.contacts-table) tr {
    display: block;
  }

  table:not(.contacts-table) thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  table:not(.contacts-table) tbody tr {
    margin-top: 15px;
    margin-bottom: 15px;
    background-color: white;
    border-radius: 0.5rem;
  }

  table:not(.contacts-table) tbody tr:nth-of-type(1) {
    margin-top: 0;
  }

  table:not(.contacts-table) tbody tr:nth-last-of-type(1) {
    margin-bottom: 0;
  }

  .table:not(.contacts-table) tbody td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 0;
    padding-right: 0;
  }

  table:not(.contacts-table) tbody tr td.w-16,
  table:not(.contacts-table) tbody tr td.w-1\/5,
  table:not(.contacts-table) tbody tr td.td-fit {
    width: initial;
  }

  table:not(.contacts-table) td:before {
    white-space: nowrap;
    display: inline-block;
    width: 30%;
    background-color: #f4f8fb;
    color: #808990;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    word-break: break-all;
    padding: 0.2rem 10px 0.2rem 0.5rem;
  }

  table:not(.contacts-table) tr:nth-child(even) div {
    background-color: rgba(247, 247, 247, 0.4);
  }

  table:not(.contacts-table) tr:nth-child(odd) div {
    background-color: white;
  }

  .device-request-background {
    width: 100%;
  }

  table:not(.contacts-table) td {
    height: initial;
    padding: 0;
    display: flex;
  }

  table:not(.contacts-table) td div {
    width: 70%;
    display: inline-block;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    padding-left: 0.75rem;
  }

  .resource-name-surgical-types td:nth-of-type(1),
  .resource-name-users td:nth-of-type(1),
  .resource-name-permissions td:nth-of-type(1),
  .resource-name-roles td:nth-of-type(1),
  .resource-name-use-cases td:nth-of-type(1) {
    display: none;
  }

  .resource-name-permissions td:nth-of-type(7),
  .resource-name-roles td:nth-of-type(7) {
    display: none;
  }

  .resource-name-surgical-types td,
  .resource-name-users td,
  .resource-name-permissions td,
  .resource-name-roles td,
  .resource-name-permissions td div,
  .resource-name-roles td div,
  .resource-name-use-cases td {
    text-align: left;
  }

  /*
     * Users table labels
     */

  .resource-name-users td:nth-of-type(2):before {
    content: "ID";
  }

  .resource-name-users td:nth-of-type(3):before {
    content: "Name";
  }

  .resource-name-users td:nth-of-type(4):before {
    content: "Email";
  }

  .resource-name-users td:nth-of-type(5):before {
    content: "Action";
  }

  /*
     * Surgical types table labels */

  .resource-name-surgical-types td:nth-of-type(2):before {
    content: "Name";
  }

  .resource-name-surgical-types td:nth-of-type(3):before {
    content: "Action";
  }

  /*
     * Use cases table labels */

  .resource-name-use-cases td:nth-of-type(2):before {
    content: "Name";
  }

  .resource-name-use-cases td:nth-of-type(3):before {
    content: "Surgical Types";
  }

  .resource-name-use-cases td:nth-of-type(4):before {
    content: "Action";
  }

  /*
     * Roles table labels */

  .resource-name-roles td:nth-of-type(1):before {
    content: "";
  }

  .resource-name-roles td:nth-of-type(2):before {
    content: "ID";
  }

  .resource-name-roles td:nth-of-type(3):before {
    content: "Name";
  }

  .resource-name-roles td:nth-of-type(4):before {
    content: "Guard Name";
  }

  .resource-name-roles td:nth-of-type(5):before {
    content: "Created At";
  }

  .resource-name-roles td:nth-of-type(6):before {
    content: "Updated At";
  }

  .resource-name-roles td:nth-of-type(7):before {
    content: "Permissions";
  }

  .resource-name-roles td:nth-of-type(8):before {
    content: "Action";
  }

  /*
     * Permissions table labels */

  .resource-name-permissions td:nth-of-type(2):before {
    content: "ID";
  }

  .resource-name-permissions td:nth-of-type(3):before {
    content: "Name";
  }

  .resource-name-permissions td:nth-of-type(4):before {
    content: "Guard Name";
  }

  .resource-name-permissions td:nth-of-type(5):before {
    content: "Created At";
  }

  .resource-name-permissions td:nth-of-type(6):before {
    content: "Updated At";
  }

  .resource-name-permissions td:nth-of-type(7):before {
    content: "Roles";
  }

  .resource-name-permissions td:nth-of-type(8):before {
    content: "Action";
  }
}

@media (max-width: 992px) {
  .content .flex-wrap > .w-1\/3 {
    width: 33.33333%;
  }

  .btn {
    margin-top: 0.75rem;
  }

  .top-card .btn {
    margin-top: 0;
  }

  .content .flex-wrap > .w-1\/3 {
    width: 100%;
  }

  .content .flex-wrap > .w-1\/3 .dashboard-right-arrow {
    display: none;
  }

  .content .flex-wrap > .w-1\/3 .dashboard-down-arrow {
    display: block;
  }

  .dashboard-card-container {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 1.5rem;
  }
}

@media (max-width: 600px) {
  .mobile-w-full {
    width: 100%;
  }

  .mobile50left{
    width:45%;
    margin-right:4%;
  }
  
  .mobile50right{
    width:51%;
  }

  .mobile-mb-1 {
    margin-bottom: 1rem;
  }

  .mobile-text-center {
    text-align: center;
  }

  .mobile-flex-1 {
    flex: 1 1 0;
  }

  table.table:not(.contacts-table) tbody td {
    flex-wrap: wrap;
    height: initial;
  }

  table:not(.contacts-table) td > div {
    width: 100%;
    display: block;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
  }

  table:not(.contacts-table) td div span {
    max-width: min-content;
    white-space: initial;
  }

  table:not(.contacts-table) td:before {
    display: block;
    width: 100%;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
  }

  .card.top-card h1 {
    font-size: 1.1rem;
  }

  .card.top-card p {
    font-size: 0.8rem;
  }
}

/* fix for the sidebar to be a differnet color */

.sidebar-menu .relative:nth-child(6) {
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  padding-top: 20px;
  padding-bottom: 20px;
}

/* .lg\:block {
    background-image: linear-gradient(0deg, #7e8ea1 0%, #3c4655 100%);
    background-attachment: fixed;
    background-color: red;
    min-height:100vh;
} */

#nova > div:nth-child(2) > div:nth-child(1) {
  background-image: linear-gradient(0deg, #7e8ea1 0%, #3c4655 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* header.bg-white > div:nth-child(1){
    background-color: red;
} */
header > div.hidden {
  background: #336699;
  width: 15rem !important;
  height: 60px;
}

.px-2.border-b.border-gray-200.dark\:border-gray-700 {
  background: #336699;
}
/* #nova > div:nth-child(2) > div:nth-child(1) a, #nova > div:nth-child(2) > div:nth-child(1) span {
    color: white;
}

body {
    background-image: linear-gradient(0deg, #7e8ea1 0%, #3c4655 100%);
    background-attachment: fixed;
}

#nova > div:nth-child(2) > div:nth-child(2) {
    background-color: #EEF1F4;
} */

/* #nova > div:nth-child(2) > div:nth-child(1) {
    background-image: linear-gradient(0deg, #7e8ea1 0%, #3c4655 100%);
    background-attachment: fixed;
    height: 100vh;
} */

/* #nova > div:nth-child(2) > div:nth-child(2) {
    background-color: #f1f5f9;
}

#nova > div:nth-child(2) {
    background-image: linear-gradient(0deg, #7e8ea1 0%, #3c4655 100%);
    background-attachment: fixed;
}
 */

header #nova-ui-dropdown-button-5:before {
  content: "Logout";
}

header #nova-ui-dropdown-button-5 span {
  display: none;
}

#nova-ui-dropdown-menu-6 a {
  display: none;
}

header .relative button,
header #nova-ui-dropdown-button-3 {
  display: none;
}

.min-h-40 {
  min-height: auto;
}

.lg\:block {
  background: red;
  min-height: 100vh;
}

.lg\:block * {
  color: #fff;
}

header .items-center .hidden {
  display: block;
}

.mt-auto span,
.mt-auto button {
  display: none;
}

.sidebar-menu .relative :not(.override-hover):hover {
  background-color: unset; /* Your desired hover background color */
  opacity: 0.9;
}

.sidebar-menu .relative a span.flex-1.flex.items-center.w-full.px-3.text-sm {
  position: relative;
}
.sidebar-menu
  .relative
  a
  span.flex-1.flex.items-center.w-full.px-3.text-sm::before {
  content: "•";
  position: absolute;
  left: 0;
}

.inline-block.text-red-500.text-xs.font-bold.mt-1.text-center.uppercase {
  display: none;
}