@import url('https://fonts.googleapis.com/css?family=Lato');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');

:root {
  --brand-image-height             : 30%;
  --brand-color                    : #ffffff;
  --brand-color-contrast           : #6d7079;
  --brand-color-highlight          : #ffffff;
  --brand-color-highlight-contrast : #10aaa0;
  --navbar-size                    : "nav" 1fr "container" auto;
  --navbar-layout                  : .2fr 1fr;
  --navbar-header-size             : 100%;
  --navbar-items-layout            : repeat(10, 1fr);
  --toggle-button-display          : none;
}

body {
  font-family : 'Open Sans', sans-serif;
  color       : rgb(112, 112, 112);
  font-size   : 14px;
}

body,
span,
p,
a,
.btn,
input,
select,
option,
.form-control {
  font-size : 15px;
}

h1, h2, h3, h4, h5 {
  font-family : 'Lato', sans-serif;
}

.management-customer__form .el-checkbox-group {
  display               : grid;
  grid-template-columns : 1fr 1fr 1fr 1fr 1fr;
}

.management-customer__form .management-customer__custom-fields .schema-form > span {
  display               : grid;
  grid-template-columns : 1fr 1fr 1fr 1fr;
  gap                   : 1em;
}

#app .navbar-item__link-icon.fa {
  font-size : 1.2rem;
}

#app .navbar-item__link {
  grid-template-columns : 1fr;
  font-size             : 0.9em;
  color                 : var(--brand-color-contrast);
  gap                   : 0.5em;
  grid-gap              : 0.5em;
  font-weight           : lighter;
  opacity               : 1;
  transition            : 0.2s ease-in-out;
}

#app .navbar-item__link:hover {
  color : #1ec6bc;
}

#app .searchbar__account__control-item {
  display               : grid;
  grid-template-columns : 1fr 2fr;
  gap                   : 0.5em;
  align-items           : center;
  text-decoration       : none;
  color                 : #000000;
  padding               : 1em 1.5em;
}

.page__container {
  overflow-x : hidden;
  height     : calc(100vh - 135px);
}

.page__head-wrapper {
  background : #ffffff;
}

.page__main {
  background : #fbfbfb;
}

.page__foot {
  background-color: #f5f7fa;
}

.infobar-item,
.navbar,
.card,
.searchbar {
  box-shadow : none;
}

.searchbar {
  margin-bottom : 1em;
  border        : 1px solid #e3e3e3;
}

h2.employee__text--normal span,
.card__header h3, .card__header h2, .card__header h1 {
  line-height : 2.5rem;
  font-size   : 24px;
  font-weight : 400;
}

.el-tabs__content .el-tab-pane .card .card__header,
.el-dialog__body .page-section-list .card .card__header,
.employee-note__wrapper .page-section-list .card .card__header,
.card__header {
  padding          : 0 1em;
  min-height       : 3.6em;
  color            : rgb(84, 129, 230);
  background-color : #ffffff;
  border-bottom    : 1px solid #e3e3e3;
}

#app .card-list {
  grid-auto-rows : min-content;
}

#app .el-dialog__body .card,
.card {
  padding    : 0;
  gap        : 0;
  grid-gap   : 0;
  border     : 1px solid #ced4da;
  box-shadow : none;
  align-self : start;
}

.card__body {
  padding : 1em;
}

.page__container {
  overflow   : inherit;
  overflow-x : hidden;
}

.page__main {
  min-height : initial;
}

/*.page__head{  background: #0086e3; !* Old browsers *!  background: -moz-linear-gradient(left, #0086e3 0%, #00cdc1 33%, #ffbd1f 66%, #ed007b 100%); !* FF3.6-15 *!  background: -webkit-linear-gradient(left, #0086e3 0%,#00cdc1 33%,#ffbd1f 66%,#ed007b 100%); !* Chrome10-25,Safari5.1-6 *!  background: linear-gradient(to right, #0086e3 0%,#00cdc1 33%,#ffbd1f 66%,#ed007b 100%); !* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ *!  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0086e3', endColorstr='#ed007b',GradientType=1 ); !* IE6-9 *!  }*/
.page__head {
  background : #ffffff;
}

.page__head-wrapper {
  margin-bottom : 0.3em;
  overflow      : hidden;
}

.navbar__home-link {
  padding-bottom : 0.2em;
}

.navbar {
  padding : 0 1.25em;
}

.navbar-item {
  display : flex;
}

.navbar__icons {
  display : inline-flex;
}

form#logout {
  display : flex;
}

#app .card .card__header h3 {
  margin-top    : 0;
  margin-bottom : 0;
}

