:root {
  --color: #808080;
  --disabled: #959495;
  --required: #f00;
  /*--input-background: #f1f3f7;*/
  --input-background: #f6f8fa;
  --signature-background: #f6f8fa;
  --text-color: #495057;
  --time-picker-accent: #206688;
  --input-error: #ca1010;
  --table-striped: #fbfdfe;
  --delete: #b90000;
  --action-hover: #eaeaea;
  --action-icon-blue: #4572b9;
}

.ap-theme-default {
  color: var(--time-picker-accent);
}
.ap-theme-default .ap-component-selector {
  border-top-color: var(--time-picker-accent);
  border-bottom-color: var(--time-picker-accent);
}

.slide-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
  display: none;
  overflow: hidden;
}
.slide-panel .bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.slide-panel .right-panel {
  background: #fff;
  border: initial;
  height: 100%;
  display: flex;
  flex-direction: column;
  float: right;
  position: relative;
  box-shadow: 0px 0px 16px #797979;
  width: 410px;
  transform: translateX(410px);
  max-width: 1024px;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  /*    transition-property: transform;
  transition-duration: 2s;*/
}
.slide-panel .right-panel.show {
  transform: translateX(0px);
}
.slide-panel .header {
  border-bottom: 3px solid #c8c8c8;
  display: flex;
  flex: 0 0 50px;
  padding-left: 10px;
}
.slide-panel .header .title {
  font-weight: 600;
  font-size: 1em;
  color: #46586f;
  margin-top: 12px;
}
.slide-panel .header .close {
  margin-left: auto;
  text-shadow: none;
}
.slide-panel .body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  padding: 0;
  overflow: hidden;
}

