label {
    color: var(--beep-green);
}

input:focus, input {
    outline: none!important;
}

input[required] ~ label:not(.no-required-mark)::after,
label.required::after {
    content: " *";
    color: #FF0000;
}

input[type=checkbox][required] ~ label::after {
    content: "";
}
input[type=checkbox][required] ~ label::before {
    content: "*";
    color: #FF0000;
}

input[type=radio]:checked ~ label {
    font-weight: bold;
}

input:disabled {
    background-color: transparent;
    color: black;
}

input[type=time], input[type=date] {
    background-color: transparent;
    line-height: 1.1rem;
}
@-moz-document url-prefix() {
    input[type=time], input[type=date] {
        line-height: 1.25rem;
    }
}

@media (max-width: 768px) {
    input[type=time].bugfix {
        top: 4px;
    }
}

input[type=time]::-webkit-calendar-picker-indicator {
	background: transparent;
}

.fa-calendar ~ input[type=date]::-webkit-calendar-picker-indicator,
.beep-icon.calendar ~ input[type=date]::-webkit-calendar-picker-indicator  {
    background: transparent;
    color: transparent;
    cursor: pointer;
    position: absolute; top: 0; right: 0; bottom: 0; left: -10px;
    width: auto; height: auto;
}

.input-text-overlay {
    background-color: var(--beep-white);
    pointer-events: none;
    position: absolute;
    left: 0;
    bottom: 6px;
    z-index: 10;
}

.fade-in-animation {
    animation: fadein 0.2s ease-in 0s 1 normal;
}

@keyframes fadein {
    from {opacity: 0}
    to {opacity: 1}
}

.form-control, .form-control:focus {
    background-color: transparent;
}

.form-control.is-invalid {
    border-color: #dc3545!important;
}

.form-control.always-valid {
    height: auto;
}

.was-validated .form-control.always-valid {
    border-color: #28a745;
}