.columns__2 {
  grid-template-columns : 1fr 1fr;
  grid-auto-flow        : unset;
  display               : grid;
  gap                   : 1em;
}

.columns__3 {
  grid-template-columns : 1fr 1fr 1fr;
  grid-auto-flow        : unset;
  display               : grid;
  gap                   : 1em;
}

.columns__4 {
  grid-template-columns : 1fr 1fr 1fr 1fr;
  grid-auto-flow        : unset;
  display               : grid;
  gap                   : 1em;
}

.columns__5 {
  grid-template-columns : 1fr 1fr 1fr 1fr 1fr;
  grid-auto-flow        : unset;
  display               : grid;
  gap                   : 1em;
}

.columns__1_3 {
  grid-template-columns : 0.33fr 0.67fr;
  grid-auto-flow        : unset;
  display               : grid;
  gap                   : 1em;
}

.columns__2_3 {
  grid-template-columns : 0.67fr 0.33fr;
  grid-auto-flow        : unset;
  display               : grid;
  gap                   : 1em;
}

#app {
  background-color : #09142f;
}

.menu__alert {
  background-color : #09142f;
  overflow         : hidden;
  height           : 1.9em;
}

.menu__alert p {
  line-height   : 1.9em;
  margin-bottom : 0;
}

#app .button,
.el-dialog__body .button,
#app .cell .el-dialog__body .button {
  border-radius  : 0;
  border         : none;
  text-transform : uppercase;
  font-weight    : 600;
  line-height    : 2em;
  padding-left   : 1em;
  padding-right  : 1em;
}

#app .cell .button {
  line-height   : 1.5em;
  padding-left  : 0.75em;
  padding-right : 0.75em;
}

#app .cell .button--danger {
  height : 31.5px;
}

.button--primary {
  background-color       : rgb(152, 203, 74);
  -webkit-font-smoothing : antialiased;
}

.button--primary:focus,
.button--primary:hover {
  color            : #ffffff;
  background-color : rgb(84, 129, 230);
  box-shadow       : none;
}

.button--secondary {
  background-color : rgb(247, 109, 57);
  border           : none;
  color            : #ffffff;
}

.button.button--secondary:focus,
.button.button--secondary:hover {
  color            : #ffffff;
  background-color : rgb(255, 121, 47);
  box-shadow       : none;
}

.card-list.show-view {
  gap                   : 1.5em;
  grid-template-columns : 1fr 3fr;
}

.card-list.show-view .card-list {
  grid-template-rows : 0fr 0fr;
}

#app .event__heading {
  min-height : initial;
}

.control__wrapper-2 .el-select,
.control__wrapper-2 .el-input-number,
.control__wrapper-2 .el-date-editor.el-input,
.control__wrapper-2 .el-date-editor.el-input__inner {
  width : 100%;
}

.employee-details__heading-controls {
  float : right;
}

.control__wrapper {
  margin-bottom : 0.5em;
}

.heading__controls .button {
  margin-top    : 2px;
  margin-bottom : 2px;
}

.employee-details__notes {
  display          : block;
  padding          : 1em;
  max-height       : 385px;
  min-width        : 400px;
  overflow-y       : scroll;
  background-color : #f6f6f6;
  border           : 1px solid #e9e9e9;
  border-radius    : 6px;
}

.employee-details__notes p {
  display     : block;
  line-height : 1em;
  word-break  : break-word;
}

.note__actions { /*display:none;  */
  display               : grid;
  grid-template-columns : 1fr 1fr;
  align-items           : center;
  opacity               : 0;
}

.note__content {
  margin-bottom : 0;
}

.note__content p:last-child {
  margin-bottom : 0;
}

.employee-note__wrapper {
  padding-top      : 1em;
  padding-bottom   : 1em;
  border           : 1px solid #f6f6f6;
  display          : flex;
  -webkit-box-pack : justify;
  justify-content  : space-between;
  border-radius    : 3px;
  transition       : 0.1s ease-in-out;
}

.employee-note__wrapper:hover {
  border  : 1px solid #e9e9e9;
  padding : 1em;
}

.employee-note__wrapper:hover .note__actions {
  opacity : 1;
}

.employee-note__wrapper:hover, .employee-note__wrapper:active {
}

.file__container {
  grid-template-columns : repeat(3, 1fr);
  display               : grid;
  gap                   : 1em;
}

#app .file__wrapper {
  display       : block;
  border        : 1px solid #eaeaea;
  border-radius : 4px;
  width         : auto;
  height        : auto;
  max-width     : inherit;
  max-height    : inherit;
}

.file__heading {
  background-color : #f9f9f9;
  padding-left     : 1em;
}