.web-submission {
  background-color: #f7f7f7;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.web-submission section {
  overflow: hidden;
}
.web-submission .form-loader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  z-index: 999999;
}
.web-submission .form-loader img {
  width: 200px;
}
.web-submission .form-loader span {
  color: #3c5e8a;
}
.web-submission header {
  background-color: #2a3742;
  color: #fff;
  padding: 10px;
}
.web-submission header h1 {
  font-size: 1.4em;
  text-transform: uppercase;
}
.web-submission header h2 {
  font-size: 0.7em;
  color: #d0d0d0;
  margin-bottom: 5px;
  text-transform: uppercase;
}
.web-submission .form-wrapper {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.web-submission .form {
  flex: 1 1 auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.web-submission footer {
  background-color: #eee;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.web-submission footer p {
  margin: 0;
  font-size: 0.7em;
}
.web-submission .controls {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  padding-bottom: 20px;
  padding-top: 10px;
}
.web-submission .controls .btn {
  font-size: 2em;
  border-radius: 3px;
}
.web-submission .controls .submit-form {
  width: 100%;
  max-width: 300px;
  background-color: #3884d5;
}
.web-submission .controls .submit-form:hover {
  background-color: #0069d9;
}
.web-submission .collection {
  background-color: #fff;
  padding: 20px;
  margin: 15px 0;
  box-shadow: 0px 0px 10px #eaeaea;
  /*min-height: 100%;*/
  min-width: 300px;
  overflow: auto;
}
.web-submission .collection input {
  border: 1px solid #fff;
  background-color: var(--input-background);
  padding: 10px 7px;
  height: unset;
  color: var(--text-color);
}
.web-submission .collection input[readonly] {
  background-color: #ebedf0;
  color: #89898a;
}
.web-submission .collection input.calculated {
  background-color: #f9f7f3;
}
.web-submission .collection .gr {
  text-transform: uppercase;
  font-size: 1.5em;
  font-weight: bold;
  color: #808080;
  margin: 20px 0;
}
.web-submission .collection .foi {
  margin-bottom: 10px;
}
.web-submission .collection .prop {
  position: relative;
}
.web-submission .collection .prop.audit {
  /*position: absolute;
  top: 6px;
  font-size: .8em;
  right: 5px;
  color: #ff9000;
  cursor:pointer;*/
}
.web-submission .collection .prop.audit .state-border {
  border: 1px solid #ffe7c9 !important;
}
.web-submission .collection .prop.audit .audit-contr {
  display: none;
  position: absolute;
  /*background-color: #ff9000;*/
  bottom: -15px;
  z-index: 99999;
}
.web-submission .collection .prop.audit .audit-contr > div {
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0px 0px 10px #e1e1e1;
  height: 25px;
  line-height: 23px;
  background-color: #fff;
  padding: 0 5px;
  color: #495057;
  font-size: 0.8em;
  cursor: pointer;
}
.web-submission .collection .prop.audit:hover .state-border {
  border: 1px solid #ff9000;
}
.web-submission .collection .prop.audit:hover .audit-contr {
  display: flex;
  justify-content: right;
  width: 100%;
}
.web-submission .collection .prop .prop-t {
  font-size: 0.8em;
  margin-bottom: 2px;
  color: #3e3e3e;
}
.web-submission .collection .prop .prop-t .req {
  color: var(--required);
}
.web-submission .collection .prop.err .state-border {
  border: 1px solid var(--input-error);
}
.web-submission .collection .prop.err .err-val {
  color: var(--input-error);
  font-size: 0.7em;
}
.web-submission .collection .info {
  padding: 10px 5px;
  color: #939393;
  font-weight: 300;
  height: 100%;
  flex: 1;
}
.web-submission .collection .textbox {
  position: relative;
}
.web-submission .collection .textbox textarea {
  height: unset;
  background: var(--input-background);
  border: none;
  min-height: 45px;
}
.web-submission .collection .textbox .cnt {
  position: absolute;
  right: 2px;
  bottom: 0;
  color: #b3b3b3;
  font-size: 0.7em;
}
.web-submission .collection .textbox textarea + .cnt {
  right: 13px;
}
.web-submission .collection .select {
  /* styling */
  color: var(--text-color);
  display: inline-block;
  font: inherit;
  line-height: 1.5em;
  /* reset */
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--input-background);
  border: none;
  height: 45px;
  width: 100%;
  background-image: url("/Content/Images/chevron-down.png");
  background-position: calc(100% - 5px) 50%;
  background-size: 25px 25px;
  background-repeat: no-repeat;
  padding: 5px;
}
.web-submission .collection .select:focus {
  outline: 0;
}
.web-submission .collection .radio {
  display: flex;
  flex-direction: row;
}
.web-submission .collection .radio .r-btn {
  padding-right: 3px;
  flex: 1 1 auto;
  cursor: pointer;
}
.web-submission .collection .radio .r-btn .r-btn-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
}
.web-submission .collection .radio .r-btn .r-btn-t {
  position: relative;
  text-align: center;
  display: block;
  max-height: 25px;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
.web-submission .collection .radio .r-btn:last-child {
  padding: 0;
}
.web-submission .collection .radio .r-btn > div {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 9px;
  border: 1px solid #f2f2f2;
}
.web-submission .collection .radio.stack {
  flex-direction: column;
}
.web-submission .collection .radio.stack .r-btn {
  padding: 3px;
}
.web-submission .collection .range {
  display: flex;
  align-items: center;
  height: 45px;
  padding: 0 15px;
  padding-top: 3px;
  padding-bottom: 10px;
}
.web-submission .collection .range .slide {
  flex: 1 1 auto;
}
.web-submission .collection .range .noUi-horizontal {
  height: 9px;
}
.web-submission .collection .range .noUi-horizontal .noUi-handle {
  width: 25px;
  height: 20px;
  right: -11px;
  top: -7px;
  cursor: pointer;
}
.web-submission .collection .range .noUi-horizontal .noUi-handle::after, .web-submission .collection .range .noUi-horizontal .noUi-handle::before {
  height: 9px;
  width: 1px;
  left: 8px;
  top: 5px;
}
.web-submission .collection .range .noUi-horizontal .noUi-handle::after {
  left: 15px;
}
.web-submission .collection .range .noUi-pips-horizontal {
  height: 40px;
}
.web-submission .collection .range .noUi-marker-horizontal.noUi-marker-large {
  height: 7px;
}
.web-submission .collection .range .noUi-value-horizontal {
  transform: translate(-50%, -10%);
  font-size: 0.6em;
}
.web-submission .collection .range .noUi-marker-horizontal.noUi-marker {
  width: 2px;
  height: 2px;
}
.web-submission .collection .range .noUi-target {
  background: var(--input-background);
  border-radius: unset;
  border: none;
  box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
}
.web-submission .collection .range .noUi-marker {
  background: var(--input-background);
}
.web-submission .collection .range .noUi-marker-large {
  background: var(--input-background);
}
.web-submission .collection .range .noUi-tooltip {
  border: none;
  font-size: 0.6em;
  color: #808080;
  font-weight: normal;
  background: none;
  bottom: 65%;
}
.web-submission .collection .inline-image {
  display: flex;
  justify-content: center;
}
.web-submission .collection .inline-image img {
  width: 100%;
}
.web-submission .collection .checkbox {
  display: flex;
  margin-bottom: 5px;
}
.web-submission .collection .checkbox > .icon {
  width: 30px;
  height: 30px;
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 5px;
  cursor: pointer;
  opacity: 0.3;
}
.web-submission .collection .checkbox > .icon.check {
  opacity: 1;
}
.web-submission .collection .checkbox > label {
  display: grid;
  grid-template-columns: min-content auto;
  grid-gap: 0.5em;
  font-size: 1.1rem;
  color: var(--color);
  line-height: 1;
  cursor: pointer;
  margin: 0;
  margin-top: auto;
  padding: 0;
}
.web-submission .collection .checkbox > label--disabled {
  color: var(--disabled);
}
.web-submission .collection .checkbox > label .checkbox__control {
  display: inline-grid;
  width: 1em;
  height: 1em;
  /*border-radius: 0.25em;*/
  border: 0.1em solid currentColor;
}
.web-submission .collection .checkbox > label .checkbox__control svg {
  transition: transform 0.1s ease-in 25ms;
  transform: scale(0);
  transform-origin: bottom left;
}
.web-submission .collection .checkbox > label .checkbox__input {
  display: grid;
  grid-template-areas: "checkbox";
}
.web-submission .collection .checkbox > label .checkbox__input > * {
  grid-area: checkbox;
}
.web-submission .collection .checkbox > label .checkbox__input input {
  display: none;
  /*opacity: 0;*/
  /* width: 1em;
  height: 1em;*/
  /*  &:focus + .checkbox__control {
      box-shadow: 0 0 0 0.05em #fff, 0 0 0.15em 0.1em currentColor;
  }*/
}
.web-submission .collection .checkbox > label .checkbox__input input:checked + .checkbox__control svg {
  transform: scale(0.9) translateY(-2px);
}
.web-submission .collection .checkbox > label .checkbox__input input:disabled + .checkbox__control {
  color: var(--disabled);
}
.web-submission .collection .signature {
  min-height: 45px;
  cursor: pointer;
}
.web-submission .collection .signature .signature-display {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--signature-background);
  color: #495057;
  width: 100%;
  height: 115px;
}
.web-submission .collection .signature .signature-display .ico {
  font-size: 2em;
  color: #d0d2d7;
}
.web-submission .collection .signature .signature-display .tt {
  color: #d0d2d7;
  font-size: 0.8em;
}
.web-submission .collection .signature .signature-display .signature-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: none;
  background-color: var(--signature-background);
}
.web-submission .collection .signature .signature-capture {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  display: none;
  z-index: 9999999;
}
.web-submission .collection .signature .signature-capture.active {
  display: flex;
}
.web-submission .collection .signature .signature-capture .s-bg {
  background-color: #000;
  opacity: 0.2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.web-submission .collection .signature .signature-capture .capture {
  display: flex;
  flex-direction: column;
  position: relative;
  background: #fff;
  flex: 1 1 auto;
  height: 100%;
  max-width: 500px;
  max-height: 350px;
  box-shadow: 0 0 10px #979797;
  margin: 10px;
}
.web-submission .collection .signature .signature-capture .capture canvas {
  width: 100%;
  flex: 1 1 auto;
}
.web-submission .collection .signature .signature-capture .capture .s-con {
  display: flex;
  background-color: #F9F9F9;
  justify-content: center;
  align-items: center;
}
.web-submission .collection .signature .signature-capture .capture .s-con > span {
  padding: 10px;
  flex: 1 1 auto;
  text-align: center;
  cursor: pointer;
}
.web-submission .collection .signature .signature-capture .capture .s-con > span:hover {
  background-color: #f3f3f3;
}
.web-submission .collection .signature .signature-capture .capture .s-con .s-save {
  color: #2a3b7e;
}
.web-submission .collection .signature .signature-capture .capture .s-con .s-clear {
  color: #bb4f4f;
}
.web-submission .collection .signature .signature-capture .capture .s-con .s-cancel {
  color: #797979;
}
.web-submission .collection .images {
  /*display: flex;*/
  /*flex-direction: column;*/
  position: relative;
}
.web-submission .collection .images > .tt {
  position: absolute;
  top: 2px;
  right: 10px;
  display: none;
  font-size: 0.6em;
  color: #730c0c;
}
.web-submission .collection .images .image-ic {
  position: relative;
  width: 100%;
  /* top: 0;
  left: 0;
  right: 0;*/
  height: 95px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px dashed #d0d2d7;
  padding: 10px;
  /*margin: 10px;*/
  /*float: left;*/
  transition: all;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
  cursor: pointer;
}
.web-submission .collection .images .image-ic .img-file {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  display: block;
  cursor: pointer;
}
.web-submission .collection .images .image-ic .ico {
  font-size: 1.5em;
  color: #d0d2d7;
  margin-bottom: 5px;
}
.web-submission .collection .images .image-ic .tt {
  color: #d0d2d7;
  font-size: 0.8em;
  text-align: center;
}
.web-submission .collection .images.fixed > .tt {
  display: block;
}
.web-submission .collection .images.fixed .image-ic {
  top: unset;
  left: unset;
  right: 0px;
  bottom: 0px;
  border: none;
  border-radius: 50px;
  box-shadow: 0 0 5px #ddd;
  width: 30px;
  height: 30px;
  background: #fff;
}
.web-submission .collection .images.fixed .image-ic:hover {
  /*border: 1px solid #206688;*/
  box-shadow: 0 0 5px #206688;
}
.web-submission .collection .images.fixed .image-ic .ico {
  font-size: 1em;
  margin-bottom: unset;
}
.web-submission .collection .images.fixed .image-ic .tt {
  display: none;
}
.web-submission .collection .images.max .image-ic {
  display: none;
}
.web-submission .collection .images .image-wrapper {
  /*flex: 0 0 115px;*/
  background-color: var(--input-background);
  /*overflow: auto;*/
  /*overflow-y: hidden;*/
}
.web-submission .collection .images .image-col .image {
  position: relative;
  width: 115px;
  height: 115px;
  padding: 20px 10px;
  float: left;
}
.web-submission .collection .images .image-col .image img {
  width: 100%;
  height: 100%;
  border-radius: 3px;
  object-fit: cover;
  cursor: pointer;
}
.web-submission .collection .images .image-col .image img:hover {
  box-shadow: 0 0 7px #797979;
}
.web-submission .collection .images .image-col .image svg {
  position: absolute;
  top: 20px;
  left: 10px;
  width: 95px;
  height: 75px;
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
}
.web-submission .collection .images .image-col .image.deleting svg {
  transition: all;
  transition-duration: 1s;
  transition-delay: 0.1s;
  transition-timing-function: ease-out;
  stroke-dashoffset: 0;
}
.web-submission .collection .images .con {
  display: flex;
  justify-content: end;
  padding: 5px;
  background-color: #f9f9f9;
}
.web-submission .collection .map {
  height: 350px;
}
.web-submission .collection .ws-grid {
  display: flex;
  flex-wrap: wrap;
}
.web-submission .collection .ws-grid .foi {
  margin-right: 10px;
  overflow: unset;
}
.web-submission .collection .ws-grid .foi.ws-g-end {
  margin-right: 0;
}
.web-submission .collection .ws-table {
  overflow-x: auto;
}
.web-submission .collection .ws-table table {
  table-layout: fixed;
}
.web-submission .collection .ws-table table.table-striped tbody tr:nth-of-type(2n+1) {
  background-color: var(--table-striped);
}
.web-submission .collection .ws-table th {
  padding: 10px 2px;
  color: #424242;
  font-weight: 500;
  border: none;
  display: table-cell;
  height: 45px;
}
.web-submission .collection .ws-table th.del {
  text-align: center;
  color: rgba(185, 0, 0, 0.1803921569);
}
.web-submission .collection .ws-table th.checkbox {
  text-align: center;
}
.web-submission .collection .ws-table td {
  padding: 2px;
  border: none;
  vertical-align: middle;
}
.web-submission .collection .ws-table td > div {
  display: flex;
  align-items: center;
  min-height: 45px;
  width: 100%;
}
.web-submission .collection .ws-table td.del {
  text-align: center;
  color: var(--delete);
  cursor: pointer;
}
.web-submission .collection .ws-table td .prop {
  flex: 1 1 auto;
  overflow: unset;
}
.web-submission .collection .ws-table td .prop .prop-t {
  display: none;
}
.web-submission .collection .ws-table td .checkbox {
  display: flex;
  justify-content: center;
}
.web-submission .collection .ws-table td .checkbox .checkbox__input {
  display: block;
}
.web-submission .collection .ws-table td .checkbox .checkbox__label {
  display: none;
}
.web-submission .collection .ws-table td .number {
  text-align: right;
}
.web-submission .collection .ws-table .new .del span {
  display: none;
}
.web-submission .collection .documents {
  /*padding: 10px;*/
}
.web-submission .collection .documents .doc-collection {
  max-height: 220px;
  overflow-y: auto;
}
.web-submission .collection .documents ul {
  margin: 0;
  list-style: none;
}
.web-submission .collection .documents ul li {
  padding: 10px;
  margin: 0;
  margin-top: 5px;
  display: flex;
  /*justify-content:center;*/
  align-items: center;
  background: var(--input-background);
  /*
  &:hover {
      background: #f0faff;
  }*/
  /*  &:last-child {
      margin-bottom: 10px;
  }*/
}
.web-submission .collection .documents ul li:not(.new) > span {
  color: royalblue;
  cursor: pointer;
}
.web-submission .collection .documents ul li input {
  display: none;
}
.web-submission .collection .documents ul li .rem {
  /*color: var(--delete);*/
  /*margin-right:10px;*/
}
.web-submission .collection .documents .doc-actions {
  display: flex;
  align-items: center;
}
.web-submission .collection .documents .doc-actions div:last-of-type {
  margin-right: auto;
}
.web-submission .collection .documents .doc-actions .add-doc {
  margin: 5px 0;
  padding: 5px 5px;
  cursor: pointer;
  display: inline-block;
}
.web-submission .collection .documents .doc-actions .add-doc:hover {
  background-color: var(--action-hover);
}
.web-submission .collection .documents .doc-actions .add-doc i {
  color: var(--action-icon-blue);
}
.web-submission .collection .documents .doc-actions .cnt {
  font-size: 0.8em;
}
.web-submission .collection .documents .file-select {
  display: none;
}
.web-submission .collection .totals {
  background-color: #fff !important;
}
.web-submission .collection .totals td {
  /*    &:first-child {
      padding-left: 5px;
  }

  &:last-child {
      padding-right: 5px;
  }*/
}
.web-submission .collection .totals td span {
  background-color: #f7f7f7;
  text-align: right;
  font-weight: bold;
  font-size: 0.7em;
  color: #495057;
  padding-right: 9px;
  display: block;
}
.web-submission .collection .link span {
  cursor: pointer;
}
.web-submission .collection .link span:hover {
  text-decoration: underline;
}

.image-large-view {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999999999;
}
.image-large-view .bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #000;
  opacity: 0.3;
  z-index: -1;
}
.image-large-view .remove {
  font-size: 3em;
  position: absolute;
  top: 50px;
  right: 50px;
  cursor: pointer;
}

