input[type="text"],
input[type="password"],
input[type="email"],
input[type="date"],
input[type="number"],
input[type="tel"],
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"],
button {
  font: 400 12px/1.3 "Verdana", sans-serif;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #fff;
  line-height: 1;
  outline: 0;
  color: white;
  border-radius: 1px;

  background-color: #0098da;
  background-size: 1px 100%, 20px 20px, 20px 20px, 20px 60%;
  background-position: right 20px center, right bottom, right bottom, right bottom;
  padding: 2.5px 6px;
  height: 24px;
  box-sizing: border-box;
  vertical-align: top;
}

textarea {
  background-color: #0098da;
  border: 1px solid white;
  border-radius: 1px;
}

input[disabled],
textarea[disabled],
select[disabled],
.select[disabled] {
  cursor: default;
  cursor: not-allowed;
}

.inverted,
input.inverted,
textarea.inverted,
button.inverted,
.daterange.inverted input {
  border: 1px solid #0098da;
  background-color: white;
  color: black;
}

input.redtype, input[type="text"][invalid="true"], input[type="date"][invalid="true"], input[type="number"][invalid="true"], input[type="tel"][invalid="true"], input[type="email"][invalid="true"], input[type="checkbox"][invalid="true"], input[type="time"][invalid="true"] {
  background: red;
  background-color: red !important;
  color: white !important;
}

input[type="radio"].redtype, input[type="radio"][invalid="true"] {
  outline: 3px solid red;
  outline-offset: 2px;
}

textarea.redtype, textarea[invalid="true"] {
  background: red;
  background-color: red !important;
  color: white !important;
}


*::placeholder {
  color: rgb(175, 199, 219);
}

*.inverted::placeholder {
  color: rgb(147, 178, 204);
}

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

