html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.cellClients {
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tableFixHead {
  overflow-y: auto;
  max-height: 5000px;
}

  .tableFixHead thead th {
    position: sticky;
    top: 0;
  }

.tableLessonFixHead {
  overflow-y: auto;
  max-height: 5000px;
}

  .tableLessonFixHead thead th {
    position: sticky;
    top: 0;
  }

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  padding: 0px 0px;
}

th {
  background: #ffffff;
}

tr:hover {
  background-color: #bcd1e8;
}

/*.tableFixHead tr:nth-child(even) {
  background-color: aliceblue;
}*/

/*.tableLessonFixHead tr:nth-child(even) {
  background-color: aliceblue;
}*/

.tr-lessons-Monday {
  background-color: #ffffff;
}

.tr-lessons-Tuesday {
  background-color: #f9f9f9;
}

.tr-lessons-Wednesday {
  background-color: #f1f1f1;
}

.tr-lessons-Thursday {
  background-color: #eeeeee;
}

.tr-lessons-Friday {
  background-color: #e9e9e9;
}

.tr-lessons-Saturday {
  background-color: #e1e1e1;
}

.tr-lessons-Sunday {
  background-color: #dddddd;
}

/*.tr-lessons-FlatRate-000 {
  background-color: #a3c8ea;
}

.tr-lessons-FlatRate-001 {
  background-color: #aad7d1;
}

.tr-lessons-FlatRate-002 {
  background-color: #f7ef8a;
}

.tr-lessons-FlatRate-003 {
  background-color: #f0ed8e;
}

.tr-lessons-FlatRate-004 {
  background-color: #dee588;
}

.tr-lessons-FlatRate-005 {
  background-color: #fadcdc;
}

.tr-lessons-FlatRate-006 {
  background-color: #c1bfc0;
}

.tr-lessons-FlatRate-007 {
  background-color: #f9bc7e;
}

.tr-lessons-FlatRate-next {
  background-color: #ff0000;
}*/

.tr-billings {
  background-color: #f1f1f1;
}

/*<style >
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}



</style >*/
/*  .tableFixHead,
    .tableFixHead td {
        box-shadow: inset 1px -1px #000;
    }*/
/*  .tableFixHead th {
        box-shadow: inset 1px 1px #000, 0 1px #000;
    }*/
/* rows */
div.dropdown-multicol {
  width: 30em;
}

div.dropdown-row > a.dropdown-item {
  display: inline-block;
  width: 32%;
}

/* Columns */
div.dropdown-multicol2 {
  width: 30em;
}

  div.dropdown-multicol2 > div.dropdown-col {
    display: inline-block;
    width: 32%;
  }

.table_HorScrollBar {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

  .table_HorScrollBar tr:hover {
    background-color: transparent;
  }

.table_SwitchRows {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

  .table_SwitchRows tr {
    vertical-align: top;
  }

    .table_SwitchRows tr:hover {
      background-color: transparent;
    }

    .table_SwitchRows tr:nth-child(odd) td {
      background-color: #eeeeee;
    }

    .table_SwitchRows tr:nth-child(even) td {
      background-color: white;
    }

.readOnly {
  pointer-events: none;
}
/*
Or just:
div.dropdown-row>a.dropdown-item{
  display:inline-block;
  width: 10em;
}

(Former may be more convenient for responsive)
*/

.input-icon-wrap {
  border: none;
  display: flex;
  flex-direction: row;
}

.input-icon {
  font-size: 24px;
  color: black;
  padding-top: 1px;
  align-items: center;
}

.input-text {
  width: 120px;
  color: black;
  padding-top: 10px;
  font-size: 24px;
  display: inline-block;
}

.monat-field {
  max-width: 120px;
  height: 24px;
  margin-left: 10px;
}

.shortdate-field {
  max-width: 120px;
  height: 24px;
  margin-left: 10px;
}

.date-field {
  max-width: 150px;
  height: 24px;
  margin-left: 10px;
}

.text-block {
  border: none;
}

.text-field {
  width: 100%;
  height: 24px;
  margin-left: 10px;
}

.textarea-field {
  width: 100%;
  margin-left: 10px;
}

.datetime-field {
  max-width: 200px;
  height: 24px;
  margin-left: 10px;
}

.time-field {
  max-width: 120px;
  height: 24px;
  margin-left: 10px;
}

.select-field {
  width: 100%;
  height: 24px;
  margin-left: 10px;
}

.input-with-icon {
  border: none;
  flex: 1;
}

.input-icon, .input-with-icon {
  padding: 0px;
}

.info-text {
  color: gray;
  font-family: Calibri;
  font-size: 10px;
  font-style: italic;
}

.hide-column {
  width: 100%;
}

@media screen and (max-width: 1440px) {
  .cellNotes {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.th-checkbox {
  min-width: 20px;
}

.th-icons4 {
  min-width: 120px;
  text-align: right;
}

@media screen and (max-width: 992px) {
  .tohide-column992 {
    display: none;
  }
}

@media screen and (max-width: 992px) {
  .cell-maintext992 {
    max-width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media screen and (max-width: 768px) {
  .tohide-column768 {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .cell-maintext768 {
    max-width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.mobile-items {
  display: none;
}

/*
	Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
  https://elvery.net/demo/responsive-tables/#no-more-tables
  https://codepen.io/team/css-tricks/pen/wXgJww?editors=1100
	*/
@media only screen and (max-width: 992px) {
  .desktop-items {
    display: none;
  }

    .desktop-items td {
      display: none;
    }

  .mobile-items {
    display: block;
  }

    .mobile-items td {
      display: block;
    }

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

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

  .table-lessons tr {
    width: 100%;
    margin: 0 0 1rem 0;
  }

  .table-lessons td {
    width: 100%;
    border: none;
    position: relative;
  }

    .table-lessons td:before {
      position: absolute;
      top: 0;
      left: 6px;
      width: 100%;
      padding-right: 10px;
      white-space: nowrap;
    }

  .table-lessons tr:hover {
    width: 100%;
    background-color: #bcd1e8;
  }
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #efefef;
  border-color: #999;
  color: #000000
}

.select2-results__option {
  background-color: white;
  color: black;
}

.checkboxRight {
  float: right;
}