@media (max-width: 576px) {
  #wf_v1 .collection .ws-grid {
    flex-direction: column;
  }
  #wf_v1 .collection .ws-grid .foi {
    margin-right: 0;
  }
}
.audit:not(.prop) .body {
  padding: 20px;
}
.audit:not(.prop) .body label {
  font-weight: bold;
}
.audit:not(.prop) ul {
  list-style: none;
  border-top: 1px solid #e18cd8;
  overflow: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  flex: 1 1 auto;
}
.audit:not(.prop) ul li {
  font-size: 0.8em;
  border-bottom: 1px solid #e8e8e8;
  padding: 5px;
}
.audit:not(.prop) ul li .b {
  display: flex;
  font-size: 0.8em;
  font-family: arial;
  color: #797979;
}
.audit:not(.prop) ul li .b > div:first-child {
  margin-left: auto;
  margin-right: 5px;
}
.audit:not(.prop) ul li .b .dt {
  flex: 0 0 85px;
}

.select-box {
  position: relative;
  display: block;
  width: 100%;
  min-width: 150px;
  margin: 0 auto;
  font-family: "Open Sans", "Helvetica Neue", "Segoe UI", "Calibri", "Arial", sans-serif;
  font-size: 18px;
  color: #60666d;
}
.select-box__current {
  position: relative;
  cursor: pointer;
  outline: none;
}
.select-box__current:focus + .select-box__list {
  opacity: 1;
  animation-name: none;
}
.select-box__current:focus + .select-box__list .select-box__option {
  cursor: pointer;
}
.select-box__current:focus .select-box__icon {
  transform: translateY(-50%) rotate(180deg);
}
.select-box__icon {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  width: 20px;
  opacity: 0.3;
  transition: 0.2s ease;
}
.select-box__value {
  display: flex;
}
.select-box__input {
  display: none;
}
.select-box__input:checked + .select-box__input-text {
  display: block;
}
.select-box__input-text {
  display: none;
  width: 100%;
  margin: 0;
  padding: 9px;
  background-color: var(--input-background);
  min-height: 45px;
}
.select-box__list {
  position: absolute;
  width: 100%;
  padding: 0;
  list-style: none;
  opacity: 0;
  background: #fff;
  z-index: 99999;
  animation-name: HideList;
  animation-duration: 0.5s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: step-start;
  box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.1);
}
.select-box__option {
  display: block;
  padding: 15px;
  background-color: #fff;
}
.select-box__option:hover, .select-box__option:focus {
  color: #546c84;
  background-color: #fbfbfb;
}

@keyframes HideList {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(0);
  }
}