@font-face {
    font-family: "mainFont";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("Regular.otf") format("opentype");
}

@font-face {
    font-family: "mainFont";
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url("Medium.otf") format("opentype");
}

@font-face {
    font-family: "mainFont";
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url("SemiBold.otf") format("opentype");
}

@font-face {
    font-family: "mainFont";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url("Bold.otf") format("opentype");
}

@font-face {
    font-family: "mainFont";
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    src: url("Black.otf") format("opentype");
}

:root {
    --main-font: "mainFont", sans-serif;
    --theme-font: "mainFont", sans-serif;
    --bs-font-sans-serif: "mainFont", sans-serif;
    --bs-body-font-family: "mainFont", sans-serif;
    --bs-btn-font-family: "mainFont", sans-serif;
    --bs-font-monospace: "mainFont", sans-serif;
}

html,
body {
    font-family: "mainFont", sans-serif !important;
}

body,
body *:not(i):not([class^="fa"]):not([class*=" fa"]):not([class^="ti"]):not([class*=" ti"]):not([class^="flag-icon"]):not([class*=" flag-icon"]),
button,
input,
select,
textarea,
.table,
.card,
.btn,
.form-control,
.form-select,
.dropdown-menu,
.select2-container,
.select2-dropdown {
    font-family: "mainFont", sans-serif !important;
}

.fa,
.fa-solid,
.fas {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
}

.fa-regular,
.far {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 400 !important;
}

.fa-brands,
.fab {
    font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", "FontAwesome" !important;
    font-weight: 400 !important;
}

.ti,
[class^="ti-"],
[class*=" ti-"] {
    font-family: "tabler-icons" !important;
}