/*
Site Wide CSS Rules
*/
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');

@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-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;
}

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

/*
 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;
}

/*
    Bootstrap 4 UI overrides
*/


/*
Custom Components
*/

.utalk-3d-btn {
    border-color: #300d62 !important;
    animation-name: btnBackgroundChangeBack;
    animation-duration: 0.2s;
    background: #300d62;
    background-size: 40px 40px;
    font-size: 1.6em;
    color:white !important;
    text-decoration: none !important;
}

.utalk-3d-btn:hover {
    border-color: #481a8a !important;
    color: white;
    animation-name: btnBackgroundChange;
    animation-duration: 0.2s;
    background: #481a8a;
    background-size: 40px 40px;
}

.utalk-3d-btn:active {
    position: relative;
    transform: translate(0, 0px);
    box-shadow: 0 1px 4px rgba(0,0,0,0.32), 0 1px 4px rgba(0,0,0,0.46);
    color: white;
}

.utalk-3d-btn:focus {
    border-color: #481a8a !important;
    color: white;
    animation-name: btnBackgroundChange;
    animation-duration: 0.2s;
    background: #481a8a;
    background-size: 40px 40px;}