@import url('https://fonts.googleapis.com/css?family=Blinker');

:root {
  /*
   * U.S. Micro Solutions theme
   * Palette source: new logo mark
   *
   * Primary: deep teal
   * Action/highlight: cyan/teal
   * Support: pale ice blue and white
   */

  --brand-image                    : url('/img/tenants/logos/usms.png');
  --brand-image-height             : 30%;

  /* Core brand colors */
  --brand-color                    : #088f8f; /* rgb(8, 143, 143) - primary deep teal */
  --brand-color-contrast           : #ffffff; /* rgb(255, 255, 255) */

  --brand-color-highlight          : #57bbc0; /* rgb(87, 187, 192) */
  --brand-color-highlight-contrast : #088f8f; /* rgb(8, 143, 143) */

  /* Extended palette */
  /* Legacy variable names retained for application compatibility. */
  --brand-navy                     : #088f8f;
  --brand-navy-dark                : #155a61;
  --brand-blue-dark                : #247f8c;
  --brand-blue                     : #3aa6ad;
  --brand-teal                     : #57bbc0;
  --brand-cyan                     : #68c7c1;
  --brand-green                    : #66ba81;
  --brand-ice                      : #cde8f4;
  --brand-white                    : #ffffff;
  --brand-black                    : #000000;
  --brand-heading                  : #066b6b;
  --brand-ink                      : #0b4f57;
  --brand-gradient-menu            : linear-gradient(135deg, #000000 0%, #022f33 35%, #088f8f 70%, #57bbc0 100%);
  --brand-gradient-card-title      : linear-gradient(135deg, #000000 0%, #03373b 45%, #088f8f 100%);
  --brand-gradient-menu-hover      : linear-gradient(90deg, rgba(87, 187, 192, 0.10) 0%, rgba(87, 187, 192, 0.03) 100%);
  --brand-gradient-menu-active     : linear-gradient(90deg, rgba(87, 187, 192, 0.18) 0%, rgba(87, 187, 192, 0.04) 100%);

  /* Neutral system colors */
  --surface-page                   : #f4f7f8;
  --surface-card                   : #ffffff;
  --surface-card-overlay           : rgba(255, 255, 255, 0.92);
  --surface-table-overlay          : rgba(255, 255, 255, 0.90);
  --surface-table-header-overlay   : rgba(244, 247, 248, 0.94);
  --surface-table-row-hover        : rgba(205, 232, 244, 0.55);
  --surface-table-muted-overlay    : rgba(238, 245, 247, 0.82);
  --surface-muted                  : #eef5f7;
  --border-subtle                  : #d8e3e7;
  --text-primary                   : #0b4f57;
  --text-secondary                 : #4f6675;
  --text-muted                     : #7f909a;
  --text-disabled                  : #c0c4cc;

  /* Interaction colors */
  --focus-ring                     : rgba(87, 187, 192, 0.55);
  --shadow-card                    : 0 1px 4px 0 rgba(21, 90, 97, 0.14), 0 6px 20px 0 rgba(21, 90, 97, 0.12);

  /* Layout */
  --navbar-size                    : "nav container" 1fr / auto 1fr;
  --navbar-layout                  : 1fr;
  --navbar-header-size             : 260px;
  --navbar-items-layout            : 1fr;
  --toggle-button-display          : block;
  --base-page-height               : 100vh;
}

body {
  font-family      : 'Blinker', sans-serif;
  font-size        : 13px;
  color            : var(--text-primary);
  background-color : var(--surface-page);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family : 'Blinker', sans-serif;
  color       : var(--brand-heading);
}

b {
  font-weight : bold;
}

/* Page Style */
.page__wrapper {
  flex-direction : row;
}

.page__container {
  background-color    : var(--surface-page);
  background-image    : url('/img/usms/client-portal/background_3.png');
  background-position : center top;
  background-repeat   : no-repeat;
  background-size     : cover;
}

.page__head {
  min-width        : 200px;
  width            : 15%;
  height           : 100vh;
  align-self       : flex-start;
  position         : sticky;
  top              : 0;
  overflow-x       : hidden;
  overflow-y       : auto;
  background-color : var(--brand-black);
}

.page__head-wrapper {
  height                : 100vh;
  min-height            : 100vh;
  position              : relative;
  color                 : var(--brand-white);
  background-color      : var(--brand-black);
  background            : var(--brand-gradient-menu);
  background-attachment : scroll;
  background-position   : top left;
  background-repeat     : no-repeat;
  background-size       : 100% 100vh;
  box-shadow            : 0 4px 18px rgba(8, 143, 143, 0.35);
}

.page__main {
}

/* Navbar Styles */
.navbar {
  flex-direction : column;
}

.navbar__wrapper {
  flex-direction : column;
  padding        : 0 1em;
  position       : relative;
}

.navbar-item__wrapper {
  width : 100%;
}

.navbar__items {
  flex-direction : column;
  align-items    : stretch;
}

.navbar__home-link {
  width            : 100%;
  max-width        : 100%;
  background-color : var(--brand-black);
  background       : var(--brand-black);
}

.navbar-item__link {
  font-weight : 400;
  font-size   : .9rem;
  color       : var(--brand-navy);
}

.navbar-item__link:hover,
.navbar-item__link:focus {
  color : var(--brand-blue-dark);
}

.page__head .navbar-item__link {
  color       : var(--brand-white);
  text-shadow : 0 1px 2px rgba(0, 0, 0, 0.45);
}

.page__head .navbar-item__link:hover,
.page__head .navbar-item__link:focus {
  color      : var(--brand-white);
  background : var(--brand-gradient-menu-hover);
  box-shadow : inset 3px 0 0 var(--brand-teal);
}

.page__head .navbar-item--active .navbar-item__link,
.page__head .navbar-item__link.is-active,
.page__head .navbar-item__link.router-link-active {
  color       : var(--brand-white);
  background  : var(--brand-gradient-menu-active);
  border-left : 4px solid var(--brand-teal);
}

.page__head .navbar-item__link-icon,
.page__head .navbar-item__link-title {
  color : inherit;
}

.navbar__icons {
  display : none;
}

.navbar-item.navbar--forms {
  display : none;
}

.module__navigation {
  width          : 20%;
  display        : inline-flex;
  flex-direction : column;
  height         : min-content;
  margin-top     : 1rem;
  margin-left    : 1.5rem;
}

.module__navigation .navbar-item.navbar--dashboard,
.module__navigation .navbar-item__link-icon {
  display : none;
}

.module__navigation .navbar-item {
  border-bottom : 1px solid var(--border-subtle);
}

.module__navigation .navbar-item:first-child,
.module__navigation .navbar-item:last-child {
  border-bottom : none;
}

.module__navigation .navbar-item.navbar--view-libraries {
  border-top : none;
}

.module__navigation .navbar-item__link-title {
  color : var(--brand-navy);
}

.module__navigation .navbar-item__link:hover .navbar-item__link-title,
.module__navigation .navbar-item__link:focus .navbar-item__link-title {
  color : var(--brand-blue-dark);
}

/* Cards */
.card {
  padding          : 0;
  background-color : var(--surface-card-overlay);
  box-shadow       : var(--shadow-card);
  border           : 1px solid var(--border-subtle);
}

.card.control__table {
  box-shadow : none;
}

.card__header {
  padding          : .5rem;
  color            : var(--brand-color-contrast);
  background-color : var(--brand-color);
  background       : var(--brand-gradient-card-title);
}

.card__header h1,
.card__header h2,
.card__header h3,
.card__header h4,
.card__header h5,
.card__header h6 {
  color : var(--brand-color-contrast);
}

.card__header .button.button--primary,
.card__header .button.button--secondary {
  background-color : var(--surface-card);
  border-color     : var(--brand-blue-dark);
  font-size        : 0.8rem;
  color            : var(--brand-blue-dark);
}

.card__header .button.button--primary:hover,
.card__header .button.button--secondary:hover {
  background-color : var(--brand-ice);
  border-color     : var(--brand-teal);
  color            : var(--brand-navy);
}

.card__header .button.button--danger {
  font-size : 0.8rem;
}

.card__body,
.card__body .show__body-content {
  padding : .5em;
}

.card.show-view .card {
  padding-left  : 0;
  padding-right : 0;
  box-shadow    : none;
}

.form-add-counts .page-section-list .card .card {
  box-shadow : none;
}

/* Tables */
.el-table,
.el-table__body,
.el-table__footer,
.el-table__header,
.el-table__fixed,
.el-table__fixed-right,
.el-table__fixed-right::before,
.el-table__fixed::before,
.el-table__empty-block,
.el-table__expanded-cell,
.el-table__header-wrapper,
.el-table__body-wrapper,
.el-table__footer-wrapper {
  background-color : transparent;
}

.el-table th,
.el-table tr,
.el-table td,
.el-table__cell {
  background-color : var(--surface-table-overlay);
}

.el-table thead,
.el-table th.el-table__cell,
.el-table__header-wrapper th {
  background-color : var(--surface-table-header-overlay);
  color            : var(--brand-heading);
}

.el-table__body tr.current-row > td,
.el-table__body tr.hover-row > td,
.el-table__body tr:hover > td {
  background-color : var(--surface-table-row-hover);
}

.el-table__body-wrapper {
  overflow-y : auto;
}

.el-table__row.inactive {
  background-color : var(--surface-table-muted-overlay);
  opacity          : 1;
}

.el-table__row.inactive td {
  background-color : var(--surface-table-muted-overlay);
}

/* Dashboard */
#app .dashboard__card-list {
  grid-template-columns : 1fr 1fr;
}

/* Buttons and links */
.button.button--link {
  color : var(--brand-blue-dark);
}

.button.button--link:hover,
.button.button--link:focus {
  color : var(--brand-navy);
}

.button--primary {
  background-color : var(--brand-color);
  border-color     : var(--brand-color);
  color            : var(--brand-color-contrast);
}

.button--primary:focus,
.button--primary:hover {
  background-color : var(--brand-blue-dark);
  border-color     : var(--brand-blue-dark);
  box-shadow       : 0 0 5px var(--focus-ring);
  color            : var(--brand-white);
}

.btn.btn-primary {
  background-color : var(--brand-color);
  border-color     : var(--brand-color);
  color            : var(--brand-color-contrast);
}

.btn.btn-primary:hover,
.btn.btn-primary:focus {
  background-color : var(--brand-blue-dark);
  border-color     : var(--brand-blue-dark);
  box-shadow       : 0 0 5px var(--focus-ring);
  color            : var(--brand-white);
}

.btn.btn-primary:not(:disabled):not(.disabled):active,
.btn.btn-primary:not(:disabled):not(.disabled).active {
  background-color : var(--brand-navy-dark);
  border-color     : var(--brand-navy-dark);
  color            : var(--brand-white);
}

.btn.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn.btn-primary:not(:disabled):not(.disabled).active:focus {
  box-shadow : 0 0 5px var(--focus-ring);
}

.btn.btn-primary.disabled,
.btn.btn-primary:disabled {
  background-color : var(--brand-blue-dark);
  border-color     : var(--brand-blue-dark);
  color            : var(--brand-white);
}

.button--secondary {
  background-color : var(--brand-blue-dark);
  border-color     : var(--brand-blue-dark);
  color            : var(--brand-white);
}

.button--secondary:focus,
.button--secondary:hover {
  background-color : var(--brand-navy-dark);
  border-color     : var(--brand-navy-dark);
  color            : var(--brand-white);
  box-shadow       : 0 0 5px var(--focus-ring);
}

/* Dialogs */
.el-dialog__body .page-section-list .card .card__header {
  color            : var(--brand-color-contrast);
  background-color : var(--brand-color);
  background       : var(--brand-gradient-card-title);
}

.el-dialog__body .card__body,
.el-dialog__body .card__footer {
  padding : 0 1em 1em 1em;
}

.el-dialog__body .page-section-list .card .card__footer .button.button--primary {
  font-size        : 1rem;
  color            : var(--brand-color-contrast);
  background-color : var(--brand-color);
  border-color     : var(--brand-color);
}

.el-dialog__body .page-section-list .card .card__footer .button.button--primary:hover,
.el-dialog__body .page-section-list .card .card__footer .button.button--primary:focus {
  background-color : var(--brand-blue-dark);
  border-color     : var(--brand-blue-dark);
}

.el-dialog__body .page-section-list .card .card .card__header {
  color            : var(--text-secondary);
  background-color : transparent;
  background       : transparent;
}

/* Forms */
.schema-form button[type="submit"] {
  margin-top : 1em;
}

/**
 * Fix for removing ellipsis from multi-choice select.
 */
.control__wrapper-2 .el-select {
  width : 100%;
}

.el-select .el-select__tags .el-tag.el-tag--info .el-select__tags-text {
  max-width : 100%;
}

/**
 * Fix for removing margin between checkbox button items.
 */
.control__wrapper-2 .el-checkbox-group {
  margin-left : 0;
}

.control__wrapper-2 .el-checkbox-group .el-checkbox-button .el-checkbox-button__inner {
  width : 100%;
}

.mobile {
  display : none;
}

.navbar--profile .navbar-item__link-title {
  display : block;
}

/**
 * Client Portal Styles
 */
.client-portal-link {
  display         : flex;
  flex-direction  : column;
  justify-content : center;
  text-align      : center;
  color           : var(--brand-navy);
  font-size       : 1.4em;
}

.client-portal-link-icon {
  max-width        : fit-content;
  align-self       : center;
  background-color : var(--brand-blue-dark);
  padding          : 1em;
  border-radius    : 50px;
  color            : var(--brand-white);
}

.client-portal-block {
  display          : flex;
  flex-direction   : column;
  background-color : var(--brand-color);
  border-radius    : 10px;
  height           : 250px;
  align-items      : center;
  justify-content  : center;
  font-size        : 26px;
  color            : var(--brand-color-contrast);
  max-width        : 300px;
  border           : 1px solid var(--brand-blue-dark);
}

.client-portal-block:hover,
.client-portal-block:focus-within {
  background-color : var(--brand-blue-dark);
  box-shadow       : 0 0 0 3px var(--focus-ring);
}

.customer-news-feed {
  max-height : 98vh;
  overflow   : auto;
  padding    : 1em;
}

.news-item-container {
  display               : grid;
  grid-template-columns : 1fr;
  grid-gap              : 1em;
}

.news-item-block {
  position         : relative;
  padding          : 2em;
  background-color : var(--surface-card);
  min-height       : 150px;
  border           : 1px solid var(--border-subtle);
}

.news-item-title {
  font-weight   : 700;
  font-size     : 1.5em;
  margin-bottom : 1em;
  color         : var(--brand-navy);
}

.news-item-footer {
  position : absolute;
  bottom   : 5px;
  right    : 5px;
}

/* Utility classes */
.right-0 {
  right : 0;
}

.top-0 {
  top : 0;
}

.mt-0p5,
.my-0p5 {
  margin-top : 0.125rem !important;
}

.flex-table .content-disable {
  color          : var(--text-disabled);
  pointer-events : none;
  cursor         : not-allowed;
}

.is-disabled.contact_selection_option {
  display : none;
}

/* Customer Portal */
#app.usms-client-app .page__wrapper {
  flex-direction : column;
}

