:root {
    --primary: #1e7acd;
    --primary-hover: #8c8c8c;
    --secondary: #303540;
    --input-box-color: lightgrey;
    --site-font: 'Roboto', sans-serif;
    --site-background: #1e7acd;
    --background-color: white /*#EFF2F8*/;
    --text-color: white;
    --input-background-color: rgb(240, 240, 240);
}

@font-face {
    font-family: Roboto;
    src: url(../Fonts/Roboto-Regular.ttf);
}

html, body, html * {
    font-family: var(--site-font);
}

.form-control {
    background-color: var(--input-background-color);
}

#findbooking, #express, #expressName, #expressInformation, #expressAddress, #expressPassport, #expressLicence, #express {
    background-color: var(--background-color);
}

.btn.btn-primary:active {
    background-color: var(--primary-hover);
}

input.form-control[readonly] {
    background-color: var(--input-background-color);
}

.btn-primary,
.btn-primary:focus {
    color: var(--text-color);
    background-color: var(--secondary);
    border-color: var(--secondary);
}

.btn-primary:hover {
    color: var(--text-color);
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

#findbooking .customNavbar, #expressName .customNavbar, #expressInformation .customNavbar, #expressAddress .customNavbar, #expressPassport .customNavbar, #expressLicence .customNavbar, #express .customNavbar {
    background-color: var(--background-color);
}

#smsSubmit {
    background-color: var(--secondary);
    border-color: var(--secondary);
}