.file__heading p {
  line-height : 3em;
}

.file__body {
  padding-top : 1em;
}

#app .file__icon {
  font-size : 50px;
  color     : #efefef;
}

.file__container p.file__single-text {
  margin-bottom : 0;
}

.card.login__container {
  width        : 30%;
  margin-left  : auto;
  margin-right : auto;
}

#app .el-table {
}

#app .el-tabs--border-card > .el-tabs__content {
  padding : 0;
}

input[type=file].control-file__control {
  border : none;
}

.model-show__text {
  line-height : 2em;
}

.show__body-content {
}

.textarea__large textarea {
  height : 150px;
}

.project-employee__wrapper {
}

.project-employee__profile {
  position   : relative;
  display    : inline-block;
  width      : 64px;
  height     : 64px;
  overflow   : hidden;
  text-align : center;
}

.project-employee__profile img {
  position  : absolute;
  transform : translate(-50%, -50%);
  height    : 100%;
  width     : auto;
  left      : 50%;
  top       : 50%;
}

.project-employee__content {
  vertical-align : top;
  display        : inline-block;
  width          : calc(100% - 70px);
  padding        : 0.75em;
}

.project-employee__content p {
  margin-bottom : 0.5em;
  word-break    : break-all;
  text-overflow : ellipsis;
  white-space   : nowrap;
  overflow      : hidden;
}

.projects__project_specifics {
  grid-column-end   : -1;
  grid-column-start : 1;
  padding-right     : 1em;
  white-space       : pre;
}

#app .el-table .cell {
  white-space : normal;
  word-break  : break-word;
}

#app .fc-unthemed .fc-event-container .fc-content {
  white-space : normal;
}

#app .permission__selection .el-checkbox {
  margin-left : 0;
}

#app .permission__selection .el-checkbox-group {
  display               : grid;
  grid-template-columns : 1fr 1fr 1fr 1fr;
}

#app .el-checkbox__label {
  padding-left : 5px;
}

.flag__active {
  color       : #1ed858;
  font-weight : bold;
}

.flag__warning {
  color       : #ff9900;
  font-weight : bold;
}

.flag__inactive {
  color       : #ff2513;
  font-weight : bold;
}

.navbar-item__link {
  display : inherit;
}

#app .navbar__items {
  padding     : 0;
  align-items : unset;
}

#app .navbar-item__link {
  font-size : 1em;
}

.navbar--search:not(.demo) {
  display : none;
}

.navbar-item.navbar--my-account .navbar-item__link .navbar-item__link-title {
  white-space : nowrap;
}

.navbar--accounting .navbar-item__link-icon,
.navbar--administration .navbar-item__link-title,
.navbar--search .navbar-item__link-title,
.navbar--logout .navbar-item__link-title,
.navbar--schedule .navbar-item__link-title {
  display : none;
}

.fc-unthemed .fc-content {
}

#app .control .control__wrapper .el-select {
  width : 100%;
}

#app .mobile {
  display : none;
}

.model__properties {
  grid-template-rows : 0fr 0fr;
  gap                : 0;
}

.el-table__row .table td {
  padding        : 0.75rem;
  vertical-align : top;
}

#app .el-table {
}

.model-show__text.customers__location {
  grid-column-start : 1;
  grid-column-end   : -1;
}

.avatar-uploader.disabled,
.avatar-uploader.disabled .el-upload {
  cursor       : default;
  border-color : #d9d9d9;
}

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

#app .dashboard__generated-charts {
  grid-template-columns : 1fr;
}

#app .el-tabs--border-card {
  -webkit-box-shadow : none;
  box-shadow         : none;
}

#app .el-tab-pane > .card {
  border : none;
}

#app .navbar-item__link {
  color             : rgb(84, 129, 230);
  display           : flex;
  align-items       : center;
  -webkit-box-align : center;
  border-radius     : 0;
}


#app .page__head-wrapper {
  margin-bottom : 0;
}

#app .navbar-item__link:hover {
  color            : #ffffff;
  background-color : rgb(152, 203, 74);
}

#app .page__head {
  box-shadow : 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index    : 2;
}

#app {
  background-color : #f5f7fa;
}

#app a:not(.button) {
  color : rgb(84, 129, 230);
}

#app .navbar-item__link-title {
  text-transform : capitalize;
  font-size      : 16px;
}

#app .button.button--link {
  text-transform : none;
  color          : rgb(84, 129, 230);
  font-weight    : 400;
}

#app textarea,
.control__wrapper .control__wrapper-2 textarea,
.el-select-dropdown.el-popper,
input[type=email],
input[type=password],
input[type=text] {
  border-radius : 0;
}