#app.usms-client-app .page__head {
  width            : 100%;
  min-width        : 0;
  height           : auto;
  align-self       : stretch;
  overflow         : visible;
  background-color : var(--brand-black);
  background       : var(--brand-gradient-menu);
}

#app.usms-client-app .page__head-wrapper {
  height                : auto;
  min-height            : 0;
  color                 : var(--brand-white);
  background            : var(--brand-gradient-menu);
  background-color      : var(--brand-black);
  background-attachment : scroll;
  background-position   : top left;
  background-repeat     : no-repeat;
  background-size       : 100% 100%;
  box-shadow            : none;
}

#app.usms-client-app .page__container {
  background-color : transparent;
  background-image : none;
}

#app.usms-client-app .navbar__wrapper {
  flex-direction : row;
}

#app.usms-client-app .navbar__home-link {
  width            : 20%;
  max-width        : 20%;
  background       : transparent;
  background-color : transparent;
}

#app.usms-client-app .page__head .navbar-item__link {
  color       : var(--brand-white);
  text-shadow : none;
}

#app.usms-client-app .page__head .navbar-item__link:hover,
#app.usms-client-app .page__head .navbar-item__link:focus {
  background : transparent;
  box-shadow : none;
}

#app.usms-client-app .client-portal-link {
  color : var(--brand-ink);
}

#app.usms-client-app .client-portal-link-icon {
  background-color : var(--brand-blue-dark);
  color            : var(--brand-white);
}

#app.usms-client-app .client-portal-block {
  background-color : var(--brand-color);
  background       : var(--brand-gradient-card-title);
  border-color     : var(--brand-blue-dark);
  color            : var(--brand-white);
}

#app.usms-client-app .client-portal-block:hover,
#app.usms-client-app .client-portal-block:focus-within {
  background-color : var(--brand-blue-dark);
  background       : var(--brand-gradient-menu);
}

/* Responsive */
@media (max-width : 900px) {
  #app .navbar__items.navbar__items--desktop {
    display : inherit;
  }

  #app .navbar__items.navbar__items--desktop.toggled,
  #app .navbar__items.navbar__items--mobile {
    display : none;
  }
}