/*
 |  tail.DateTime - A pure, vanilla JavaScript DateTime Picker
 |  @author        SamBrishes <https://github.com/pytesNET/tail.DateTime/>
 |                 MrGuiseppe <https://github.com/MrGuiseppe/pureJSCalendar/>
 |  @version       0.3.4 - Alpha
 |
 |  @license       X11 / MIT License
 |  @copyright     Copyright © 2018 - SamBrishes, pytesNET <pytes@gmx.net>
 |                 Copyright © 2018 - MrGuiseppe <https://github.com/MrGuiseppe>
 */

/* @start tail.DateTime */
.tail-datetime-calendar {
  width: 100%;
  height: auto;
  margin: auto;
  padding: 0;
  display: block;
  overflow: hidden;
  /* position: absolute; */
  border-collapse: separate;
  font-family: "Open Sans", Calibri, Arial, sans-serif;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3125);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3125);
  border-radius: 3px;
  -webkit-border-radius: 3px;
}
.tail-datetime-calendar:after {
  clear: both;
  content: "";
  display: block;
  font-size: 0;
  visibility: hidden;
}
.tail-datetime-calendar.calendar-static {
  margin-left: auto;
  margin-right: auto;
}
.tail-datetime-calendar .calendar-navi {
  width: 100%;
  margin: 0;
  padding: 10px 0;
  display: table;
  border-spacing: 0;
  border-collapse: separate;
  background-color: #00a8ff;
  border-radius: 3px 3px 0 0;
  -webkit-border-radius: 3px 3px 0 0;
}
.tail-datetime-calendar .calendar-navi span {
  cursor: pointer;
  color: #fff;
  margin: 0;
  padding: 0;
  display: table-cell;
  font-size: 18px;
  text-align: center;
  line-height: 30px;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.15);
  background-repeat: no-repeat;
  background-position: center center;
}
.tail-datetime-calendar .calendar-navi span:first-child,
.tail-datetime-calendar .calendar-navi span:last-child {
  width: 35px;
  padding: 0 0 5px 0;
  font-size: 22px;
}
.tail-datetime-calendar .calendar-navi span:hover {
  background-color: transparent;
}
.tail-datetime-calendar .calendar-navi span.button-prev {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC\
    9zdmciIHdpZHRoPSI2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgNiAxNiI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iT\
    TYgMkwwIDhsNiA2VjJ6Ii8+PC9zdmc+");
}
.tail-datetime-calendar .calendar-navi span.button-next {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC\
    9zdmciIHdpZHRoPSI2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgNiAxNiI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iT\
    TAgMTRsNi02LTYtNnYxMnoiLz48L3N2Zz4=");
}
.tail-datetime-calendar .calendar-navi span.button-check {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC\
    9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEyIDE2Ij48cGF0aCBmaWxsPSIjZmZmZmZmIiBkP\
    SJNMTIgNWwtOCA4LTQtNCAxLjUtMS41TDQgMTBsNi41LTYuNUwxMiA1eiIvPjwvc3ZnPg==");
}
.tail-datetime-calendar .calendar-navi span.button-close {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC\
    9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEyIDE2Ij48cGF0aCBmaWxsPSIjZmZmZmZmIiBkP\
    SJNNy40OCA4bDMuNzUgMy43NS0xLjQ4IDEuNDhMNiA5LjQ4bC0zLjc1IDMuNzUtMS40OC0xLjQ4TDQuNTIgOCAuNzcgNC4y\
    NWwxLjQ4LTEuNDhMNiA2LjUybDMuNzUtMy43NSAxLjQ4IDEuNDhMNy40OCA4eiIvPjwvc3ZnPg==");
}
.tail-datetime-calendar .calendar-date {
  margin: 0;
  padding: 0;
  display: block;
}
.tail-datetime-calendar .calendar-date table {
  width: 100%;
  margin: 0;
  padding: 0;
  border-spacing: 0;
  border-collapse: collapse;
}
.tail-datetime-calendar .calendar-date table thead tr > *,
.tail-datetime-calendar .calendar-date table tbody tr > * {
  color: #000;
  width: 45px;
  height: 45px;
  padding: 0;
  font-size: 12px;
  text-align: center;
  font-weight: normal;
  line-height: 35px;
  border: 0;
  background-color: #dadada;
}
.tail-datetime-calendar .calendar-date table tbody tr > * {
  color: #334455;
  cursor: pointer;
  position: relative;
  font-size: 14px;
  background-color: #ffffff;
}
.tail-datetime-calendar .calendar-date table tbody tr > * > span {
  color: inherit;
  z-index: 10;
  position: relative;
}
/* Select a Day */
.tail-datetime-calendar .calendar-date table tbody tr > *::after {
  top: 1px;
  left: calc(50% - 20px);
  width: 40px;
  height: 40px;
  content: "";
  display: block;
  position: absolute;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  border-radius: 50%;
  -webkit-border-radius: 50%;
}
.tail-datetime-calendar .calendar-date table tbody tr > *.today {
  color: #000;
}
.tail-datetime-calendar .calendar-date table tbody tr > .today:hover {   
  color:#fff;
}
.tail-datetime-calendar .calendar-date table tbody tr > .today:hover:after { 
  background-color: #1696ff;
  color:#fff;
}
.tail-datetime-calendar .calendar-date table tbody tr > *.today:after {
  border-color: #3296c8;
}
/* Not Presensi */
.tail-datetime-calendar .calendar-date table tbody tr > *.not-presensi-active {  
  color: #fff;
}
.tail-datetime-calendar .calendar-date table tbody tr > *.not-presensi-active:after {
  background-color:#fc4f4f;
  color: #fff;
}
.tail-datetime-calendar .calendar-date table tbody tr > *.not-presensi-active:hover:after {
  background-color:#fc4f4f;
  color: #fff;
}
.tail-datetime-calendar .calendar-date table tbody tr > *.not-presensi:after {
  background-color: #ff7979;
  color:#fff;
}
.tail-datetime-calendar .calendar-date table tbody tr > .not-presensi:hover:after {
  background-color:#fc4f4f;
  color: #fff;
}
/* End Not Presensi */

