.ko-placeholder-text {
  color: #aaa;
}

label.label-top {
  margin: 0 0 4px 0;
  clear: both;
  display: inline-block;
  font-size: 14px;
}
label.label-inline {
  margin: 0 0 0 4px;
  float: left;
  display: inline-block;
  width: auto;
}

.fieldset + label {
  margin-top: 8px;
}

.sp-grouped + .sp-grouped {
  margin: 0;
}

.sp-headline + .sp-grouped {
  margin-top: 16px;
}

.placeholder {
  position: relative;
  float: left;
  width: 760px;
}

.placeholder-left {
  display: block;
  float: left;
  width: 362px;
}

.placeholder-right {
  display: block;
  float: right;
  width: 362px;
}

.placeholder-field {
  display: block;
  float: left;
  margin: 2px 0 20px 0;
  width: 99%;
}

.placeholder-field .field {
  display: inline-block;
  float: left;
  width: 99%;
}

.placeholder-field .paddingLeft {
  padding-left: 140px;
}

.placeholder-field .fieldSubmit {
  display: inline-block;
  float: left;
  width: 99%;
  padding-top: 10px;
}

.placeholder-field.inline label {
  display: block;
  float: left;
  width: 130px;
  padding-right: 10px;
  line-height: 24px;
}
.placeholder-field.label-short label {
  width: 110px;
}

.placeholder-button input[type=Submit] {
  float: right !important;
  margin-top: 3px;
}

.placeholder-field .first {
  margin-left: 140px;
  float: left;
}

.placeholder-field .second {
  margin-left: 5px;
  float: left;
}

input,
select,
textarea {
  font-family: Inter, Arial, sans-serif;
  margin: 0;
  padding: 0 4px 0 4px;
  box-sizing: border-box;
  font-size: 13px;
  line-height: 1.2;
  overflow: hidden;
  border-radius: 0;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  input,
  select,
  textarea {
    -webkit-appearance: none;
  }
}
@media print {
  input,
  select,
  textarea {
    border-top-color: transparent !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    box-shadow: none !important;
  }
}
@media print {
  input,
  select,
  textarea {
    font-size: 14px;
  }
}

button, .button-with-icon {
  font-family: Inter, Arial, sans-serif;
  -webkit-appearance: none;
}
@media print {
  button, .button-with-icon {
    display: none !important;
  }
}

input[type=time],
input.time {
  width: 80px;
}

.placeholder-field .radio-true input[type=radio] {
  visibility: hidden;
}

.placeholder-field .radio-true {
  display: none;
}

.placeholder-field .bg-none {
  background-image: none;
}

.placeholder-field .input_radio {
  display: block;
  float: left;
  padding-right: 20px;
}
.placeholder-field .input_radio input[type=radio] {
  display: block;
  float: left;
  margin-right: 8px;
}
.placeholder-field .input_radio label {
  white-space: nowrap;
  float: right;
  line-height: 14px;
}
.placeholder-field .input_radio label.day {
  width: 60px;
}
.placeholder-field .input_radio label.partial {
  width: 60px;
}

