@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');

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

.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; cursor: pointer; }
a.base-color-1st:hover, .base-color-1st a:hover { color: var(--base-color-1st-lt) !important; text-decoration: underline; }
.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; cursor: pointer; }
a.base-color-2nd:hover, .base-color-2nd a:hover  { color: var(--base-color-2nd-lt) !important; text-decoration: underline; }
.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-size-sm { font-size: var(--base-font-size-sm) !important; }
.base-font-size-xs { font-size: var(--base-font-size-xs) !important; }

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

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


/*** InvertedFilm Variables ******************************/
:root {
    --base-color-1st: var(--rz-primary);
    --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-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-background: #252525;
    --base-color-black: #000000;
    --base-color-black10: #0000001A;
    --base-color-black20: #00000033;
    --base-color-black60: #00000099;
    --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: 'Poppins', Helvetica, Arial, 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-h5: 1.125rem;
    --base-font-size: var(--rz-text-body1-font-size);
    --base-font-size-sm: calc(var(--base-font-size) * .875);
    --base-font-size-xs: calc(var(--base-font-size) * .75);

    --hdr-height: 75px;

    --base-page-height: calc(100dvh - var(--hdr-height));
}

/*** 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-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: #ED1C25;
    --rz-primary-light: #ED1C2599;
    --rz-primary-lighter: #FC7279;
    --rz-primary-dark: #C00710;
    --rz-primary-darker: #980008;
    --rz-secondary: #12948B;
    --rz-secondary-light: #12948B99;
    --rz-secondary-lighter: #52B5AE;
    --rz-secondary-dark: #057870;
    --rz-secondary-darker: #005F58;
    /***/
    --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 !important; }
    .base-sm-show { display: block; }
    :root { 
        --hdr-height: 50px; 
    }
}