select,
.select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #fff;
  line-height: 16px;
  outline: 0;
  color: white;
  border-radius: 1px;
  background: linear-gradient(white, white) no-repeat,
              linear-gradient(-135deg, rgba(255,255,255,0) 12px, #0098da 12px) no-repeat,
              linear-gradient(-225deg, rgba(255,255,255,0) 13px, #0098da 12px) no-repeat,
              linear-gradient(white, white) no-repeat;
  background-color: #0098da;
  background-size: 1px 100%, 17px 16px, 17px 18px, 17px 13px;
  background-position: right 18px center, right bottom, right bottom, right bottom;
  width: 310px;
  max-width: 100%;
  padding: 3px 6px 3px 6px;
  padding-right: 26px;
  height: 24px;
  box-sizing: border-box;
  vertical-align: top;
}

select.inverted,
.select.inverted {
  color: black;
  border: 1px solid #0098da;
  background: linear-gradient(#0098da, #0098da) no-repeat,
              linear-gradient(-135deg, rgba(255,255,255,0) 12px, white 12px) no-repeat,
              linear-gradient(-225deg, rgba(255,255,255,0) 13px, white 12px) no-repeat,
              linear-gradient(#0098da, #0098da) no-repeat;
  background-color: #fff;
  background-size: 1px 100%, 17px 16px, 17px 18px, 17px 13px;
  background-position: right 18px center, right bottom, right bottom, right bottom;
}

select.redtype,
select[invalid="true"],
.select.redtype,
.select[invalid="true"] {
  color: white;
  border-color: white;
  background: linear-gradient(white, white) no-repeat,
              linear-gradient(-135deg, rgba(255,255,255,0) 12px, red 12px) no-repeat,
              linear-gradient(-225deg, rgba(255,255,255,0) 13px, red 12px) no-repeat,
              linear-gradient(white, white) no-repeat;
  background-color: red;
  background-size: 1px 100%, 17px 16px, 17px 18px, 17px 13px;
  background-position: right 18px center, right bottom, right bottom, right bottom;
}

select:disabled,
.select:disabled,
select[disabled],
.select[disabled] {
  opacity:.8;
  cursor: default !important;
}

select option,
.select .option {
  background-color: white;/* #007AB0; */
  color: #007AB0; /* #fff; */
  /* text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); */
}



label:not(:empty),
label[for] {
  cursor: pointer;
}




textarea {
  -webkit-appearance: none;
  border-radius: 1px;
  padding: 2.5px 6px;
  border: 1px solid #0098da;
}


/* Required fields */

input:not([type="checkbox"])[required] {
  background: linear-gradient(red 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, red 1px, transparent 0px) no-repeat,
              linear-gradient(red 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, red 1px, transparent 0px) no-repeat,
              linear-gradient(red 7px, transparent 0px) no-repeat;
  background-position: top 2px right 2px, top 2px right 2px, top 11px right 2px, top 2px right 11px, top 4px right 4px;
  background-size: 10px 1px, 1px 10px, 10px 1px, 1px 10px, 6px 6px;

  background-color: #0098da;

  padding-right: 14px;
}

input:not([type="checkbox"])[required]:valid,
input:not([type="checkbox"])[required][valid],
input:not([type="checkbox"])[required].valid {
  background: linear-gradient(#0098da 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, #0098da 1px, transparent 0px) no-repeat,
              linear-gradient(#0098da 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, #0098da 1px, transparent 0px) no-repeat,
              linear-gradient(#0098da 7px, transparent 0px) no-repeat;
  background-position: top 2px right 2px, top 2px right 2px, top 11px right 2px, top 2px right 11px, top 4px right 4px;
  background-size: 10px 1px, 1px 10px, 10px 1px, 1px 10px, 6px 6px;

  background-color: #0098da;
}

input:not([type="checkbox"])[required] {
  background: none;
}


input:not([type="checkbox"]).inverted[required] {
  background: linear-gradient(red 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, red 1px, transparent 0px) no-repeat,
              linear-gradient(red 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, red 1px, transparent 0px) no-repeat,
              linear-gradient(red 7px, transparent 0px) no-repeat;
  background-position: top 2px right 2px, top 2px right 2px, top 11px right 2px, top 2px right 11px, top 4px right 4px;
  background-size: 10px 1px, 1px 10px, 10px 1px, 1px 10px, 6px 6px;

  background-color: white;
}

input:not([type="checkbox"]).inverted[required][invalid="true"] {
  background: linear-gradient(red 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, red 1px, transparent 0px) no-repeat,
              linear-gradient(red 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, red 1px, transparent 0px) no-repeat,
              linear-gradient(red 7px, transparent 0px) no-repeat;
  background-position: top 2px right 2px, top 2px right 2px, top 11px right 2px, top 2px right 11px, top 4px right 4px;
  background-size: 10px 1px, 1px 10px, 10px 1px, 1px 10px, 6px 6px;
  background-color: red !important;
}

input:not([type="checkbox"]).inverted[required]:valid,
input:not([type="checkbox"]).inverted[required][valid],
input:not([type="checkbox"]).inverted[required].valid {
  background: linear-gradient(#0098da 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, #0098da 1px, transparent 0px) no-repeat,
              linear-gradient(#0098da 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, #0098da 1px, transparent 0px) no-repeat,
              linear-gradient(#0098da 7px, transparent 0px) no-repeat;
  background-position: top 2px right 2px, top 2px right 2px, top 11px right 2px, top 2px right 11px, top 4px right 4px;
  background-size: 10px 1px, 1px 10px, 10px 1px, 1px 10px, 6px 6px;

  background-color: white;
}


textarea[required]{
  background: linear-gradient(red 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, red 1px, transparent 0px) no-repeat,
              linear-gradient(red 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, red 1px, transparent 0px) no-repeat,
              linear-gradient(red 7px, transparent 0px) no-repeat;
  background-position: top 2px right 2px, top 2px right 2px, top 11px right 2px, top 2px right 11px, top 4px right 4px;
  background-size: 10px 1px, 1px 10px, 10px 1px, 1px 10px, 6px 6px;

  background-color: #0098da;

  padding-right: 14px;
}

textarea[required]:valid, textarea[required][valid], textarea[required].valid {
  background: linear-gradient(#0098da 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, #0098da 1px, transparent 0px) no-repeat,
              linear-gradient(#0098da 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, #0098da 1px, transparent 0px) no-repeat,
              linear-gradient(#0098da 7px, transparent 0px) no-repeat;
  background-position: top 2px right 2px, top 2px right 2px, top 11px right 2px, top 2px right 11px, top 4px right 4px;
  background-size: 10px 1px, 1px 10px, 10px 1px, 1px 10px, 6px 6px;

  background-color: #0098da;
}


textarea[required].redtype, textarea[required][invalid="true"], textarea[required].invalid {
  background: linear-gradient(red 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, red 1px, transparent 0px) no-repeat,
              linear-gradient(red 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, red 1px, transparent 0px) no-repeat,
              linear-gradient(red 7px, transparent 0px) no-repeat;
  background-position: top 2px right 2px, top 2px right 2px, top 11px right 2px, top 2px right 11px, top 4px right 4px;
  background-size: 10px 1px, 1px 10px, 10px 1px, 1px 10px, 6px 6px;

  background-color: red !important;
}


textarea.inverted[required]{
  background: linear-gradient(red 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, red 1px, transparent 0px) no-repeat,
              linear-gradient(red 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, red 1px, transparent 0px) no-repeat,
              linear-gradient(red 7px, transparent 0px) no-repeat;
  background-position: top 2px right 2px, top 2px right 2px, top 11px right 2px, top 2px right 11px, top 4px right 4px;
  background-size: 10px 1px, 1px 10px, 10px 1px, 1px 10px, 6px 6px;

  background-color: white;
}

textarea.inverted[required][invalid="true"]{
  background: linear-gradient(red 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, red 1px, transparent 0px) no-repeat,
              linear-gradient(red 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, red 1px, transparent 0px) no-repeat,
              linear-gradient(red 7px, transparent 0px) no-repeat;
  background-position: top 2px right 2px, top 2px right 2px, top 11px right 2px, top 2px right 11px, top 4px right 4px;
  background-size: 10px 1px, 1px 10px, 10px 1px, 1px 10px, 6px 6px;
  background-color: red !important;
}

textarea.inverted[required]:valid, textarea.inverted[required][valid], textarea.inverted[required].valid {
  background: linear-gradient(#0098da 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, #0098da 1px, transparent 0px) no-repeat,
              linear-gradient(#0098da 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, #0098da 1px, transparent 0px) no-repeat,
              linear-gradient(#0098da 7px, transparent 0px) no-repeat;
  background-position: top 2px right 2px, top 2px right 2px, top 11px right 2px, top 2px right 11px, top 4px right 4px;
  background-size: 10px 1px, 1px 10px, 10px 1px, 1px 10px, 6px 6px;

  background-color: white;
}


select[required],
.select[required] {
  background: linear-gradient(#fff, #fff) no-repeat,
              linear-gradient(-135deg, rgba(255,255,255,0) 12px, #0098da 12px) no-repeat,
              linear-gradient(-225deg, rgba(255,255,255,0) 13px, #0098da 12px) no-repeat,
              linear-gradient(#fff, #fff) no-repeat,
              linear-gradient(red 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, red 1px, transparent 0px) no-repeat,
              linear-gradient(red 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, red 1px, transparent 0px) no-repeat,
              linear-gradient(red 7px, transparent 0px) no-repeat, #0098da;
  background-position: right 18px center, right bottom, right bottom, right bottom, top 3px right 22px, top 3px right 22px, top 12px right 22px, top 3px right 31px, top 5px right 24px;
  background-size: 1px 100%, 17px 16px, 17px 18px, 17px 13px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 6px 6px;
  padding-right: 34px;
}

select[required]:valid, select[required][valid], select[required].valid,
.select[required]:valid, .select[required][valid], .select[required].valid {
  background: linear-gradient(#fff, #fff) no-repeat,
              linear-gradient(-135deg, rgba(255,255,255,0) 12px, #0098da 12px) no-repeat,
              linear-gradient(-225deg, rgba(255,255,255,0) 13px, #0098da 12px) no-repeat,
              linear-gradient(#fff, #fff) no-repeat,
              linear-gradient(#fff 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, #fff 1px, transparent 0px) no-repeat,
              linear-gradient(#fff 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, #fff 1px, transparent 0px) no-repeat,
              linear-gradient(#fff 7px, transparent 0px) no-repeat, #0098da;
  background-position: right 18px center, right bottom, right bottom, right bottom, top 3px right 22px, top 3px right 22px, top 12px right 22px, top 3px right 31px, top 5px right 24px;
  background-size: 1px 100%, 17px 16px, 17px 18px, 17px 13px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 6px 6px;
}


select.inverted[required],
.select.inverted[required] {
  background: linear-gradient(#0098da, #0098da) no-repeat,
              linear-gradient(-135deg, rgba(255,255,255,0) 12px, white 12px) no-repeat,
              linear-gradient(-225deg, rgba(255,255,255,0) 13px, white 12px) no-repeat,
              linear-gradient(#0098da, #0098da) no-repeat,
              linear-gradient(red 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, red 1px, transparent 0px) no-repeat,
              linear-gradient(red 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, red 1px, transparent 0px) no-repeat,
              linear-gradient(red 7px, transparent 0px) no-repeat, #fff;
  background-position: right 18px center, right bottom, right bottom, right bottom, top 3px right 22px, top 3px right 22px, top 12px right 22px, top 3px right 31px, top 5px right 24px;
  background-size: 1px 100%, 17px 16px, 17px 18px, 17px 13px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 6px 6px;
}

select.inverted[required]:valid, select.inverted[required][valid], select.inverted[required].valid,
.select.inverted[required]:valid, .select.inverted[required][valid], .select.inverted[required].valid {
  background: linear-gradient(#0098da, #0098da) no-repeat,
              linear-gradient(-135deg, rgba(255,255,255,0) 12px, white 12px) no-repeat,
              linear-gradient(-225deg, rgba(255,255,255,0) 13px, white 12px) no-repeat,
              linear-gradient(#0098da, #0098da) no-repeat,
              linear-gradient(#0098da 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, #0098da 1px, transparent 0px) no-repeat,
              linear-gradient(#0098da 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, #0098da 1px, transparent 0px) no-repeat,
              linear-gradient(#0098da 7px, transparent 0px) no-repeat, #fff;
  background-position: right 18px center, right bottom, right bottom, right bottom, top 3px right 22px, top 3px right 22px, top 12px right 22px, top 3px right 31px, top 5px right 24px;
  background-size: 1px 100%, 17px 16px, 17px 18px, 17px 13px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 6px 6px;
}


select[required][invalid="true"],
.select[required][invalid="true"] {
  background: linear-gradient(#0098da, #0098da) no-repeat,
              linear-gradient(-135deg, rgba(255,255,255,0) 12px, white 12px) no-repeat,
              linear-gradient(-225deg, rgba(255,255,255,0) 13px, white 12px) no-repeat,
              linear-gradient(#0098da, #0098da) no-repeat,
              linear-gradient(red 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, red 1px, transparent 0px) no-repeat,
              linear-gradient(red 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, red 1px, transparent 0px) no-repeat,
              linear-gradient(red 7px, transparent 0px) no-repeat,
              #fff;
  background-position: right 18px center, right bottom, right bottom, right bottom, top 3px right 22px, top 3px right 22px, top 12px right 22px, top 3px right 31px, top 5px right 24px;
  background-size: 1px 100%, 17px 16px, 17px 18px, 17px 13px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 6px 6px;
}

select.redtype[required],
.select.redtype[required] {
  background: linear-gradient(white, white) no-repeat,
              linear-gradient(-135deg, rgba(255,255,255,0) 12px, red 12px) no-repeat,
              linear-gradient(-225deg, rgba(255,255,255,0) 13px, red 12px) no-repeat,
              linear-gradient(white, white) no-repeat,
              linear-gradient(red 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, red 1px, transparent 0px) no-repeat,
              linear-gradient(red 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, red 1px, transparent 0px) no-repeat,
              linear-gradient(red 7px, transparent 0px) no-repeat,
              red;
  background-position: right 18px center, right bottom, right bottom, right bottom, top 3px right 22px, top 3px right 22px, top 12px right 22px, top 3px right 31px, top 5px right 24px;
  background-size: 1px 100%, 17px 16px, 17px 18px, 17px 13px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 6px 6px;
}

select.redtype[required]:valid, select.redtype[required][valid], select.redtype[required].valid,
.select.redtype[required]:valid, .select.redtype[required][valid], .select.redtype[required].valid {
  background: linear-gradient(white, white) no-repeat,
              linear-gradient(-135deg, rgba(255,255,255,0) 12px, red 12px) no-repeat,
              linear-gradient(-225deg, rgba(255,255,255,0) 13px, red 12px) no-repeat,
              linear-gradient(white, white) no-repeat,
              linear-gradient(red 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, red 1px, transparent 0px) no-repeat,
              linear-gradient(red 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, red 1px, transparent 0px) no-repeat,
              linear-gradient(red 7px, transparent 0px) no-repeat,
              red;
  background-position: right 18px center, right bottom, right bottom, right bottom, top 3px right 22px, top 3px right 22px, top 12px right 22px, top 3px right 31px, top 5px right 24px;
  background-size: 1px 100%, 17px 16px, 17px 18px, 17px 13px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 6px 6px;
}

.select-lg {
  background-position: right 18px center, right 9px, right 6px, right 11px, top 3px right 22px, top 3px right 22px, top 12px right 22px, top 3px right 31px, top 5px right 24px !important;
  font-size: 14px;
  line-height: 16px;
  padding: 6px 35px 6px 6px !important;
  height: 30px !important;
}

.select-dropdown-hide-text-label-overflow > .value-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


div[required] {
  background: linear-gradient(red 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, red 1px, transparent 0px) no-repeat,
              linear-gradient(red 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, red 1px, transparent 0px) no-repeat,
              linear-gradient(red 7px, transparent 0px) no-repeat,
              transparent;
  background-position: top 2px right 2px, top 2px right 2px, top 11px right 2px, top 2px right 11px, top 4px right 4px;
  background-size: 10px 1px, 1px 10px, 10px 1px, 1px 10px, 6px 6px;
}

div[required][valid]:not([valid="false"]), div[required].valid {
  background: linear-gradient(#fff 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, #fff 1px, transparent 0px) no-repeat,
              linear-gradient(#fff 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, #fff 1px, transparent 0px) no-repeat,
              linear-gradient(#fff 7px, transparent 0px) no-repeat,
              transparent;
  background-position: top 2px right 2px, top 2px right 2px, top 11px right 2px, top 2px right 11px, top 4px right 4px;
  background-size: 10px 1px, 1px 10px, 10px 1px, 1px 10px, 6px 6px;
}


div.inverted[required]{
  background: linear-gradient(red 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, red 1px, transparent 0px) no-repeat,
              linear-gradient(red 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, red 1px, transparent 0px) no-repeat,
              linear-gradient(red 7px, transparent 0px) no-repeat,
              transparent;
  background-position: top 2px right 2px, top 2px right 2px, top 11px right 2px, top 2px right 11px, top 4px right 4px;
  background-size: 10px 1px, 1px 10px, 10px 1px, 1px 10px, 6px 6px;
}

div.inverted[required][valid]:not([valid="false"]), div.inverted[required].valid {
  background: linear-gradient(#0098da 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, #0098da 1px, transparent 0px) no-repeat,
              linear-gradient(#0098da 1px, transparent 0px) no-repeat,
              linear-gradient(-90deg, #0098da 1px, transparent 0px) no-repeat,
              linear-gradient(#0098da 7px, transparent 0px) no-repeat, transparent;
  background-position: top 2px right 2px, top 2px right 2px, top 11px right 2px, top 2px right 11px, top 4px right 4px;
  background-size: 10px 1px, 1px 10px, 10px 1px, 1px 10px, 6px 6px;
}




/* Focus on fields */

a:focus, select:focus, .select:focus, input:focus, textarea:focus, .btn:focus, label:focus, *[tabindex]:focus {
  outline: none; /* rgb(0, 0, 0) solid 2px; */
  outline-offset: 0px;
  box-shadow: 0px 0px 2pt 1.25pt black;
}

th:focus, tr:focus, td:focus {
  box-shadow: inset 0px 0px 2pt 1.25pt black;
}