@import 'hr-core-consts';

.HRD_datetimepicker {
  padding-top: 1px;
  position: relative;
  width: 100%;
  height: auto;
  // align-items: baseline;
  // padding-bottom: 10px;
  display: grid;
  grid-template-columns: minmax(1px, 1fr);
  grid-template-rows: minmax(auto, 0.65em) 1fr; //0.65em //10px
  grid-template-areas: "dx-datebox-label""dxDateBox"
}

.dxDateBox {
  grid-area: dxDateBox;
  background-color: transparent;
  display: block;
  // height: 28px;
}

.dx-icon {
  font-size: 24px;
}

// ::ng-deep .dx-show-clear-button .dx-icon-clear {
//     color: #000;
//     background-color: white;
//     /* background-color: #c2c2c2de; */
//     border-radius: 50%;
//     position: absolute;
//     top: 50%;
//     margin-top: -9px;
//     width: 16px;
//     height: 16px;
//     background-position: 0 0;
//     background-size: 16px 16px;
//     padding: 0;
//     font-size: 10px;
//     /* text-align: center; */
//     /* line-height: 10px; */
// }

::ng-deep .HRD_datetimepicker .dx-dropdowneditor-button .dx-button-content {
  position: absolute;
  left: -4px;
}

::ng-deep .HRD_datetimepicker .dx-state-disabled .dx-dropdowneditor-button .dx-button-content {
  height: 100%;
  display: table-cell;
  color: grey;
  background-color: #0000;
  -webkit-box-shadow: none;
  box-shadow: none;
}
::ng-deep .HRD_datetimepicker .dx-texteditor-input {
  height: auto;
  padding-top: 6.3px !important;
  padding-bottom: 5.1px !important;
  margin: 0;
  background-color: #0000;
  font-size: 14px;
  color: unset;
}


.dx-state-disabled .dx-widget,
.dx-state-disabled.dx-widget {
  opacity: unset; //$hrColor-Alpha_Disabled;
  color: rgba(0, 0, 0, $hrColor-Alpha_Disabled);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  cursor: default;
  background-image: linear-gradient(to right, rgba(0, 0, 0, .42) 0, rgba(0, 0, 0, .42) 33%, transparent 0);
  background-position: bottom;
  background-size: 4px 1px;
  background-repeat: repeat-x
}

.dx-datebox-label {
  grid-area: dx-datebox-label;
  color: rgba(0, 0, 0, 0.54);
  top: 1.25em;
  left: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
  font-size: 10px;
  pointer-events: none;
  // width: 133.33333%;
  white-space: nowrap;
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: default;
  font-stretch: 100%;
  font-weight: 400;
  text-size-adjust: 100%;
  visibility: visible;

}

::ng-deep .HRD_datetimepicker .dx-texteditor.dx-state-focused:before {
  border-bottom: grey;
  border-width: 1px;
  outline-width: 0em;
  transform: translateY(-1.34375em) scale(.75);
}

::ng-deep .dx-calendar-cell.dx-calendar-selected-date span,
.dx-calendar-cell.dx-calendar-selected-date.dx-calendar-today span {
  color: #fff;
  background-color: $hrColor-DarkBlue;
  font-weight: 400;
}

::ng-deep .dx-calendar-navigator .dx-button {
  height: 100%;
  display: table-cell;
  background-color: #0000;
  color: $hrColor-DarkBlue;
  -webkit-box-shadow: none;
  box-shadow: none;
}

::ng-deep .dx-datebox-wrapper-calendar .dx-button
// ::ng-deep .dx-datebox-wrapper-calendar .dx-timeview-hourarrow
// ::ng-deep .dx-datebox-wrapper-calendar .dx-timeview-minutearrow
  {
  color: $hrColor-DarkBlue;
}

::ng-deep .dx-datebox-wrapper-calendar .dx-button-today {
  color: $hrColor-Red;
}


::ng-deep .dx-datebox-wrapper-calendar .dx-calendar-cell.dx-calendar-today {
  font-weight: 900;
  color: $hrColor-LightBlue;
}



::ng-deep .dx-show-clear-button .dx-clear-button-area {
  width: 16px;
  min-width: 16px;
  right: -15px;
}

::ng-deep .dx-calendar-navigator-previous-month.dx-button .dx-icon,
::ng-deep .dx-calendar-navigator-previous-view.dx-button .dx-icon {
  color: $hrColor-DarkBlue;
}

