﻿/*  @font-face {
    font-family: "Supermarket";
    src: url(/Fonts/supermarket.ttf) format("truetype");
}

@font-face {
    font-family: "TP_Kubua";
    src: url(/Fonts/TP_Kubua.ttf) format("truetype");
}
*/
.btn-action-link {
  background-color: #009344;
  color: white;
  display: block;
  width: 120px;
  height: 40px;
  border-radius: 20px;
  line-height: 42px;
  box-shadow: 0 2px 16px 0 rgba(36, 39, 56, 0.34);
}

.btn-action-link:hover {
  border: 1px solid #009344;
  background-color: #dceaf5;
}

.font-super {
  font-family: Supermarket;
}

.font-kubua {
  font-family: TP_Kubua;
}

body {
  font-family: Supermarket;
  transform: rotate(90deg);
}

/* .thead-table {
    margin:0px 0px;
    font-size:4rem;
    align-items:center;
    text-align:center;
} */

@media screen and (min-width: 2160px) {
  .row-head {
    align-items: center;
    margin-bottom: 5rem;
  }

  .size-logo {
    width: 80%;
    cursor: pointer;
  }
  .head-date {
    background-image: linear-gradient(
      45deg,
      #d8dcdf 60%,
      rgba(255, 255, 255, 1) 60%
    );
    margin: 20px 0px;
    color: #1a396a;
    border-radius: 3px;
    align-items: center;
    box-shadow: 0 2px 16px 0 rgba(36, 39, 56, 0.95);
  }

  .head-icon {
    display: flex;
    justify-content: center;
    font-size: 7rem;
    border-right: 2px solid #899296;
    text-align: center;
  }

  .head-date-text {
    margin-left: 15px;
    margin-top: 0.8rem;
    font-size: 6rem;
  }

  .thead-table {
    margin: 0px 0px;
    font-size: 4rem;
    align-items: center;
    text-align: center;
  }

  .body-table {
    background-color: white;
    color: #0056bb;
    margin: 3rem 0px;
    border-radius: 3px;
    align-items: center;
    text-align: center;
    font-size: 3.5rem;
    box-shadow: 0 2px 16px 0 rgba(36, 39, 56, 0.34);
  }

  .col-board:nth-child(1),
  .col-board:nth-child(2) {
    height: 7rem;
    border-right: 2px solid #b1ccd8;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .col-board:nth-child(4),
  .col-board:nth-child(5) {
    height: 7rem;
    border-left: 2px solid #b1ccd8;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media screen and (max-width: 2159px) {
  .row-head {
    align-items: center;
    margin-bottom: 2rem;
  }

  .size-logo {
    width: 80%;
    cursor: pointer;
  }
  .head-date {
    background-image: linear-gradient(
      45deg,
      #d8dcdf 60%,
      rgba(255, 255, 255, 1) 60%
    );
    margin: 20px 0px;
    color: #1a396a;
    border-radius: 3px;
    align-items: center;
    box-shadow: 0 2px 16px 0 rgba(36, 39, 56, 0.95);
  }

  .head-icon {
    display: flex;
    justify-content: center;
    font-size: 4rem;
    border-right: 2px solid #899296;
    text-align: center;
  }

  .head-date-text {
    margin-left: 15px;
    margin-top: 1rem;
    font-size: 2.5rem;
    font-weight: 600;
    white-space: nowrap;
  }

  .thead-table {
    margin: 0px 0px;
    font-size: 2.2rem;
    align-items: center;
    text-align: center;
  }

  .body-table {
    background-color: white;
    color: #0056bb;
    margin: 1rem 0px;
    border-radius: 3px;
    align-items: center;
    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
    box-shadow: 0 2px 16px 0 rgba(36, 39, 56, 0.34);
  }

  .col-board:nth-child(1),
  .col-board:nth-child(2) {
    height: 5rem;
    border-right: 2px solid #b1ccd8;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .col-board:nth-child(4),
  .col-board:nth-child(5) {
    height: 5rem;
    border-left: 2px solid #b1ccd8;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  td {
    padding-left: 10px;
  }
  /* .col-board:last-child{
    border-right: none;
  } */
}

/* .body-table {
    background-color:white;
    color: #0056bb;
    margin:3rem 0px;
    border-radius: 3px;
    align-items:center;
    text-align:center;
    font-size:3.5rem;
    box-shadow:0 2px 16px 0 rgba(36, 39, 56, 0.34);
} */

.body-table:nth-child(even) {
  background-color: #dceaf5 !important;
}

.body-table > div:nth-child(2),
.body-table > div:nth-child(4),
.body-table > div:nth-child(5) {
  text-align: left;
  justify-content: start;
  justify-self: left;
  float: left;
}

/* .col-board:nth-child(1),
.col-board:nth-child(2) {
  height: 7rem;
  border-right: 2px solid #b1ccd8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.col-board:nth-child(4),
.col-board:nth-child(5) {
  height: 7rem;
  border-left: 2px solid #b1ccd8;
  display: flex;
  align-items: center;
  justify-content: center;
} */

.body-table-welcomeboard {
    background-color: #dceaf5;
    margin: 10px 0px;
    color: #000000;
    border-radius: 3px;
    align-items: center;
    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
    box-shadow: 0 2px 16px 0 rgba(36, 39, 56, 0.34);
}

    .body-table-welcomeboard:nth-child(even) {
        background-color: white !important;
    }

    .body-table-welcomeboard > div:nth-child(1),
    .body-table-welcomeboard > div:nth-child(3) {
        text-align: left;
        justify-content: start;
    }
.body-table-jobstatus {
  background-color: #f7f6f8;
  margin: 10px 0px;
  color: #1a396a;
  border-radius: 3px;
  align-items: center;
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
  box-shadow: 0 2px 16px 0 rgba(36, 39, 56, 0.34);
}

/*.body-table-jobstatus:nth-child(even) {
  background-color: #ebf0f3 !important;
}*/
.body-table-jobstatus:nth-child(even) {
    background-color: #efeeee !important;
}

.body-table-jobstatus > div:nth-child(1),
.body-table-jobstatus > div:nth-child(3) {
  text-align: left;
  justify-content: start;
}

.col-jobstatus {
  padding: 0 15px;
  height: 50px;
  border-right: 2px solid #b1ccd8;
  /* display: inline-table; */
  align-items: center;
  justify-content: center;
}

.col-job-1 {
  flex: none;
  width: 23%;
  padding-top: 5px;
}

.col-job-2 {
  flex: none;
  width: 16%;
  padding-top: 5px;
}

.col-job-3 {
  flex: none;
  width: 19%;
  padding-top: 5px;
}

.col-job-4 {
  flex: none;
  width: 18%;
  padding-top: 5px;
}

.col-job-5 {
  flex: none;
  width: 12%;
  padding-top: 5px;
}

.col-job-6 {
  flex: none;
  width: 12%;
  padding-top: 5px;
}

table {
  border-collapse: separate;
  border-spacing: 0 1em;
}

#level_green::before {
  content: "";
  border-color: rgba(0, 175, 80, 1);
  border-width: 0px 20px 0 20px;

  border-style: solid;
  margin-right: 10px;
}

#level_yellow::before {
  content: "";
  border-color: rgba(255, 255, 1, 1);
  border-width: 0px 20px 0 20px;
  border-style: solid;
  margin-right: 10px;
}

#level_red::before {
  content: "";
  border-color: rgba(254, 0, 0, 1);
  border-width: 0px 20px 0 20px;
  border-style: solid;
  margin-right: 10px;
}