#app textarea,
.control__wrapper .control__wrapper-2 textarea {
  height : 100px;
}

.model-show__text.appointments__location {
  grid-column-start : 1;
  grid-column-end   : -1;
}


.goal__wrapper {
  padding   : 1em;
  border    : 1px dashed #e3e3e3;
  min-width : 0;
  display   : block;
}

.goal__wrapper h4 {
  color : rgb(84, 129, 230);
}

.goal__heading a,
.goal__heading a:hover {
  text-decoration : none;
}

.goal__chart {
  text-align : center;
  max-width  : 1040px;
}

.goal__wrapper.collapsed .goal__body {
  display : none;
}

.goal__wrapper.collapsed h4 {
  margin-bottom : 0;
}

#app .goal__data-entry .button.button--danger {
  line-height   : 2.0em;
  padding-left  : 1.1em;
  padding-right : 1.1em;
}

#app .vue-simple-suggest.designed .input-wrapper input {
  border-radius : 0;
  border        : 1px solid #ced4da;
}

#app .vue-simple-suggest.designed .suggestions .suggest-item.selected {
  background-color : #5481e8;
}

.patient__age {
  margin-bottom : 1.5em;
}

#app .service-model__activate--button .button.button--secondary {
  line-height   : 1.5em;
  padding-left  : 1em;
  padding-right : 1em;
}

#app .control__description {
  font-style    : italic;
  color         : #aaaaaa;
  margin-bottom : 0.5em;
}

#app a .goal__wrapper h5,
#app a:hover .goal__wrapper h5 {
  text-decoration : none;
}

#app a > i {
  font-size   : 1.4em;
  padding-top : 0.2em;
}

#app .el-tabs__nav {
  z-index : 1;
}

#app .el-tabs__nav {
  white-space : inherit;
}


.show-view .left-column__card {
  min-width : 280px;
}


.grid--gapped {
  display  : grid;
  grid-gap : 1em;
  gap      : 1em;
}

#app .icon__small {
  font-size : 1em;
}

.fc-scroller.fc-time-grid-container {
  max-height : 600px !important;
}

.layout__left-column-slot {
  gap                   : 1em !important;
  grid-template-columns : 0.25fr 1fr !important;
}


.template-patients-status-color {
  height        : 25px;
  width         : 25px;
  position      : relative;
  display       : inline-block;
  border-bottom : 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip container */
/* Tooltip text */
.template-patients-status-color .tooltiptext {
  visibility       : hidden;
  width            : 100px;
  background-color : #111111;
  color            : #fff;
  text-align       : center;
  padding          : 5px 0;
  border-radius    : 6px;

  /* Position the tooltip text - see examples below! */
  position         : absolute;
  z-index          : 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.template-patients-status-color:hover .tooltiptext {
  visibility : visible;
}


.mobile--blocks {
  display : none;
}


#app a > i.fa.fa-share.icon__small {
  display:none;
}

/* Mobile styles */
@media (max-width : 1600px) {
  .libraries__wrapper {
    grid-template-columns : 1fr 1fr 1fr 1fr;
  }

  .desktop--blocks {
    display : block;
  }

  .mobile--blocks {
    display : none;
  }
}

@media (max-width : 1280px ) {
  .libraries__wrapper {
    grid-template-columns : 1fr 1fr 1fr;
  }

  #app .dashboard__card-list .columns__1_3 {
    grid-template-columns : 1fr;
  }

  #app .therapy-dashboard__quick-access {
    grid-row-start : 1;
  }

  .card.login__container {
    width : 50%;
  }

  #app .el-dialog {
    width : 80vw !important;
  }

  .goal__wrapper .columns__2 {
    display : block;
  }

  .goal__wrapper .goal__wrapper {
    margin-bottom : 1em;
  }

  #app .page__main {
    padding-top   : 1em;
    padding-left  : 1em;
    padding-right : 1em;
  }

  .desktop--blocks {
    display : none;
  }

  .mobile--blocks {
    display           : block;
    grid-column-start : 1;
    grid-column-end   : -1;
  }

  .dashboard--calendar {
    grid-column-start : 1;
    grid-column-end   : -1;
  }


  .patients__show-layout > .card-list:first-child {
    grid-template-columns : 1fr 1fr;
  }

  .patients__show-layout > .card-list:first-child .card {
    align-self : stretch;
  }

  .columns__2 {
    grid-template-columns : 1fr;
  }

  .columns__3 {
    grid-template-columns : 1fr 1fr;
  }

  .card.login__container {
    width : 75%;
  }

  .card-list.show-view {
    grid-template-columns : 1fr;
    gap                   : 0.5em;
    grid-gap              : 0.5em;
  }
}