::ng-deep .dx-calendar-navigator-next-month.dx-button .dx-icon,
::ng-deep .dx-calendar-navigator-next-view.dx-button .dx-icon {
  color: $hrColor-DarkBlue;
}

::ng-deep .dx-texteditor.dx-editor-underlined.dx-state-disabled:after,
::ng-deep .dx-texteditor.dx-editor-underlined.dx-state-readonly.dx-state-hover:after,
::ng-deep .dx-texteditor.dx-editor-underlined.dx-state-readonly:after {
  border-bottom-style: none;
}

//-------------------------------
::ng-deep .dx-placeholder {
  color: rgba(0, 0, 0, 0.54);
  font-size: 14px;
}

.hs_label_invalid,
::ng-deep .dx-invalid .dx-placeholder,
::ng-deep .hs_label_invalid .dx-placeholder {
  color: rgb(244, 67, 54);
}



// ::ng-deep .dx-state-focused .dx-placeholder {
// color: red;
// }


::ng-deep .HRD_datetimepicker .dx-state-focused .dx-dropdowneditor-input-wrapper {
  padding-bottom: 2px;
}

::ng-deep .dx-dropdowneditor-input-wrapper,
::ng-deep .dx-state-disabled .dx-dropdowneditor-input-wrapper {
  padding-bottom: 1px;
}

::ng-deep .dx-texteditor.dx-editor-underlined.dx-state-hover:after {
  border-bottom: 1px solid rgba(0, 0, 0, .42);
}

::ng-deep .HRD_datetimepicker .dx-texteditor.dx-editor-underlined.dx-state-focused:after {
  border-bottom: 2px solid rgb(120, 183, 229);
}

::ng-deep .HRD_datetimepicker .dx-texteditor.dx-editor-underlined.dx-invalid:after,
::ng-deep .HRD_datetimepicker .dx-texteditor.dx-editor-underlined.hs_label_invalid:after {
  border-bottom-color: rgb(244, 67, 54);
}


.dx-invalid.dx-texteditor.dx-state-focused:before {
  border: 0px none;
}

.hs_label {
  margin-top: -3px;
  // height: 0.84375em;
  height: 0.864em;
  transform: scale(0.75) perspective(100px) translateZ(0.001px);
  //   transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px);
  width: 133.33333%;
  margin-left: -17%;
  font-size: 14px;
  overflow: inherit;
}

// ::ng-deep .dx-state-focused .dx-placeholder {
//   width: 133.33333%;
// }


.hs_label_focused {
  color: rgb(120, 183, 229);
}


::ng-deep .HRD_datetimepicker .dx-invalid-message>.dx-overlay-content {
  transform: none !important;
  padding: 0 !important;
  top: 21px !important;
  background: white;
  font-size: .85em;
  color: rgb(244, 67, 54);
}

::ng-deep .HRD_datetimepicker .dx-icon-close {
  font-size: 14px;
  font-family: Material Icons;
}

::ng-deep .HRD_datetimepicker .dx-state-disabled .dx-icon-close {
  color: rgba(11, 58, 98, 0.4);
}

::ng-deep .HRD_datetimepicker .dx-icon-event {
  // color: rgba(11, 58, 98, 0.84); //$hrColor-DarkBlue
  color: rgba(0, 0, 0, 0.54);

}

::ng-deep .HRD_datetimepicker .dx-state-disabled .dx-icon-event {
  color: rgba(0, 0, 0, 0.26);
}

::ng-deep .HRD_datetimepicker .dx-icon-close:before {
  content: "\e5cd";
}

::ng-deep .HRD_datetimepicker .dx-editor-underlined .dx-texteditor-buttons-container>.dx-button.dx-button-mode-text {
  margin: 0;
}

::ng-deep .HRD_datetimepicker .dx-invalid.dx-texteditor.dx-show-invalid-badge .dx-texteditor-input-container:after {
  display: none;
}


// ::ng-deep .HRD_datetimepicker .dx-texteditor.dx-editor-underlined .dx-placeholder::before,
// ::ng-deep .HRD_datetimepicker .dx-texteditor.dx-editor-underlined .dx-texteditor-input {
//   padding: 5.6px 0 5px; //allign top of dx-input box to mat-input
// }
