/* Shared Opus Group styles */

/* Fonts */
@font-face {
    font-family: 'Proxima Nova';
    src: url(https://opusgroup.io/fonts/proximanova/ProximaNova-Regular.woff2?v=2) format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova';
    src: url(https://opusgroup.io/fonts/proximanova/ProximaNova-Semibold.woff2?v=2) format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova';
    src: url(https://opusgroup.io/fonts/proximanova/ProximaNova-Bold.woff2?v=2) format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AngrapiHeadlines';
    src: url(https://opusgroup.io/fonts/AngrapiHeadlines600.woff2) format('woff2');
    font-weight: 600;
    font-style: normal;
}

:root {
    --ogio-brand-color: #36495F;

    /* Brand colors */
    --brand-color-1-base: #36495F;
    --brand-color-1-primary: #ffffff;
    --brand-color-1-quaternary: #475467;
    --brand-color-1-quinary: #98A2B3;
    --brand-color-1-secondary: #EAECF0;
    --brand-color-1-tertiary: #D0D5DD;
    --brand-color-2-base: #101828;
    --brand-color-2-primary: #ffffff;
    --brand-color-2-quaternary: #EAECF0;
    --brand-color-2-secondary: #D0D5DD;
    --brand-color-2-tertiary: #475467;
    --brand-color-3-base: #FFFFFF;
    --brand-color-3-primary: #101828;
    --brand-color-3-quaternary: #EAECF0;
    --brand-color-3-secondary: #475467;
    --brand-color-3-tertiary: #344054;

    /* Status colors */
    --error-color-background: #F04438;
    --error-color-background-state: #D41D10;
    --error-color-text: #ffffff;
    --success-color-background: #17B26A;
    --succes-color-text: #ffffff;
    --warning-color-background: #FDB022;
    --warning-color-text: #ffffff;

    /* Hero colors */
    --hero-color-gradient-end: #1B2633;
    --hero-color-gradient-start: #46657E;
    --hero-color-primary: #ffffff;
    --hero-color-secondary: #EAECF0;

    /* CTA colors */
    --select-cta-color-background: rgba(50, 222, 138, 0.200);
    --primary-cta-color-background: #32DE8A;
    --primary-cta-color-background-disabled: #F2F4F7;
    --primary-cta-color-background-state: #0B9E56;
    --primary-cta-color-border: #32DE8A;
    --primary-cta-color-border-disabled: #EAECF0;
    --primary-cta-color-border-state: #0B9E56;
    --primary-cta-color-text: #101828;
    --primary-cta-color-text-disabled: #98A2B3;
    --primary-cta-color-text-state: #ffffff;
    --secondary-cta-color-background: #FFFFFF;
    --secondary-cta-color-background-disabled: #ffffff;
    --secondary-cta-color-background-state: #F9FAFB;
    --secondary-cta-color-border: #D0D5DD;
    --secondary-cta-color-border-disabled: #EAECF0;
    --secondary-cta-color-border-state: #D0D5DD;
    --secondary-cta-color-text: #344054;
    --secondary-cta-color-text-disabled: #98A2B3;
    --secondary-cta-color-text-state: #101828;

    /* Icon colors */
    --primary-icon-color: #32DE8A;
    --secondary-icon-color: #101828;
    --tertiary-icon-color: #98A2B3;
    --quaternary-icon-color: #ffffff;

    /* Tag colors */
    --tag-color-base: #EFF8FF;
    --tag-color-main-base: #DEF1FF;
    --tag-color-primary: #B2DDFF;
    --tag-color-secondary: #264972;
    --tag-color-tertiary: #ffffff;
}

body {
    font-family: 'Proxima Nova', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'AngrapiHeadlines', sans-serif;
}

input, select, textarea, button {
    font-family: inherit;
}

/* Header */
.ogio-header {
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 3.5rem;
    background: var(--ogio-brand-color);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    z-index: 50;
}

.ogio-header a.logo {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    text-decoration: none;
}

.ogio-header a.logo:hover {
    background: rgba(0, 0, 0, 0.2);
}

.ogio-header .logo img {
    height: 36px;
    width: auto;
}

.ogio-header .header-welcome {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
}

.ogio-header .header-logout {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
}

.ogio-header .header-logout:hover {
    background: rgba(0, 0, 0, 0.2);
}

.ogio-header .header-logout img {
    height: 20px;
    width: auto;
}

/* Account for fixed header */
main,
.ogio-body-no-toolbar {
    padding-top: 4.5rem;
}

/* Toolbar area - sits right below fixed header */
.ogio-toolbar-area {
    position: fixed;
    top: 3.5rem;
    left: 0;
    right: 0;
    z-index: 49;
}

/* Body with toolbar needs extra padding */
.ogio-body {
    padding-top: 7rem;
}

/* Pipedrive toolbar */
.bg-pipedrive-toolbar {
    background-color: #eff7ff;
}

/* Buttons */
a.ogio-btn-big,
a.ogio-btn-small,
.ogio-btn-big,
.ogio-btn-small {
    background-color: var(--select-cta-color-background);
    border: 1px solid var(--primary-cta-color-border);
    color: var(--primary-cta-color-text);
}

/* Big button sizing - 3 per row on large screens, 4 on xl */
.ogio-btn-big {
    width: calc((100% - 2rem) / 3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 110%;
}

@media (min-width: 1200px) {
    .ogio-btn-big {
        width: calc((100% - 3rem) / 4);
    }
}

a.ogio-btn-big:hover,
a.ogio-btn-small:hover,
.ogio-btn-big:hover,
.ogio-btn-small:hover {
    background-color: var(--primary-cta-color-background-state);
    border-color: var(--primary-cta-color-border-state);
    color: var(--primary-cta-color-text-state);
}

.ogio-btn-big .fw600,
.ogio-btn-small .fw600 {
    color: var(--primary-cta-color-text);
}

.ogio-btn-big:hover .fw600,
.ogio-btn-small:hover .fw600 {
    color: var(--primary-cta-color-text-state);
}

/* Bootstrap button overrides */
.btn-primary {
    background-color: var(--primary-cta-color-background);
    border-color: var(--primary-cta-color-border);
    color: var(--primary-cta-color-text);
}

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

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

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

/* Utilities */
.fw600 {
    font-weight: 600;
}

.ogio-btn-icon {
    height: 20px;
}