html,body
{
    width: 100%;
    height: 100%;
}

body
{
    font-family: 'SF Pro Display Regular';
    font-size: 15px !important;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    
    color: #333;
    background-color: #F8FAFC;
}

h1,h2,h3,h4,h5,h6
{
    font-family: 'SF Pro Display Semibold';
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="datetime-local"],
textarea
{
    border-radius: 8px !important;
    padding: 1rem !important;
    border-color: #CCC!important;
}

textarea
{
    width: 100%;
    resize: none;
}

input[type="checkbox"]
{
    padding: .5rem;
}

input::placeholder,
textarea::placeholder
{
    color: #8F8D8B!important;
}

input:active, input:focus, input:focus-visible,
textarea:active, textarea:focus, textarea:focus-visible
{
    box-shadow: none !important;
    border-color: #CCC!important;
}

.btn
{
    height: 50px!important;
    display: flex;
    align-items: center;
    border-radius: 8px;
    padding: 12px 32px !important;
}

.btn-primary
{
    border-color: #312E81;
    background-color: #312E81;
    transition: all .15s;
}

.btn-primary:hover
{
    border-color: #312E81;
    background-color: #312E81;
    opacity: .8;
}

.admin-button
{
    color: #FFF !important;
    background-color: #f64f64 !important;
}

.success-text
{
    color: #27be56 !important;
}

.form-check
{
    display: flex;
    align-items: center;
}

.form-check>input
{
    margin-top: -.05rem;
    margin-right: .25rem;
}

.form-check-input
{
    transition: all .15s;
}

.form-check-input:checked
{
    background-color: #312E81;
    border-color: #312E81;
}

.form-error
{
    color: #DC2626;
}

.spinner-border
{
    border-width: 3px;
    height: 1.2rem;
    width: 1.2rem;
}

.profile-picture-big
{
    height: 6.5rem;
    width: 6.5rem;
    border-radius: 10rem;
    display: block;
    margin: 0 auto;
}