@import url("bootstrap-icons.min.css");

/* FONTS */
@font-face {
    font-family: PaytoneOne;
    src: url(../fonts/PaytoneOne-Regular.ttf);
}

@font-face {
    font-family: Poppins;
    src: url(../fonts/Poppins-Regular.ttf);
}
@font-face {
    font-family: Poppins-Bold;
    src: url(../fonts/Poppins-SemiBold.ttf);
}

@font-face {
    font-family: Poppins-Light;
    src: url(../fonts/Poppins-Light.ttf);
}

body{
    font-family: Poppins;
}

.font-poppins-light{
    font-family: Poppins-Light;
}
.font-poppins-bold{
    font-family: Poppins-Bold;
}
  
.font-paytone {
    font-family: PaytoneOne !important;
}

:root {
    --custom-blue: #0083CB;
  }
.text-custom{
    color: var(--custom-blue)
}
.bg-custom{
    background-color: var(--custom-blue)
}



/* INPUTS */
input:focus{
    outline: none !important;
}
.form-control, .form-control:focus{ background-color: transparent; color: var(--custom-blue); font-weight: bold; }
input::placeholder {
    font-weight: 300;
    color: rgb(208, 208, 208) !important;
    opacity: 1; /* Firefox */
    font-family: Poppins-Light;
}
 /* Edge 12 -18 */ 
::-ms-input-placeholder { color: red !important; }

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    -webkit-appearance: none;
}

.btn-outline-custom{
    border: 1px solid var(--custom-blue) !important;
    color: var(--custom-blue) !important
}
.btn-outline-custom:hover{
   background-color: var(--custom-blue) !important;
   color: white !important;
}

.btn-custom{
    background-color: var(--custom-blue) !important;
    color: white !important
}
.btn-custom:hover{
    background-color: #0096e7 !important;
    color: white !important
}


.checkbox-round {
    width: 12px;
    height: 12px;
    aspect-ratio: 1/1;
    background-color: transparent;
    border-radius: 50%;
    vertical-align: middle;
    box-shadow: 0 0 0 2px var(--custom-blue);
    border: 2px solid white;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
}
.checkbox-round.is-invalid {
    width: 12px;
    height: 12px;
    aspect-ratio: 1/1;
    background-color: rgb(255, 228, 232);
    border-radius: 50%;
    vertical-align: middle;
    box-shadow: 0 0 0 2px var(--bs-form-invalid-border-color);
    border: 2px solid white;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
}

.checkbox-round:checked {
    background-color: var(--custom-blue);
}

html{
    scroll-behavior: smooth;
    scroll-margin-top: 10px;
}