html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

.mandatory {
    color: red;
}

#navbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background-color: white !important;
    padding-bottom: 2rem !important;
}

    #navbar::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: url("../svg/wave.svg") no-repeat !important;
        background-size: 100% 60% !important;
        background-position: center top !important;
        z-index: -1 !important;
        -moz-transform: scaleY(-1);
        -o-transform: scaleY(-1);
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
        filter: FlipV;
        -ms-filter: "FlipV";
    }

/*Floating input*/


.f-label {
    width: 100%;
    position: relative;
}

.f-input {
    border-bottom: 1px solid black !important;
    width: 100% !important;
    padding: 10px 0px;
    margin-top: 20px;
    border: none;
    outline: none;
}

    .f-input::placeholder {
        opacity: 0;
    }

.f-label-name {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(30px);
    font-size: 0.825em;
    transition-duration: 300ms;
}

.f-label-name-with-value {
    transform: translateY(0px);
}

.f-label:focus-within > .f-label-name,
.f-input:not(:placeholder-shown) + .f-label-name {
    font-weight: 400;
    color: #2C347E;
    transform: translateY(0px);
}

.f-input-date:required:invalid::-webkit-datetime-edit {
    color: transparent;
}

.f-input-date:focus-out:required:invalid::-webkit-datetime-edit {
    color: transparent;
}

.f-input-date:focus::-webkit-datetime-edit {
    color: black !important;
}

/* Smooth Fade-in Animation for Modal */
.modal.fade .modal-dialog {
    transform: translate(0, -50%);
    transition: transform 0.3s ease-in-out;
}

.modal.show .modal-dialog {
    transform: translate(0, 0);
}

/* Custom styling for modal footer buttons */
.modal-footer .btn {
    font-weight: bold;
    border-radius: 25px;
}

/* Add some padding to the modal content */
.modal-content {
    padding: 20px;
}

#navbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background-color: white !important;
    padding-bottom: 2rem !important;
}

    #navbar::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: url("../svg/wave.svg") no-repeat !important;
        background-size: 100% 60% !important;
        background-position: center top !important;
        z-index: -1 !important;
        -moz-transform: scaleY(-1);
        -o-transform: scaleY(-1);
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
        filter: FlipV;
        -ms-filter: "FlipV";
    }

/*Floating input*/


.f-label {
    width: 100%;
    position: relative;
}

.f-input {
    border-bottom: 1px solid black !important;
    width: 100% !important;
    padding: 10px 0px;
    margin-top: 20px;
    border: none;
    outline: none;
}

    .f-input::placeholder {
        opacity: 0;
    }

.f-label-name {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(30px);
    font-size: 0.825em;
    transition-duration: 300ms;
}

.f-label-name-with-value {
    transform: translateY(0px);
}

.f-label:focus-within > .f-label-name,
.f-input:not(:placeholder-shown) + .f-label-name {
    font-weight: 400;
    color: #2C347E;
    transform: translateY(0px);
}

.f-input-date:required:invalid::-webkit-datetime-edit {
    color: transparent;
}

.f-input-date:focus-out:required:invalid::-webkit-datetime-edit {
    color: transparent;
}

.f-input-date:focus::-webkit-datetime-edit {
    color: black !important;
}