@import "../fonts/webfonts/Lato/stylesheet.css";
@import "../fonts/webfonts/Poppins/stylesheet.css";
@import "../icons/icons/bootstrap-icons/bootstrap-icons.css";
@import "../icons/icons/zinnia-icons/zinnia-icons.css";



/* fonts */
:root {
--body-font:Lato;
--heading-font:Poppins;
/* font-sizes */
--font-size-3x-small:   12px;
--font-size-2x-small:   13px;
--font-size-x-small:    14px;
--font-size-small:      15px;
--font-size-medium:     16px;
--font-size-large:      17px;
--font-size-x-large:    18px;
--font-size-2x-large:   19px;
--font-size-3x-large:   20px;
--font-size-4x-large:   21px;
--font-size-5x-large:   24px;
--font-size-6x-large:   26px;
--font-size-7x-large:   30px;

/* font-weights */
--font-weight-light:       300;
--font-weight-regular:       normal;
--font-weight-medium:        500;
--font-weight-medium-italic: 500 italic;
--font-weight-semibold:      600;
--font-weight-bold:          700;
--font-weight-bold-italic:   700 italic;
--font-weight-extrabold:     800;

}
/* Zinnia Color Tokens */

/* Zinnia Color Tokens naming guide
“category”-”context”
“component”-”state”-”context”
*/
:root {
/* Primary */
--color-primary:                    #FF7500;
--color-primary-lightest:           #FEDED0;
--color-primary-lighter:            #FFC899;
--color-primary-light:              #FFAC66;
--color-primary-dark:               #994600;
--color-primary-50-percent-opacity: rgba(255, 117, 0, 0.5);

/* Secondary */
--color-secondary:                  #00628B;
--color-secondary-lightest:         #D9E7EE;
--color-secondary-lighter:          #99C0D1;
--color-secondary-light:            #66A1BA;
--color-secondary-dark:             #003B54;

/* Accents */
--color-accent-one: #FFC600;
--color-accent-two: #FF1822;
--color-accent-loader-zero-percent-opacity:          rgba(255, 198, 0, 0);
--color-accent-loader-contrast-zero-percent-opacity: rgba(255, 255, 255, 1);
--color-50-percent-black-opacity:                    rgba(0, 0, 0, 0.5);

/* Links */
--color-global-link:#00628B;
--color-global-link-lighter: #99C0D1;
--color-global-link-light: #66A1BA;
--color-global-link-dark: #003B54;

/* Grayscale */
--color-black:     #000000;
--color-white:     #FFFFFF;
--color-50-gray:   #F8F8F8;
--color-100-gray:  #EDEDED;
--color-200-gray:  #CCCCCC;
--color-300-gray:  #B3B3B3;
--color-400-gray:  #949494;
--color-500-gray:  #7F7F7F;
--color-600-gray:  #676767;
--color-700-gray:  #4D4D4D;
--color-800-gray:  #313131;
--color-900-gray:  #212121;
--color-logo-gray: #63666A;

/* Semantics */
--color-semantic-information:#005FED;
--color-semantic-success: #007B5A;
--color-semantic-pending:#AC0091;
--color-semantic-warning: #B74D00;
--color-semantic-error:#DB004F;
--color-semantic-information-50-percent-opacity: rgba(0, 95, 237, 0.5);
--color-semantic-warning: #B74D00;
--color-semantic-error: #DB004F;
--color-semantic-information-50-percent-opacity: rgba(0, 95, 237, 0.5);
--color-semantic-success-50-percent-opacity: rgba(0, 135, 98, 0.5);
--color-semantic-pending-50-percent-opacity: rgba(172, 0, 145, 0.5);
--color-semantic-warning-50-percent-opacity: rgba(195, 82, 0, 0.5);
--color-semantic-error-50-percent-opacity: rgba(219, 0, 79, 0.5);
--color-semantic-information-light: #F2F7FE;
--color-semantic-success-light:#f2f9f7;
--color-semantic-pending-light: #FBF2F9;
--color-semantic-warning-light: #FCF6F2;
--color-semantic-error-light: #FDF2F6;
--color-semantic-focus: #007DBC;
--color-semantic-text-highlight: #FFE485;


/* Zinnia | Extended Colors */

/* Aqua */
--color-50-aqua:  #F9FDFD;
--color-100-aqua: #D6F0F1;
--color-200-aqua: #A9D8DA;
--color-300-aqua: #7EC4C7;
--color-400-aqua: #37BCC2;
--color-500-aqua: #489A9D;
--color-600-aqua: #377A7D;
--color-700-aqua: #2C5B5D;
--color-800-aqua: #1F3C3D;
--color-900-aqua: #152426;

/* Cerulean */
--color-50-cerulean:  #F4FAFF;
--color-100-cerulean: #DEEDF9;
--color-200-cerulean: #ABDCFB;
--color-300-cerulean: #6CC2F6;
--color-400-cerulean: #37A2D8;
--color-500-cerulean: #0B7EAE;
--color-600-cerulean: #00628B;
--color-700-cerulean: #0B4D6A;
--color-800-cerulean: #083951;
--color-900-cerulean: #072838;


/* Fuchsia */
--color-50-fuchsia:  #FFF5FE;
--color-100-fuchsia: #FFE9FC;
--color-200-fuchsia: #F7C9F1;
--color-300-fuchsia: #E09ED9;
--color-400-fuchsia: #D47ACC;
--color-500-fuchsia: #BD58B7;
--color-600-fuchsia: #973B93;
--color-700-fuchsia: #752671;
--color-800-fuchsia: #4D124A;
--color-900-fuchsia: #320630;


/* Lime */
--color-50-lime:  #FDFDF1;
--color-100-lime: #F6F5D2;
--color-200-lime: #E1E38D;
--color-300-lime: #C0C64F;
--color-400-lime: #A4AE08;
--color-500-lime: #8B9403;
--color-600-lime: #656C02;
--color-700-lime: #484E01;
--color-800-lime: #3A3E01;
--color-900-lime: #2C2E07;

/* Orange */ 
--color-50-orange:  #FFFBF9;
--color-100-orange: #FAE7DF;
--color-200-orange: #FFCAB0;
--color-300-orange: #FFA071;
--color-400-orange: #FF7500;
--color-500-orange: #F26003;
--color-600-orange: #DD4A07;
--color-700-orange: #BB3D05;
--color-800-orange: #992E04;
--color-900-orange: #7D2106;

/* Red */ 
--color-50-red:  #FFFBFA;
--color-100-red: #FFE5E0;
--color-200-red: #FEC3B6;
--color-300-red: #FE8F7B;
--color-400-red: #FF6652;
--color-500-red: #FF1822;
--color-600-red: #DA021C;
--color-700-red: #A20713;
--color-800-red: #800C0F;
--color-900-red: #560F08;

/* Yellow */ 
--color-50-yellow:  #FFFCF8;
--color-100-yellow: #FCF0DC;
--color-200-yellow: #FFE3AB;
--color-300-yellow: #FFD576;
--color-400-yellow: #FFC600;
--color-500-yellow: #FCAF0E;
--color-600-yellow: #E89510;
--color-700-yellow: #C57402;
--color-800-yellow: #9D5400;
--color-900-yellow: #703800;

}
/*******************************************************************
Box shadows*/
:root{
/* light theme */
--elevation-light-xs: 0px 0.8px 1.8px 0px   rgba(0, 0, 0, 0.13), 0px 0.15px 0.45px 0px rgba(0, 0, 0, 0.11);
--elevation-light-sm: 0px 1.6px 3.6px 0px   rgba(0, 0, 0, 0.11), 0px 0.3px 0.9px 0px   rgba(0, 0, 0, 0.07);
--elevation-light-md: 0px 3.2px 7.2px 0px   rgba(0, 0, 0, 0.13), 0px 0.6px 1.8px 0px   rgba(0, 0, 0, 0.11);
--elevation-light-lg: 0px 6.4px 14.4px 0px  rgba(0, 0, 0, 0.13), 0px 1.2px 3.6px 0px   rgba(0, 0, 0, 0.11);
--elevation-light-xl: 0px 12.8px 28.8px 0px rgba(0, 0, 0, 0.22), 0px 2.4px 7.4px 0px   rgba(0, 0, 0, 0.18);
--elevation-light-2xl:0px 25.6px 57.6px 0px rgba(0, 0, 0, 0.22), 0px 4.8px 14.4px 0px  rgba(0, 0, 0, 0.18);

/* dark theme */
--elevation-dark-xs: 0px 0.8px 1.8px 0px   rgba(0, 0, 0, 0.13), 0px 0.15px 0.45px 0px rgba(0, 0, 0, 0.11);
--elevation-dark-sm: 0px 0px 2px 0px       rgba(0, 0, 0, 0.2),  0px 2px 4px 0px rgba(0, 0, 0, 0.28);
--elevation-dark-md: 0px 0px 2px 0px       rgba(0, 0, 0, 0.2),  0px 4px 8px 0px rgba(0, 0, 0, 0.28);
--elevation-dark-lg: 0px 0px 2px 0px       rgba(0, 0, 0, 0.2),  0px 8px 16px 0px rgba(0, 0, 0, 0.28);
--elevation-dark-xl: 0px 12.8px 28.8px 0px rgba(0, 0, 0, 0.22), 0px 2.4px 7.4px 0px rgba(0, 0, 0, 0.18);
--elevation-dark-2xl:0px 0px 8px 0px       rgba(0, 0, 0, 0.4),  0px 32px 64px 0px rgba(0, 0, 0, 0.48)
;

}
/*******************************************************************
gradients*/
:root{
/* gradient-linear */
--color-gradient-linear:   linear-gradient(90deg, var(--color-accent-one) 0.00%, var(--color-primary) 75.54%, var(--color-accent-two) 100.00%);	
}


/*******************************************************************
Paddings*/
:root{
--padding-none:0;
--padding-xs:2px;
--padding-sm:4px;
--padding-md:6px;
--padding-lg:8px;
--padding-xl:12px;
--padding-2xl:16px;
--padding-3xl:24px;
--padding-4xl:32px;
--padding-5xl:40px;
--padding-6xl:48px;
}

/*******************************************************************
Margins*/
:root{
    --margin-none:0;
    --margin-xs:2px;
    --margin-sm:4px;
    --margin-md:6px;
    --margin-lg:8px;
    --margin-xl:12px;
    --margin-2xl:16px;
    --margin-3xl:24px;
    --margin-4xl:32px;
    --margin-5xl:40px;
    --margin-6xl:48px;
    }
    

/*******************************************************************
Border Radius*/
:root{
--radius-none:0;
--radius-xs:2px;
--radius-sm:4px;
--radius-md:6px;
--radius-lg:8px;
--radius-xl:12px;
--radius-2xl:16px;
--radius-3xl:24px;
--radius-4xl:32px;
--radius-max:50%;
}
@keyframes rotate {  100% { transform: rotate(1turn);}}
:root{
--animation-rotate: rotate .80s linear infinite;
--ease-: 0.3s;
}