/* Start Late Presensi */
.tail-datetime-calendar .calendar-date table tbody tr > *.late-active {  
  color:#fff;
}
.tail-datetime-calendar .calendar-date table tbody tr > *.late-active:after {
  background-color:#fea748;
  color:#000;
}
.tail-datetime-calendar .calendar-date table tbody tr > .late-active:hover:after{  
  background-color:#fea748;
}
.tail-datetime-calendar .calendar-date table tbody tr > *.late:after {
  background-color:#ffbe76;
  color:#000;
}
.tail-datetime-calendar .calendar-date table tbody tr > .late:hover:after{  
  background-color:#fea748;
}
/* End Late Presensi */

/* Start Presensi */
.tail-datetime-calendar .calendar-date table tbody tr > *.presensi-active {
  color:#fff;
}
.tail-datetime-calendar .calendar-date table tbody tr > *.presensi-active:after {
  background-color: #badc58;  
}
.tail-datetime-calendar .calendar-date table tbody tr > .presensi-active:hover:after {  
  background-color:#badc58;
  color:#fff;
}
.tail-datetime-calendar .calendar-date table tbody tr > *.presensi:after {
  background-color: #badc58;
  color:#000;
}
.tail-datetime-calendar .calendar-date table tbody tr > .presensi:hover:after {  
  background-color:#badc58;
  color:#fff;
}
/* End Presensi */

/* Start Sick Presensi */
.tail-datetime-calendar .calendar-date table tbody tr > *.holiday-active {
  color:#fff;
}
.tail-datetime-calendar .calendar-date table tbody tr > *.holiday-active::after {
  background-color: #d6d4d4;
}
.tail-datetime-calendar .calendar-date table tbody tr > .holiday-active:hover:after {  
  background-color:#d6d4d4;
  color:#000;
}
.tail-datetime-calendar .calendar-date table tbody tr > *.holiday:after {
  background-color: #d6d4d4;
  color:#000;
}
.tail-datetime-calendar .calendar-date table tbody tr > .holiday:hover:after {  
  background-color:#d6d4d4;
  color:#000;
}
/* End Sick Presensi */

/* Start Holiday Presensi */
.tail-datetime-calendar .calendar-date table tbody tr > *.sick-active {
  color:#fff;
}
.tail-datetime-calendar .calendar-date table tbody tr > *.sick-active::after {
  background-color:#be2edd;
}
.tail-datetime-calendar .calendar-date table tbody tr > .sick-active:hover:after {  
  background-color:#be2edd;
  color:#000;
}
.tail-datetime-calendar .calendar-date table tbody tr > *.sick:after {
  background-color: #e056fd;
  color:#000;
}
.tail-datetime-calendar .calendar-date table tbody tr > .sick:hover:after {  
  background-color:#be2edd;
  color:#000;
}
/* End Holiday Presensi */

/* Start Permission Presensi */
.tail-datetime-calendar .calendar-date table tbody tr > *.permission-active {
  color:#fff;
}
.tail-datetime-calendar .calendar-date table tbody tr > *.permission-active::after {
  background-color:#CFD8DC;
}
.tail-datetime-calendar .calendar-date table tbody tr > .permission-active:hover:after {  
  background-color:#CFD8DC;
  color:#000;
}
.tail-datetime-calendar .calendar-date table tbody tr > *.permission:after {
  background-color: #78909C;
  color:#000;
}
.tail-datetime-calendar .calendar-date table tbody tr > .permission:hover:after {  
  background-color:#CFD8DC;
  color:#000;
}
/* End Permission Presensi */