select {
  background-color: #fff;
  background-image: url("../../Images/Sprites/arrow_down.png");
  background-position: calc(100% - 12px) center;
  background-repeat: no-repeat;
  background-size: 10px;
  -webkit-appearance: none;
  border-width: 1px;
  display: inline-block;
  padding: 9px 24px 9px 12px;
  border-radius: 4px;
  border-color: var(--color-input-border, #ccc);
  border-style: solid;
  border-width: 1px;
  font-size: 14px;
}

select::-ms-expand {
  display: none;
}

textarea {
  overflow: auto;
  background: none repeat scroll 0 0 #FFF;
  border-color: var(--color-input-border, #ccc);
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  display: inline-block;
  line-height: 17px;
  margin: 0;
  padding: 6px 4px 4px;
  min-height: 40px;
  height: auto !important;
  height: 70px; /* IE6 min-hight fix */
  width: 100%;
  box-sizing: border-box;
}

input[type=text],
input[type=email],
input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=time],
input[type=number],
input[type=password],
.k-autocomplete .k-input {
  background-color: var(--color-base, #fff);
  border-color: var(--color-input-border, #ccc);
  border-style: solid;
  border-width: 1px;
  border-radius: 0;
  display: inline-block;
  min-height: 16px;
  margin: 0;
  padding: 3px 1px 2px 4px;
  padding: 4px;
  box-sizing: border-box;
  box-shadow: none;
  transition: background-color 150ms ease-in-out;
}

.input-search {
  padding-right: 20px;
  background: url("../../Images/Sprites/Icons.png") no-repeat;
  background-position: right 5px top -4617px;
}

input.fill,
select.fill {
  width: 100%;
}
input.required,
select.required {
  border: 1px solid var(--color-required, orange);
}
input.error,
select.error {
  border: 1px solid var(--color-error, #DB5555) !important;
  color: #000;
}
input.error:focus,
select.error:focus {
  background-color: #fff !important;
}
input.error:hover,
select.error:hover {
  background-color: var(--color-error-lighten-48p, #fff);
}

::-webkit-calendar-picker-indicator {
  background-color: #fff;
  background-image: none !important;
  -webkit-appearance: none;
  height: 6px;
  width: 8px;
  padding: 4px;
  border: 1px solid #bbb;
  background-color: #eee;
  margin: 0;
  float: right;
}

input[type=date]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type=date],
input.date-picker {
  border: 0;
  cursor: pointer;
  /*font-size: 20px;*/
  font-size: 14px;
  font-weight: 400;
  /*font-weight: 500;*/
  background-image: url("../../Images/SVGs/Common/datepicker-icon.svg");
  background-position: calc(100% - 8px) center;
  background-size: 20px;
  background-repeat: no-repeat;
}

input[type=date].smaller,
input.date-picker.smaller {
  background: #fff url("../../Images/Sprites/calendar_control_sm.png") right center no-repeat;
  cursor: pointer;
  height: 18px !important;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  input[type=date],
  input.date-picker,
  input.date-picker.smaller {
    background-image: url("../../Images/SVGs/Common/datepicker-icon.svg");
    padding-right: 20px;
  }
  input[type=date],
  input.date-picker {
    background-image: url("../../Images/SVGs/Common/datepicker-icon.svg");
  }
  select {
    border-width: 1px;
    display: inline-block;
    border-radius: 4px;
    border-color: var(--color-input-border, #ccc);
    border-style: solid;
    background-color: #fff;
    background-image: url("../../Images/Sprites/arrow_down.png");
    background-position: calc(100% - 12px) center;
    background-repeat: no-repeat;
    background-size: 10px;
  }
}
.dateSelector input.date-picker {
  font-size: 20px;
  font-weight: 500;
  background-image: url("../../Images/SVGs/Common/chevron-down.svg");
  width: 155px;
}

input[type=time]::-webkit-clear-button,
input[type=time]::-webkit-inner-spin-button {
  display: none;
}

input[type=text][disabled=disabled],
input[type=email][disabled=disabled],
input[type=date][disabled=disabled],
input[type=time][disabled=disabled],
input[type=datetime][disabled=disabled],
input[type=datetime-local][disabled=disabled],
input[type=number][disabled=disabled],
input[type=password][disabled=disabled],
textarea [disabled=disabled],
select [disabled=disabled] {
  background: none repeat scroll 0 0 #F5F5F5;
  border: 1px solid #E5E5E5;
}

input[type=text][disabled=disabled]:hover,
input[type=date][disabled=disabled]:hover,
input[type=time][disabled=disabled]:hover,
input[type=number][disabled=disabled]:hover,
input[type=password][disabled=disabled]:hover,
textarea [disabled=disabled]:hover,
select [disabled=disabled]:hover {
  box-shadow: none;
}

.field-validation-error,
.field-validation-valid,
.validation-summary-valid {
  display: none;
}

.validation-summary-errors {
  font-weight: bold;
  color: var(--color-error, #DB5555);
  padding-bottom: 16px;
}
.validation-summary-errors > ul > li {
  font-size: 13px;
  font-weight: normal;
}

input.input-validation-error[type=text],
input.input-validation-error[type=email],
input.input-validation-error[type=date],
input.input-validation-error[type=time],
input.input-validation-error[type=datetime],
input.input-validation-error[type=datetime-local],
input.input-validation-error[type=number],
input.input-validation-error[type=password],
textarea.input-validation-error,
select.select-validation-error {
  border: 1px solid #FFA443;
}

input.input-validation-error[type=text]:focus,
input.input-validation-error[type=email]:focus,
input.input-validation-error[type=date]:focus,
input.input-validation-error[type=time]:focus,
input.input-validation-error[type=datetime]:focus,
input.input-validation-error[type=datetime-local]:focus,
input.input-validation-error[type=number]:focus,
input.input-validation-error[type=password]:focus,
textarea.input-validation-error:focus,
select.select-validation-error:focus {
  border: 1px solid #FFA443;
}

input[type=checkbox] {
  accent-color: var(--color-active, #317cd5);
  height: 16px;
  line-height: 16px;
  margin: 0;
  width: 13px;
  cursor: pointer;
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  appearance: checkbox;
}
input[type=checkbox] + span {
  margin-left: 4px;
}

input[type=radio] {
  accent-color: var(--color-active, #317cd5);
  margin: 0;
  cursor: pointer;
  -webkit-appearance: radio;
  -moz-appearance: radio;
  appearance: radio;
}

input.readonly,
input.readonly:active,
input.readonly:focus,
input.readonly:hover {
  color: #2e2e2e;
  border: 1px dotted #aaa;
  box-shadow: none;
}

.placeholder-field .field {
  display: inline-block;
  float: left;
  width: 99%;
}
.placeholder-field .paddingLeft {
  padding-left: 140px;
}

button, .button-with-icon, .button {
  -webkit-appearance: none;
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  font-weight: 500;
  color: var(--color-button-text, #070707);
  cursor: pointer;
  display: block;
  transition: opacity 250ms ease-in-out, color 250ms ease-in-out, background-color 250ms ease-in-out, border-color 250ms ease-in-out;
  font-size: 12px;
  padding: 6px 20px;
  text-align: center;
  background-color: var(--color-button-bg, #fff);
  height: auto;
  border-color: var(--color-neutral-4, #ccc);
  outline: none;
}
button:hover, .button-with-icon:hover, .button:hover {
  border-color: var(--color-neutral-3, #888);
  cursor: pointer;
  color: var(--color-neutral, #000);
  text-shadow: none;
}
button:active, .button-with-icon:active, .button:active {
  background-color: var(--color-active-lighten-8p, #5392DC);
  text-shadow: none;
}
button[disabled=disabled], [disabled=disabled].button-with-icon, button.disabled, .disabled.button-with-icon, .button[disabled=disabled], .button.disabled {
  background: transparent;
  border-color: var(--color-neutral-4, #ccc) !important;
  color: var(--color-neutral-4, #ccc) !important;
  box-shadow: none;
  text-shadow: none;
  cursor: default;
}
button[disabled=disabled]:hover, [disabled=disabled].button-with-icon:hover, button.disabled:hover, .disabled.button-with-icon:hover, .button[disabled=disabled]:hover, .button.disabled:hover {
  box-shadow: none;
  text-shadow: none;
}
button.button-inline, .button-inline.button-with-icon, .button.button-inline {
  display: inline-block;
  float: left;
  clear: none;
}
button.button-icon, .button-icon.button-with-icon, .button.button-icon {
  padding: 4px;
  display: inline-block;
}
button.button-icon.button-delete, .button-icon.button-delete.button-with-icon, .button.button-icon.button-delete {
  background-color: rgba(219, 85, 85, 0.2);
  border-color: rgba(219, 85, 85, 0.3);
  color: var(--color-hot, #DB5555);
}
button.button-icon.button-delete:hover, .button-icon.button-delete.button-with-icon:hover, .button.button-icon.button-delete:hover {
  background-color: rgba(219, 85, 85, 0.35);
  border-color: rgba(219, 85, 85, 0.7);
  color: var(--color-hot-darken-10p, #d12c2c);
}
button.button-icon.button-add, .button-icon.button-add.button-with-icon, .button.button-icon.button-add {
  background-color: rgba(59, 188, 102, 0.2);
  border-color: rgba(59, 188, 102, 0.3);
  color: var(--color-positive, #3BBC66);
}
button.button-icon.button-add:hover, .button-icon.button-add.button-with-icon:hover, .button.button-icon.button-add:hover {
  background-color: rgba(59, 188, 102, 0.35);
  border-color: rgba(59, 188, 102, 0.7);
  color: var(--color-positive-darken-10p, #2f9551);
}
button.button-icon.button-edit, .button-icon.button-edit.button-with-icon, .button.button-icon.button-edit {
  background-color: rgba(255, 149, 13, 0.2);
  border-color: rgba(255, 149, 13, 0.3);
  color: var(--color-warning, #FF950D);
}
button.button-icon.button-edit:hover, .button-icon.button-edit.button-with-icon:hover, .button.button-icon.button-edit:hover {
  background-color: rgba(255, 149, 13, 0.35);
  border-color: rgba(255, 149, 13, 0.7);
  color: var(--color-warning-darken-10p, #d97a00);
}
button.button-icon > i, .button-icon.button-with-icon > i, .button.button-icon > i {
  pointer-events: none;
}
button.button-rgba, .button-rgba.button-with-icon, .button.button-rgba {
  background-color: rgba(49, 124, 213, 0.2);
  border-color: rgba(49, 124, 213, 0.3);
  color: var(--color-active, #317cd5);
}
button.button-rgba:hover, .button-rgba.button-with-icon:hover, .button.button-rgba:hover {
  background-color: rgba(49, 124, 213, 0.35);
  border-color: rgba(49, 124, 213, 0.7);
  color: var(--color-active-darken-10p, #2464af);
}
button.button-copmact, .button-copmact.button-with-icon, .button.button-copmact {
  padding: 6px;
}

.button-with-icon {
  padding-left: 36px;
  background-image: url("../../Images/Sprites/Icons.png");
  background-repeat: no-repeat;
  background-position-x: 16px;
  background-size: 16px auto;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .button-with-icon {
    background-image: url("../../Images/Sprites/Icons@2x.png");
  }
}
.button-with-icon.btn-with-icon-disabled {
  background-position: 16px -5998px;
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}
.button-with-icon.btn-with-icon-disabled:hover {
  box-shadow: none;
  border-color: rgb(225.8, 225.8, 225.8) rgb(200.3, 200.3, 200.3) rgb(169.7, 169.7, 169.7) rgb(200.3, 200.3, 200.3);
}

.button-energized {
  background-color: var(--color-energized, #31c31d);
  border-color: var(--color-energized-lighter, #4cea36) var(--color-energized-darker, #28b413) var(--color-energized-darker, #28b413) var(--color-energized-darker, #28b413);
  color: var(--color-base, #fff);
}
.button-energized:hover {
  border-color: var(--color-energized-darker, #28b413) var(--color-energized-darker, #269716) var(--color-energized-darker, #269716) var(--color-energized-darker, #269716);
  box-shadow: none;
  background-color: var(--color-energized-darken-5p, #2bad1a);
  color: var(--color-based-darken-5p, #f2f2f2);
}

.button-arrow {
  width: 28px;
  padding: 0;
  min-height: 36px;
  margin: 0 4px 0 0;
}
.button-arrow > * {
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  height: 18px;
  width: 16px;
  vertical-align: middle;
  display: inline-block;
}
.button-arrow.arrow-prev > * {
  background-image: url("../../Images/SVGs/Common/chevron-right.svg");
}
.button-arrow.arrow-next > * {
  background-image: url("../../Images/SVGs/Common/chevron-left.svg");
}

.button-filters {
  border-radius: 50%;
  height: 40px;
  width: 40px;
  border: 0;
  padding: 3px 0 0 0;
}
.button-filters > * {
  background-image: url("../../Images/SVGs/Common/filter-icon.svg");
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: center;
  width: 20px;
  height: 20px;
}
.button-filters.filters-pressed {
  background-color: var(--color-neutral-5, #eee);
}
.button-filters.filters-active {
  background-color: var(--color-neutral-4, #ccc);
}

.placeholder-field a.buttonLink {
  -webkit-appearance: none;
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  font-weight: 500;
  color: var(--color-button-text, #070707);
  cursor: pointer;
  display: block;
  transition: opacity 250ms ease-in-out, color 250ms ease-in-out, background-color 250ms ease-in-out, border-color 250ms ease-in-out;
  font-size: 12px;
  padding: 6px 20px;
  text-align: center;
  background-color: var(--color-button-bg, #fff);
  height: auto;
  border-color: var(--color-neutral-4, #ccc);
  outline: none;
  float: left;
}
.placeholder-field a.buttonLink:hover {
  border-color: var(--color-neutral-3, #888);
  cursor: pointer;
  color: var(--color-neutral, #000);
  text-shadow: none;
}
.placeholder-field a.buttonLink:active {
  background-color: var(--color-active-lighten-8p, #5392DC);
  text-shadow: none;
}
.placeholder-field a.buttonLink[disabled=disabled], .placeholder-field a.buttonLink.disabled {
  background: transparent;
  border-color: var(--color-neutral-4, #ccc) !important;
  color: var(--color-neutral-4, #ccc) !important;
  box-shadow: none;
  text-shadow: none;
  cursor: default;
}
.placeholder-field a.buttonLink[disabled=disabled]:hover, .placeholder-field a.buttonLink.disabled:hover {
  box-shadow: none;
  text-shadow: none;
}

.placeholder-field .submitRequest.button-active,
input.buttonSubmit.button-active,
input[type=Submit].button-active,
input[type=Button].button-active, button.button-active, .button.button-active, .button-active.button-with-icon {
  background-color: var(--color-active, #317cd5);
  color: var(--color-base, #fff);
  border: none;
}
.placeholder-field .submitRequest.button-active:hover,
input.buttonSubmit.button-active:hover,
input[type=Submit].button-active:hover,
input[type=Button].button-active:hover, button.button-active:hover, .button.button-active:hover, .button-active.button-with-icon:hover {
  background-color: var(--color-active-darken-8p, #2568b8);
  color: var(--color-base, #fff);
}
.placeholder-field .disabled.submitRequest.button-active,
input.disabled.buttonSubmit.button-active,
input.disabled[type=Submit].button-active,
input.disabled[type=Button].button-active, button.disabled.button-active, .disabled.button.button-active, .disabled.button-active.button-with-icon {
  pointer-events: none;
  background-color: var(--color-active-disabled-A, rgba(51, 51, 51, 0.37));
  color: var(--color-base, #fff) !important;
}

.placeholder-field .submitRequest,
input.buttonSubmit,
input[type=Submit],
input[type=Button] {
  -webkit-appearance: none;
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  font-weight: 500;
  color: var(--color-button-text, #070707);
  cursor: pointer;
  display: block;
  transition: opacity 250ms ease-in-out, color 250ms ease-in-out, background-color 250ms ease-in-out, border-color 250ms ease-in-out;
  font-size: 12px;
  padding: 6px 20px;
  text-align: center;
  background-color: var(--color-button-bg, #fff);
  height: auto;
  border-color: var(--color-neutral-4, #ccc);
  outline: none;
  border: none;
  padding-top: 8px;
  padding-bottom: 8px;
}
.placeholder-field .submitRequest:hover,
input.buttonSubmit:hover,
input[type=Submit]:hover,
input[type=Button]:hover {
  border-color: var(--color-neutral-3, #888);
  cursor: pointer;
  color: var(--color-neutral, #000);
  text-shadow: none;
}
.placeholder-field .submitRequest:active,
input.buttonSubmit:active,
input[type=Submit]:active,
input[type=Button]:active {
  background-color: var(--color-active-lighten-8p, #5392DC);
  text-shadow: none;
}
.placeholder-field .submitRequest[disabled=disabled], .placeholder-field .submitRequest.disabled,
input.buttonSubmit[disabled=disabled],
input.buttonSubmit.disabled,
input[type=Submit][disabled=disabled],
input[type=Submit].disabled,
input[type=Button][disabled=disabled],
input[type=Button].disabled {
  background: transparent;
  border-color: var(--color-neutral-4, #ccc) !important;
  color: var(--color-neutral-4, #ccc) !important;
  box-shadow: none;
  text-shadow: none;
  cursor: default;
}
.placeholder-field .submitRequest[disabled=disabled]:hover, .placeholder-field .submitRequest.disabled:hover,
input.buttonSubmit[disabled=disabled]:hover,
input.buttonSubmit.disabled:hover,
input[type=Submit][disabled=disabled]:hover,
input[type=Submit].disabled:hover,
input[type=Button][disabled=disabled]:hover,
input[type=Button].disabled:hover {
  box-shadow: none;
  text-shadow: none;
}
.placeholder-field .submitRequest.small,
input.buttonSubmit.small,
input[type=Submit].small,
input[type=Button].small {
  font-size: 11px;
  min-height: 22px;
  height: 24px;
  line-height: 1;
  padding-top: 0;
  padding-bottom: 0;
}
.placeholder-field .submitRequest.small.compact,
input.buttonSubmit.small.compact,
input[type=Submit].small.compact,
input[type=Button].small.compact {
  padding-left: 10px;
  padding-right: 10px;
}
.placeholder-field .submitRequest.button-text,
input.buttonSubmit.button-text,
input[type=Submit].button-text,
input[type=Button].button-text {
  border: none;
  color: var(--color-neutral-3, #888);
}
.placeholder-field .submitRequest.button-text:hover,
input.buttonSubmit.button-text:hover,
input[type=Submit].button-text:hover,
input[type=Button].button-text:hover {
  background-color: var(--color-active-darken-8p, #2568b8);
  color: var(--color-base, #fff);
}
.placeholder-field .submitRequest:focus,
input.buttonSubmit:focus,
input[type=Submit]:focus,
input[type=Button]:focus {
  border-color: var(--color-button-depressed-darken-10p, #2464af) var(--color-button-depressed-darken-5p, #2870c4) var(--color-button-depressed-darken-5p, #2870c4) var(--color-button-depressed-darken-5p, #2870c4);
  text-shadow: none;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3);
  background: linear-gradient(to bottom, var(--color-button-depressed-gradient, #317cd5), var(--color-button-depressed-gradient, #317cd5));
  color: var(--color-base, #fff);
}
.placeholder-field .submitRequest.popup-submit,
input.buttonSubmit.popup-submit,
input[type=Submit].popup-submit,
input[type=Button].popup-submit {
  background-color: var(--color-active, #317cd5);
  font-size: 14px;
  color: var(--color-base, #fff) !important;
  padding: 8px 24px;
  border-radius: 6px;
}
.placeholder-field .submitRequest.popup-submit.disabled,
input.buttonSubmit.popup-submit.disabled,
input[type=Submit].popup-submit.disabled,
input[type=Button].popup-submit.disabled {
  background-color: var(--color-active-disabled-A, rgba(51, 51, 51, 0.37)) !important;
}
.placeholder-field .submitRequest.popup-cancel,
input.buttonSubmit.popup-cancel,
input[type=Submit].popup-cancel,
input[type=Button].popup-cancel {
  font-size: 14px;
  padding: 8px 24px;
  color: var(--color-neutral-1, #333);
}

input.buttonSubmit.align-right,
input[type=Submit].align-right,
input[type=Button].align-right {
  float: right;
  margin-left: 8px;
}

.section-BankTimesheetsDisclamer .placeholder-field {
  width: 100%;
}
.section-BankTimesheetsDisclamer .placeholder-field .buttonSubmit {
  margin-left: 5px;
  margin-top: 10px;
  float: right;
  min-width: 100px;
  font-size: 14px;
}
.section-BankTimesheetsDisclamer .ui-widget-body.outlined-container {
  margin-top: 20px;
  width: 600px;
}

.placeholder-field .studyDayReasons {
  width: 250px;
}

.placeholder-field .submitCancel {
  width: 90px;
  margin-right: 5px;
}

.placeholder-field .submitUpdate {
  width: 90px;
}

.label-float {
  line-height: 26px;
  float: left;
  clear: none;
}

select.expand {
  width: auto !important;
}

.field-with-update > input[type=text],
.field-with-update > input[type=number],
.field-with-update > input[type=email],
.field-with-update > input[type=password],
.field-with-update > input[type=date],
.field-with-update > input[type=time],
.field-with-update > input[type=datetime],
.field-with-update > input[type=datetime-local] {
  float: left;
  margin-right: 8px;
}

@-webkit-keyframes shake-ani {
  /*10%, 90% {
    transform: translate3d(-12px, 0, 0);
  }*/
  /*20%, 80% {
    transform: translate3d(12px, 0, 0);
  }*/
  30%, 50%, 70% {
    transform: translate3d(-12px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(12px, 0, 0);
  }
}
@keyframes shake-ani {
  /*10%, 90% {
    transform: translate3d(-12px, 0, 0);
  }*/
  /*20%, 80% {
    transform: translate3d(12px, 0, 0);
  }*/
  30%, 50%, 70% {
    transform: translate3d(-12px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(12px, 0, 0);
  }
}
.k-autocomplete {
  border-width: 0;
  box-shadow: none;
}
.k-autocomplete.k-header {
  display: block;
  width: 100%;
}
.k-autocomplete.k-header.input-search {
  padding-right: 0;
}
.k-autocomplete .k-input {
  line-height: 1;
  height: inherit;
  padding-right: 20px;
}

.k-list-container {
  background-color: #fff;
}
.k-list-container .k-list > .k-state-hover {
  background-color: var(--color-neutral-4, #ccc);
}
.k-list-container .k-list > .k-state-focused {
  background-color: var(--color-neutral-4, #ccc) !important;
}

.controls-wrapper-right {
  float: right;
}
.controls-wrapper-right > * {
  float: left;
}
.controls-wrapper-right > select {
  width: 210px;
  margin-right: 5px;
  cursor: pointer;
}
.controls-wrapper-right > label {
  font-size: 12px;
  margin-right: 3px;
  margin-top: 1px;
}

.form-control-boxed {
  display: inline-flex;
  position: relative;
  align-items: center;
}
.form-control-boxed > label {
  position: absolute;
  top: -7px;
  left: 10px;
  padding: 0 4px;
  background-color: var(--color-base, #fff);
  color: var(--form-control-boxed-color, #9144DE);
  width: auto !important;
}
.form-control-boxed > input, .form-control-boxed > select {
  padding: 12px;
  color: var(--color-neutral-1A, rgba(0, 0, 0, 0.8));
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid var(--color-neutral-7A, rgba(0, 0, 0, 0.12));
}
.form-control-boxed > input[type=button], .form-control-boxed > select[type=button] {
  margin: 0 8px;
}
.form-control-boxed > input:focus, .form-control-boxed > select:focus {
  outline: none;
  border-color: var(--color-main-3, #9144DE);
}
.form-control-boxed button, .form-control-boxed .button-with-icon {
  margin-left: 16px;
}
.form-control-boxed > input:read-only:not(.input-upload) + label {
  pointer-events: none;
  color: var(--color-neutral-3, #888);
}
.form-control-boxed > select {
  padding: 12px 30px 12px 12px;
  line-height: 1.2em;
}
.form-control-boxed.full-width {
  width: 100%;
  display: flex;
}
.form-control-boxed.full-width > input[type=text],
.form-control-boxed.full-width > input[type=number],
.form-control-boxed.full-width > input[type=time],
.form-control-boxed.full-width > select {
  width: 100%;
  flex-grow: 1;
}
.form-control-boxed.partial-width > input[type=text],
.form-control-boxed.partial-width > input[type=number],
.form-control-boxed.partial-width > input[type=time],
.form-control-boxed.partial-width > select {
  width: 265px;
}
.form-control-boxed input:-webkit-autofill,
.form-control-boxed input:-webkit-autofill:hover,
.form-control-boxed textarea:-webkit-autofill,
.form-control-boxed textarea:-webkit-autofill:hover,
.form-control-boxed select:-webkit-autofill,
.form-control-boxed select:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0px 1000px var(--color-base, #fff) inset;
}

.form-control-inline label {
  margin-right: 16px;
}

.callouts-form .form-control-boxed > input[type=text],
.callouts-form .form-control-boxed > input[type=number],
.callouts-form .form-control-boxed > select {
  width: 215px;
}
.callouts-form .form-control-boxed > textarea {
  height: 235px !important;
  width: 100%;
}
.callouts-form .leave-request-form-column-first {
  flex: 0 0 300px;
}
.callouts-form .leave-request-form-column-second {
  flex: 0 0 40%;
}

.dialog-request-leave-form .form-control-boxed > input[type=text],
.dialog-request-leave-form .form-control-boxed > input[type=number],
.dialog-request-leave-form .form-control-boxed > select, .dialog-request-leave-form .form-control-boxed > textarea {
  width: 265px;
  height: auto;
}

.request-leave-form .form-control-boxed > input[type=text],
.request-leave-form .form-control-boxed > input[type=number],
.request-leave-form .form-control-boxed > select {
  width: 265px;
}
.request-leave-form .form-control-boxed > textarea {
  height: 235px !important;
  width: 100%;
}
.request-leave-form .leave-request-form-column-first {
  flex: 0 0 300px;
}
.request-leave-form .leave-request-form-column-second {
  flex: 0 0 40%;
}

.column-actions .button-icon {
  margin: 0 8px;
}