@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

* { box-sizing: border-box; font-weight: 400; }
*:focus {  outline: none; }

body, html { background-color: var(--base-color-bg); color: var(--base-color-black); font-family: var(--base-font-family); font-size: var(--rz-text-font-size); height: 100%; margin: 0; padding: 0; scroll-behavior: smooth; }

h1 { color: var(--base-color-black); font-family: var(--base-font-family-hdr); font-size: var(--base-font-size-h1); margin: 0 0 var(--base-font-size-h2); }
h2 { color: var(--base-color-black); font-family: var(--base-font-family-hdr); font-size: var(--base-font-size-h2); margin: 0 0 var(--base-font-size-h3); }
h3 { color: var(--base-color-black); font-family: var(--base-font-family); font-size: var(--base-font-size-h3); margin: 0 0 var(--base-font-size-h4); }
h4 { color: var(--base-color-black); font-family: var(--base-font-family); font-size: var(--base-font-size-h4); margin: 0 0 var(--base-font-size); }

a, 
a:hover, 
a:visited { color: var(--base-color-black); text-decoration: none; }

strong, b { font-weight: 700 !important; }

input,
textarea { font-family: var(--base-font-family); }

input::placeholder,
textarea::placeholder { color: #888; }

.input-black input, 
.input-black textarea { color: var(--base-color-black) !important; }

/*** BOSC Shared ************************************/
.base-btn { min-width: 150px; }
.base-btn-lg { min-width: 250px; }

.base-color-1st, .base-color-1st a { color: var(--base-color-1st) !important; }
a.base-color-1st { color: var(--base-color-1st) !important; }
a.base-color-1st:hover, .base-color-1st a:hover { color: var(--base-color-1st60) !important; text-decoration: underline; }
.base-color-1st60 { color: var(--base-color-1st60) !important; }
.base-color-1st-dk { color: var(--base-color-1st-dk) !important; }

.base-color-2nd, .base-color-2nd a { color: var(--base-color-2nd) !important; }
a.base-color-2nd { color: var(--base-color-2nd) !important; }
a.base-color-2nd:hover, .base-color-2nd a:hover  { color: var(--base-color-2nd60) !important; text-decoration: underline; }
.base-color-2nd60 { color: var(--base-color-2nd60) !important; }
.base-color-2nd-dk { color: var(--base-color-2nd-dk) !important; }

.base-color-white, .base-color-white a, a.base-color-white { color: var(--base-color-white) !important; }
.base-color-white a:hover, a.base-color-white:hover { color: var(--base-color-white60) !important; text-decoration: underline; }
.base-color-white60, .base-color-white60 a, a.base-color-white60 { color: var(--base-color-white60) !important; }
.base-color-white60 a:hover, a.base-color-white60:hover { color: var(--base-color-white) !important; text-decoration: underline; }
.base-color-white-dk, .base-color-white-dk a, a.base-color-white-dk { color: var(--base-color-white-dk) !important; }
.base-color-white-dk a:hover, a.base-color-white-dk:hover { color: var(--base-color-white) !important; text-decoration: underline; }

.base-color-black, .base-color-black a, a.base-color-black { color: var(--base-color-black) !important; }
.base-color-black a:hover, a.base-color-black:hover { color: var(--base-color-black60) !important; text-decoration: underline; }
.base-color-black60, .base-color-black60 a, a.base-color-black60 { color: var(--base-color-black60) !important; }
.base-color-black60 a:hover, a.base-color-black60:hover { color: var(--base-color-black) !important; text-decoration: underline; }

.base-font-alt { font-family: var(--base-font-family-alt) !important; }
.base-font-size { font-size: var(--base-font-size) !important; }
.base-font-size-sm { font-size: var(--base-font-size-sm) !important; }
.base-font-size-h4 { font-size: var(--base-font-size-h4) !important; }
.base-font-size-h3 { font-size: var(--base-font-size-h3) !important; }
.base-font-lite, base-font-lt { font-weight: 300 !important; }
.base-font-strong, base-font-b { font-weight: 700 !important; }
.base-font-xstrong, base-font-xb { font-weight: 900 !important; }
.base-font-upper { text-transform: uppercase !important; }

.base-mp-0 { margin: 0 !important; padding: 0 !important }

.base-sm-hide { display: block; }
.base-sm-show { display: none; }

.base-textarea-ht { height: 100px; }
.base-textarea-ht-lg { height: 300px; }

/*** BOSC Variables *********************************/
:root {
    --base-color-1st: var(--rz-primary);
    --base-color-1st60: var(--rz-primary60p);
    --base-color-1st-dk: var(--rz-primary-dark);
    --base-color-1st-dk-dk: var(--rz-primary-darker);
    --base-color-1st-lt: var(--rz-primary-light);
    --base-color-1st-lt-lt: var(--rz-primary-lighter);
    --base-color-2nd: var(--rz-secondary);
    --base-color-2nd60p: var(--rz-secondary60p);
    --base-color-2nd-dk: var(--rz-secondary-dark);
    --base-color-2nd-dk-dk: var(--rz-secondary-darker);
    --base-color-2nd-lt: var(--rz-secondary-light);
    --base-color-2nd-lt-lt: var(--rz-secondary-lighter);
    --base-color-bg: #FFFFFF;
    --base-color-black: #130708;
    --base-color-black10: #1307081A;
    --base-color-black20: #13070833;
    --base-color-black60: #13070899;
    --base-color-white: #FFFFFF;
    --base-color-white10: #FFFFFF1A; /* White @ 10% Opacity */
    --base-color-white20: #FFFFFF33; /* White @ 20% Opacity */
    --base-color-white60: #FFFFFF99; /* White @ 60% Opacity */

    --base-font-family: 'Work Sans', sans-serif;
    --base-font-family-alt: 'Great Vibes', cursive;
    --base-font-family-hdr: 'Work Sans', sans-serif;
    --base-font-size-h1: 2.5rem;
    --base-font-size-h2: 2.25rem;
    --base-font-size-h3: 1.75rem;
    --base-font-size-h4: 1.25rem;
    --base-font-size: var(--rz-text-body1-font-size);
    --base-font-size-sm: calc(var(--base-font-size) * .875);
}

/*** Radzen Component Overrides *************************/
:root {
    --rz-dialog-content-padding: 0;
    --rz-dialog-content-padding: 0;
    /***/
    --rz-header-background-color: var(--base-color-black);
    --rz-header-color: var(--base-color-white);
    --rz-profile-menu-top-item-background-color: transparent;
    /***/
    --rz-layout-background-color: var(--base-color-white);
    --rz-layout-body-padding: 0;
    --rz-layout-body-margin: 0;
    /***/
    --rz-upload-button-bar-background-color: transparent;
    /***/
    --rz-on-primary-lighter: var(--rz-primary);
    --rz-on-secondary-lighter: var(--rz-secondary);
    --rz-primary: #552A5C;
    --rz-primary60p: #552A5C99;
    --rz-primary-light: #6E4076;
    --rz-primary-lighter: #8A6391;
    --rz-primary-dark: #46184E;
    --rz-primary-darker: #2F0835;
    --rz-secondary: #439088;
    --rz-secondary60p: #43908899;
    --rz-secondary-light: #74B0AA;
    --rz-secondary-lighter: #74B0AA26;
    --rz-secondary-dark: #136C63;
    --rz-secondary-darker: #03574E;
    /***/
    --rz-grid-cell-font-size: var(--base-font-size-sm);
    --rz-text-h3-font-family: var(--base-font-family-hdr);
    --rz-text-body1-color: var(--base-color-white);
    --rz-text-font-family: var(--base-font-family);
    /***/
    --rz-tooltip-background-color: var(--rz-base-dark);
    --rz-tooltip-color: var(--rz-on-base-dark);
    --rz-tooltip-font-size: var(--base-font-size-sm);
}


/*** Smartphone *****************************************/
@media screen and (max-width: 768px) {
    .base-sm-hide { display: none; }
    .base-sm-show { display: block; }
}