/* Start Alpha Presensi */
.tail-datetime-calendar .calendar-date table tbody tr > *.alpha-active {
  color:#fff;
}
.tail-datetime-calendar .calendar-date table tbody tr > *.alpha-active::after {
  background-color:#FF4081;
}
.tail-datetime-calendar .calendar-date table tbody tr > .alpha-active:hover:after {  
  background-color:#FF4081;
  color:#000;
}
.tail-datetime-calendar .calendar-date table tbody tr > *.alpha:after {
  background-color: #FF1744;
  color:#000;
}
.tail-datetime-calendar .calendar-date table tbody tr > .alpha:hover:after {  
  background-color:#FF4081;
  color:#000;
}
/* End Permission Presensi */

.tail-datetime-calendar .calendar-date table tbody tr > .calendar-month:hover:after {
  background-color: transparent;
}
.tail-datetime-calendar .calendar-date table tbody tr > *:hover {
  color:#fff;
}
.tail-datetime-calendar .calendar-date table tbody tr > *:hover:after {
  background-color: #1696ff;
  color:#fff;
}

.tail-datetime-calendar .calendar-date table tbody tr > *.empty,
.tail-datetime-calendar .calendar-date table tbody tr > *.disable {
  color: #8899aa;
  cursor: not-allowed;
  background-color: #efefef;
}
.tail-datetime-calendar .calendar-date table tbody tr > *.empty:hover:after,
.tail-datetime-calendar .calendar-date table tbody tr > *.disable:hover:after {
  content: "";
  display: none;
}
.tail-datetime-calendar .calendar-date table tbody tr > *.current span {
  color: #fff;
}
.tail-datetime-calendar .calendar-date table tbody tr > *.current:after {
  border-color: #3296c8;
  background-color: #3296c8;
}
/* Select A Month */
.tail-datetime-calendar .calendar-date table.calendar-month tbody tr > * {
  width: 81.66666666666667px;
  padding: 5px;
  line-height: 25px;
}
/* .tail-datetime-calendar .calendar-date table.calendar-month tbody tr > .current-year span {
  color:#00a8ff;
} */
.tail-datetime-calendar .calendar-date table.calendar-month tbody tr > * span {
  display: block;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  border-radius: 3px;
  -webkit-border-radius: 3px;
}
.tail-datetime-calendar
  .calendar-date
  table.calendar-month
  tbody
  tr
  > .list-year:hover
  span {
  color:#fff;
}
.tail-datetime-calendar
  .calendar-date
  table.calendar-month
  tbody
  tr
  > *:hover
  span {
  /* border-color: #d0d0d0;
  box-shadow: 0 1px 0 0 #efefef;
  -webkit-box-shadow: 0 1px 0 0 #efefef; */
  color:#00a8ff;
}
/* Select a Time */
.tail-datetime-calendar .calendar-time {
  width: 100%;
  margin: 0;
  padding: 0;
  display: table;
  text-align: center;
  background-color: #ffffff;
  border-radius: 0 0 3px 3px;
  -webkit-border-radius: 0 0 3px 3px;
}
.tail-datetime-calendar .calendar-date + .calendar-time {
  border-top: 1px solid #d0d0d0;
  background-color: #f8f8f8;
}
.tail-datetime-calendar .calendar-time .calendar-field {
  width: 33.3333333333%;
  padding: 10px 0;
  display: table-cell;
  position: relative;
  text-align: center;
  vertical-align: top;
}
.tail-datetime-calendar .calendar-time .calendar-field:first-child {
  text-align: right;
}
.tail-datetime-calendar .calendar-time .calendar-field:first-child:after {
  top: 12px;
  right: -10px;
  content: ":";
  position: absolute;
}
.tail-datetime-calendar .calendar-time .calendar-field:last-child {
  text-align: left;
}
.tail-datetime-calendar .calendar-time .calendar-field:last-child:after {
  top: 12px;
  left: -10px;
  content: ":";
  position: absolute;
}
.tail-datetime-calendar .calendar-time .calendar-field input[type="number"] {
  width: 100%;
  max-width: 50px;
  margin: 0;
  padding: 3px 4px;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  border-color: #d0d0d0;
  background-color: #ffffff;
  border-radius: 3px;
  -webkit-border-radius: 3px;
}
.tail-datetime-calendar
  .calendar-time
  .calendar-field
  input[type="number"]:hover {
  border-color: #a0a0a0;
}
.tail-datetime-calendar
  .calendar-time
  .calendar-field
  input[type="number"]:focus {
  border-color: #3296c8;
}
.tail-datetime-calendar .calendar-time .calendar-field label {
  color: #778899;
  margin: 5px 0 0 0;
  padding: 0;
  display: block;
  font-size: 12px;
  line-height: 12px;
}
/* @end tail.DateTime */
.schedule-name{
  background-color: #d7f4fa;
  font-weight: bold;
  padding:0.5rem 1.25rem;
  text-align:left;
}