@media (max-width : 1050px ) {
  .libraries__wrapper {
    grid-template-columns : 1fr 1fr;
  }

  .show-view .show__body-content .model__properties {
    grid-template-columns : 1fr;
  }

  .card-list.show-view {
    gap      : 0.5em;
    grid-gap : 0.5em;
  }

  #app .el-dialog {
    width : 85vw !important;
  }

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

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

  #app .navbar__items.navbar__items--desktop.toggled {
    position         : absolute;
    left             : 0;
    top              : 100%;
    width            : 100%;
    height           : auto;
    z-index          : 9;
    background-color : #ffffff;
    text-align       : left;
    display          : flex;
    flex-direction   : column;
    padding-left     : 1em;
  }

  .navbar-item__link {
    width : 100%;
  }

  #app .page__head-wrapper {
  }

  #app .page__head,
  #app .page__head-wrapper,
  #app .navbar {
    overflow : visible;
  }
}

@media (max-width : 1000px) {
  #app .navbar__items.navbar__items--desktop.toggled {
    border-top : 1px solid #e3e3e3;
    padding    : 0.5em;
    box-shadow : 0 2px 5px rgba(0, 0, 0, 0.1);
  }

  #app .show-view table.control__table,
  #app .show-view table.el-table__body {
    border : 0;
  }

  #app .show-view table.control__table tr,
  #app .show-view table.el-table__body tr {
    margin-bottom : 2em;
    display       : block;
    border-bottom : 1px solid #ddd;
  }

  #app .show-view table.control__table td,
  #app .show-view table.el-table__body td {
    display               : grid;
    grid-template-columns : 0.5fr 1fr;
    text-align            : left;
    border-left           : 1px solid #ddd;
    border-right          : 1px solid #ddd;
  }

  #app .show-view table.control__table td:last-child,
  #app .show-view table.el-table__body td:last-child {
    border-bottom : 0;
  }

  #app .show-view table.control__table tr td:first-child,
  #app .show-view table.el-table__body tr td:first-child {
    border-top : 1px solid #ddd;
  }

  #app .show-view table.control__table td:before,
  #app .show-view table.el-table__body td:before {
    content      : attr(data-label);
    float        : left;
    margin-right : 0.5em;
    font-weight  : bold;
    margin-top   : 0.4em;
    margin-left  : 0.5em;
  }

  #app .show-view .el-table .cell {
    white-space : normal;
    word-break  : break-word;
    display     : flex;
    align-items : center;
  }

  #app .show-view table.control__table tr:first-child,
  #app .show-view .el-table__header-wrapper {
    display : none;
  }

  #app .show-view table.control__table colgroup,
  #app .show-view table.el-table__body colgroup {
    display : none;
  }


}

@media (max-width : 830px ) {
  #app .el-dialog {
    width : 90vw !important;
  }

  #app .searchbar {
    grid-template-columns : 1fr;
  }

  .searchbar__search {
    grid-column-start : 1;
    grid-column-end   : -1;
  }

  .searchbar__account,
  .searchbar__notification {
    display : none;
  }
}

@media (max-width : 650px) {
  #app .el-dialog {
    width : 95vw !important;
  }

  .patients__show-layout > .card-list:first-child {
    grid-template-columns : 1fr;
  }

  .card.login__container {
    width : 100%;
  }
}

@media (max-width : 580px ) {
  .libraries__wrapper {
    grid-template-columns : 1fr;
  }

  .columns__3 {
    grid-template-columns : 1fr;
  }

  #app .el-dialog {
    width : 100vw !important;
  }

  body,
  .el-table,
  .control__description,
  input[type="color"],
  input[type="date"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="email"],
  input[type="month"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="text"],
  input[type="time"],
  input[type="url"],
  input[type="week"],
  select:focus,
  textarea {
    font-size: 16px;
  }

  .fc .fc-list-table {
    table-layout: fixed;
  }

  .fc .fc-list-table .fc-list-item td.fc-list-item-time {
    white-space: pre-line;
  }

  .fc-toolbar.fc-header-toolbar {
    flex-direction: column;
    font-size:.8em;
  }

  .columns__2,
  .columns__3,
  .columns__4,
  .columns__5,
  .columns__1_3,
  .columns__2_3 {
    grid-template-columns: 1fr;
  }

  #app .page__main {
    padding: .25em;
  }
  .page__foot{
    padding: .75em;
    font-size: 13px;
  }

  .navbar__wrapper{
    padding:0;
  }
}