/* text field */
    .text-field {
      /*margin-bottom: 1rem;*/
    }

    .text-field__label {
      display: block;
      margin-bottom: 0.25rem;
    }

    .text-field__input {
      display: block;
      width: 100%;
      height: calc(2.25rem + 2px);
      padding: 0.375rem 0.75rem;
      font-family: inherit;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
	  color: white;
	  text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.2em black;
	  font-weight: bold;
      background-color: #ffffff12;
      background-clip: padding-box;
      border: 1px solid #516ac182;
      border-radius: 0.25rem;
      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
    }

    .text-field__input[type="search"]::-webkit-search-decoration,
    .text-field__input[type="search"]::-webkit-search-cancel-button,
    .text-field__input[type="search"]::-webkit-search-results-button,
    .text-field__input[type="search"]::-webkit-search-results-decoration {
      -webkit-appearance: none;
    }

    .text-field__input::placeholder {
      color: white;
      opacity: 0.4;
    }

    .text-field__input:focus {
      color: white;
      background-color: #ffffff00;
      border-color: #516ac1;
      outline: 0;
      box-shadow: 0 0 0 0.2rem rgba(158, 158, 158, 0.25);
    }

    .text-field__input:disabled,
    .text-field__input[readonly] {
      background-color: #f5f5f5;
      opacity: 1;
    }

    /* with floating label */
    .text-field_floating-2 {
      position: relative;
    }

    .text-field_floating-2 .text-field__input {
      padding-left: 70px;
    }

    .text-field_floating-2 .text-field__label {
      position: absolute;
      top: 50%;
      left: 0.3125rem;
      display: flex;
      transform: translateY(+12px);
      pointer-events: none;
      border: none;
      /*background-color: #fff;
      color: #757575;*/
		font-size: small;
		text-transform: none;	  
      padding-left: 0.5rem;
      padding-right: 0.5rem;
      transition: top 0.1s ease-in-out, scale 0.1s ease-in-out;
    }
	
    .input_btn {
		position: absolute;
		width: 120px;
		justify-content: center;
		z-index:4;
		/* height: 100%; */
		top: 1;
		bottom: 1;
		right: 0;
		display: flex;
		/* transform: translateY(+12px); */
		color: rgb(231 224 224);
		text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.2em black;
		background-color: #ffffff00;
		/*pointer-events: none;*/
		border: none;
		font-size: small;
		/* border-radius: 0.25rem; */
		text-transform: none;
		padding-left: 0.5rem;
		padding-right: 0.5rem;
		padding-top: 11;
		border-left: 1px solid #516ac182;
		transition: top 0.1s ease-in-out, scale 0.1s ease-in-out;    }	

    .text-field_floating-2 .text-field__input::-moz-placeholder {
      color: transparent;
    }

    .text-field_floating-2 .text-field__input::placeholder {
      color: transparent;
    }

    .text-field_floating-2 .text-field__input:focus~.text-field__label,
    .text-field_floating-2 .text-field__input:not(:placeholder-shown)~.text-field__label {
      top: 0;
      /*transform: translateY(-50%) scale(0.75);*/
    }
	
	.blur-on-lose-focus:not(:focus) {
		color: transparent;
		text-shadow: 0 0 20px rgb(255 255 255);
	}