.dx-scheduler-header {
  display: none !important;
}

.dx-scheduler-work-space {
  padding: 0 5px 0 0px !important;
  margin: 0 !important;
}

.dx-scheduler-timeline
  .dx-scheduler-header-panel-cell:not(.dx-scheduler-header-panel-week-cell) {
  /* width: 171px !important; */
  /* width: 77px !important; */
  width: auto !important;
  /* font-weight: 800;
  font-size: 1.5rem; */
}

.dx-scheduler-timeline .dx-scheduler-date-table-cell {
  /* width: 171px !important; */
  /* width: 77px !important; */
  width: auto !important;
}

.dx-scheduler-timeline.dx-scheduler-work-space-grouped[dx-group-column-count="1"]
  .dx-scheduler-date-table-scrollable {
  margin-left: 200px !important;
}

.dx-scheduler-timeline.dx-scheduler-work-space-grouped[dx-group-column-count="1"]
  .dx-scheduler-header-scrollable {
  margin-left: 200px !important;
}

.dx-scheduler-timeline.dx-scheduler-work-space-grouped[dx-group-column-count="1"]
  .dx-scheduler-sidebar-scrollable {
  width: 200px !important;
}

.dx-scheduler-timeline.dx-scheduler-work-space-grouped[dx-group-column-count="1"]
  .dx-scheduler-group-table {
  width: 200px !important;
}

.dx-scheduler-timeline.dx-scheduler-work-space-grouped[dx-group-column-count="1"]
  .dx-scheduler-sidebar-scrollable:before {
  width: 200px !important;
  content: "ช่างเทคนิค";
  text-align: center;
  padding-top: 4px;
  font-weight: 800;
  font-size: 1.5rem;
}
.dx-scheduler-appointment-content {
  padding: 0 8px !important;
}

.dx-scheduler-work-space:not(.dx-scheduler-work-space-vertical-grouped)
  .dx-scrollable.dx-scheduler-date-table-scrollable {
  padding-bottom: 70px !important;
}

.dx-scheduler-work-space:not(.dx-scheduler-work-space-vertical-grouped)
  .dx-scrollable.dx-scheduler-date-table-scrollable,
.dx-scheduler-work-space:not(.dx-scheduler-work-space-vertical-grouped)
  .dx-scrollable.dx-scheduler-sidebar-scrollable {
  padding-bottom: 70px !important;
}
.dx-scheduler-group-header {
  align-items: center !important;
  height: 71px !important;
  display: block !important;
  overflow: visible !important;
  padding: 0px !important;
}
.dx-scheduler-group-header-content {
  height: 42px;
  padding: 10px 2px;
  background-color: rgb(31, 58, 147);
  color: #fff;
}

.dx-scheduler-header-panel-current-time-cell {
  background-color: rgb(255, 235, 173);
  color: #333333 !important;
}

.dx-scheduler-timeline .dx-scheduler-date-table .dx-scheduler-date-table-row {
  border-right: 1px solid rgba(221, 221, 221, 0.6);
}

.dx-scheduler-group-row {
  display: block !important;
}

.dx-scheduler-timeline .dx-scheduler-date-table .dx-scheduler-date-table-row{
  flex : none !important
}
