/*
Site Wide CSS Rules
*/
@font-face {
    font-family: 'Circular Pro';
    src: url('/theme/utalk/dist/fonts/CircularPro-Bold.woff2') format('woff2'),
    url('/theme/utalk/dist/fonts/CircularPro-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Circular Pro';
    src: url('/theme/utalk/dist/fonts/CircularPro-Book.woff2') format('woff2'),
    url('/theme/utalk/dist/fonts/CircularPro-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: "Circular Pro", "Roboto", "sans-serif";
}

/* Use this class for text that will never be translated and should not show as right to left text in localisations such as arabic */
.alwaysEnglishText {
    direction: ltr;
    text-align: left;
}

.arrowRight::after {
    content: '→';
}

html[dir="rtl"] .arrowRight::after {
    content: '←';
}

.arrowLeft::after {
    content: '←';
}

html[dir="rtl"] .arrowLeft::after {
    content: '→';
}

/*
 Bootstrap 4 Component uTalk Colour Overrides
*/

.btn-warning {
    background-color: #ff971f;
    border-color: #ff971f;
    color: white;
    border-radius: 12px;
}

.btn-warning:hover {
    background-color: #ff6600;
    border-color: #ff6600;
    color: white;
}

.btn-warning:active {
    background-color: #ff6600;
    border-color: #ff6600;
    color: white;
}

.btn-warning:focus {
    background-color: #ff6600;
    border-color: #ff6600;
    color: white;
}

.btn-danger {
    background-color: #ff0033;
    border-color: #ff0033;
    color: white;
    border-radius: 12px;
}

.btn-danger:hover {
    background-color: #a8131B;
    border-color: #a8131B;
    color: white;
}

.btn-danger:active {
    background-color: #a8131B;
    border-color: #a8131B;
    color: white;
}

.btn-danger:focus {
    background-color: #a8131B;
    border-color: #a8131B;
    color: white;
}

/* Do not show the recaptcha badge (We still have to declare it (and the Ts&Cs) where it is used) */
.grecaptcha-badge {
    visibility: hidden;
}